Menuju Sistem Telemonitoring Kesehatan yang Ubiquitous


Kemajuan teknologi informasi dan komunikasi yang pesat saat ini memungkinkan pelayanan kesehatan dilakukan secara elektronik. Salah satu diantara aplikasinya adalah berupa sistem monitoring kesehatan pasien dari jarak jauh yang diistilahkan dengan  sistem telemonitoring, remote patient monitoring, atau wireless patient monitoring.

The American Telemedicine Association mendefinisikan telemonitoring sebagai proses penggunaan audio, video, dan teknologi pengolahan informasi elektronik atau telekomunikasi lainnya untuk memantau status kesehatan pasien dari jarak jauh. Sedangkan The Medical Dictionary Online mendefinisikan telemonitoring sebagai sebuah pengukuran secara terus menerus atau periodik terhadap proses fisiologis dari pasien seperti tekanan darah, denyut jantung, dan tingkat respirasi.

remote

Gambar 1. Remote Patient Monitoring System (Devaraj, 2012)

Dengan diterapkannya sistem telemonitoring ini maka status kesehatan pasien dapat dilakukan tanpa pasien perlu berada di rumah sakit. Di sisi lain dokter yang menangani pasien pun dapat melakukan monitoring atas kondisi pasien secara realtime tanpa perlu melakukan kunjungan ke lokasi dimana pasien berada sehingga penanganan pasien dapat dilakukan dengan lebih efisien. Sistem telemonitoring pada umumnya memiliki Lanjutkan membaca “Menuju Sistem Telemonitoring Kesehatan yang Ubiquitous”

Achievement Unlocked: Breaking 37-Months Hiatus


Hiatus /haɪˈeɪtəs/ (Noun)

  • A gap in a series, making it incomplete.
  • An interruption, break or pause.
  • An unexpected break from work.

Setelah 37 bulan yang penuh dengan berbagai kisah kehidupan (halah) sejak postingan terakhir, akan tiba saatnya saya mengisi blog kembali insyaallah😉

Verbatim String Literal di C#


Nge-escape satu-satu tiap karakter spesial kalau ada banyak dan stringnya panjang apalagi multiline itu merepotkan, bisa jadi malah ada yang kelewat (mana nih yang belum ke-escape?). Untungnya di C# ada fitur yang membuat penulisan string diinterpretasikan apa adanya, jadi tidak memperdulikan karakter-karakter khusus yang biasa diawali backslash (\).

Menurut buku Tatang Sutarma, ada dua bentuk penulisan string yang didukung C# yaitu regular (biasa) dan verbatim. Nah bentuk yang kedua inilah yang saya maksudkan, cukup dengan menuliskan karakter @ sebelum tanda kutip pembuka menandakan bahwa kita tidak memperdulikan berbagai macam escape (kecuali untuk karakter tanda kutip yang harus ditulis dalam bentuk double-double-quote seperti ini -> “”).

Sebagai contoh perbandingan, di bawah ini saya memiliki sejumlah baris kode JavaScript dalam bentuk string yang ingin saya assign ke sebuah property bertipe string di C# dengan penulisan regular:

RowSelectionModel1.Listeners.RowSelect.Handler =
    "#{GridPanel1}.selModel.getSelected();" +
    "var baris = Ext.data.Record.create([" +
    "    {name: \"Id\"}," +
    "    {name: \"Path\"}" +
    "]);" +
    "var tambahan = new baris({" +
    "    id: Ext.id()," +
    "    Id: record.data.Id," +
    "    Path: \"~\\App\\XML\\\" + record.data.Nmfile + \".xml\"" +
    "});" +
    "parent.#{GridPanel1}.getStore().add(tambahan);";

Dengan mengubah penulisan stringnya ke bentuk verbatim, selain tidak perlu mengescape karakter-karakter khusus juga kita bisa menggunakan penulisan multiline. Lihat bagaimana penulisan dalam bentuk ini mengimprove readability dari kode di atas:

RowSelectionModel1.Listeners.RowSelect.Handler =
  @"#{GridPanel1}.selModel.getSelected();
    var baris = Ext.data.Record.create([
        {name: ""Id""},
        {name: ""Path""}
    ]);
    var tambahan = new baris({
        id: Ext.id(),
        Id: record.data.Id,
        Path: ""~\App\XML\"" + record.data.Nmfile + "".xml""
    });
    parent.#{GridPanel1}.getStore().add(tambahan);";

Lanjutkan membaca “Verbatim String Literal di C#”

Value Type vs Reference Type di C#


Menurut buku Tatang Sutarma, berbagai tipe di C# pada hakikatnya dapat dibagi menjadi beberapa kategori yakni value type, reference type, dan pointer type.

Value type meliputi hal-hal seperti enum, struct, int, float, decimal, char, bool, dll. Sedangkan reference type meliputi seluruh tipe class, interface, delegate, dynamic, object, maupun string. Adapun yang menjadi perbedaan utama dari kedua tipe tersebut adalah pada bagaimana representasi dan perlakuannya di memory.

Representasi dari setiap variabel yang bertipe value di memory adalah berupa nilainya, sedangkan tipe nilai reference di memory direpresentasikan dalam bentuk “reference” dan “object” (yang berisi nilainya).

Setiap assignment dari suatu instance ke instance lain pada value type selalu membuat kopian nilainya ke instance baru, sedangkan assignment pada reference tidak ikut mengkopi objeknya namun hanya membuat kopian referencenya saja sehingga keduanya merujuk pada object yang sama.

Untuk melihat bagaimana perbedaan diantara keduanya dapat memberikan perbedaan di dunia nyata, kita lihat pada program berikut ini:

using System;

namespace Program
{
  public struct Tatang
  {
    public int X;
    public int Y;
  }

  public class Sutarma
  {
    public int X;
    public int Y;
  }

  class Program
  {
    static void Main(string[] args)
    {
      Tatang P1 = new Tatang();
      Tatang P2 = new Tatang();
      P1.X = 1;
      P2 = P1;
      P2.X = 2;
      P2.Y = 2;
      P1.Y = 1;

      Sutarma P3 = new Sutarma();
      Sutarma P4 = new Sutarma();
      P3.X = 3;
      P4 = P3;
      P4.X = 4;
      P4.Y = 4;
      P3.Y = 3;

      Console.WriteLine("Hasil\n============");
      Console.WriteLine("Nilai P1: {0}, {1}", P1.X, P1.Y);
      Console.WriteLine("Nilai P2: {0}, {1}", P2.X, P2.Y);
      Console.WriteLine("Nilai P3: {0}, {1}", P3.X, P3.Y);
      Console.WriteLine("Nilai P4: {0}, {1}", P4.X, P4.Y);
      Console.ReadLine();
    }
  }
}

Tebak berapa saja nilai outputnya? yap betul!

Demikianlah, jadi bisa tahu kenapa begini kenapa begitu ingin ini ingin itu banyak sekali..

Lalu bagaimana dengan tipe pointer? masih menurut buku Tatang Sutarma lagi, pointer type pada memory direpresentasikan tidak berisi nilai dari variabelnya melainkan address (alamat palsu) memory dimana isi dari variabel tersebut berada. Tipe ini hanya mungkin pada konteks blok program yang unsafe (ditandai dengan keyword “unsafe”) dikarenakan langsung mengakses memory tanpa dikelola melalui CLR.

Yah gitu deh.. teuing sih can begitu ngarti saya ge yg penting nulis dulu hehe😀 special thanks to Tatang Sutarma atas bukunya😆

Extension Method di C#


Di bahasa pemrograman C# yang konsepnya object oriented ini ada salah satu fitur unik namanya extension method, fitur ini memungkinkan kita membuat method tambahan untuk sebuah class tapi didefinisikan dari luar class tersebut. Manfaat dari fitur ini contohnya jika kita ingin menambahkan method pada sebuah class tapi tidak kita punya source class tersebut untuk direcompile. Namun seiring konsep enkapsulasi pada OOP, method yang dibuat di luar ini tidak bisa memanggil private variable atau method dari class yang diextend karena sifat fitur ini sebagai syntactic sugar sehingga walaupun di kode dipanggilnya seperti method biasa tapi sebenarnya manggil static method dari static class lain dimana ia didefinisikan.

Untuk menggunakannya, tipe class yang mendefinisikannya dan jenis methodnya harus static dengan parameter pertama diawali keyword “this” diikuti nama class yang ingin diextend. Sebagai contoh method di bawah ini saya ingin menambahkan method ToAlay() pada setiap instance dari object string.

namespace StrUtil
{
  using System;

  public static class StrUtil
  {
    public static string ToAlay(this string str)
    {
      return str.Replace("o", "0")
                .Replace("i", "1")
                .Replace("z", "2")
                .Replace("e", "3")
                .Replace("a", "4")
                .Replace("s", "5")
                .Replace("g", "6")
                .Replace("j", "7")
                .Replace("b", "8")
                .Replace("q", "9");
    }
  }
}

Di Visual Studio dengan fitur IntelliSense-nya kita bisa melihat tambahan method baru ini akan selalu muncul pada instance yg classnya diextend (di contoh ini class string).

Disini saya membuat program console yang outputnya adalah hasil string yang sudah di ToAlay()-kan

namespace Program
{
  using System;
  using StrUtil;

  class Program
  {
    static void Main(string[] args)
    {
      string s = "The quick brown fox jumps over the lazy dog";
      string a = s.ToAlay();
      Console.WriteLine(a);
      Console.ReadLine();
    }
  }
}

Apa yang akan terjadi kalau saya tekan F5? ini dia:

Cukup M3n4r1k k4n? h3h3.. yah d3m1k14nl4h m0h0n m44f k4l4u 4d4 y6 54l4h, 1n1 7u64 m451h 83l474r😛 Lanjutkan membaca “Extension Method di C#”

Shortcode untuk Menyisipkan Gist di Blog WP.com


Mungkin dikarenakan melihat saya ikutan ngevote fitur shortcode untuk gist ini di forum, para admin wordpress.com pun merasa iba dan terharu haha😆 sampai akhirnya memutuskan untuk merilis fitur tersebut sehingga sekarang kita (pengguna blog wp.com) bisa menyisipkan source code yang disimpan di layanan Gist-nya Github di postingan blog.

Menggunakan layanan gist menjadi berbeda dibandingkan menyimpan snippet di tempat lain karena teks atau source code yang disimpan tidak saja sebatas URL tapi dianggap sebagai layaknya repository git biasa, sehingga bisa dilakukan revisi, fork, dsb. Sebagai contoh, untuk URL https://gist.github.com/2652218 saya bisa menjalankan command ini

git clone git://gist.github.com/2652218.git

nge-git di Windows

Nah back to topic, dengan fitur shortcode di WordPress, menyisipkan source code yang disimpan di gist ke postingan blog menjadi sangat sederhana, yang kita perlu tahu cukup nomer gistnya saja kemudian sisipkan diantara tag shortcodenya, sebagai contoh nih dari gist saya yang di https://gist.github.com/2652218 saya bisa menuliskan:

[gist]2652218[/gist]

hasilnya di postingan blog akan tampak seperti ini:

Cukup menarik walaupun jarak antar baris sepertinya agak terlalu lebar (apa tergantung theme wp-nya ya?), mungkin untuk postingan2 selanjutnya bisa dimanfaatkan ini hehe.. Btw jika kita hanya ingin merujuk ke salah satu file saja secara spesifik kita dapat menggunakan attribute “file” yg diikuti nama filenya, sebagai contoh:


Petunjuk lebih lanjut hubungi dokter: http://en.support.wordpress.com/gist/

Bedah CSS: Tombol Barunya Gmail


Sejak Google merilis tampilan barunya pada 2011, antarmuka pengguna (user interface) dari Gmail yang termasuk salah satu layanannya pun ikut berubah dan rasanya menjadi lebih nyaman. Salah satu komponen yang saya perhatikan cukup menarik adalah tombol-tombolnya yang warnanya oren dan biru itu yang entah mengapa meski terlihat sederhana tapi tampak hidup. Apa rahasianya?

Untuk melihat CSS dari sebuah elemen kita bisa menggunakan tool WebKit Inspector yang biasanya terinstall di browser seperti Google Chrome & Safari, atau kalau menggunakan browser Mozilla Firefox bisa menginstall add-on yang namanya Firebug. Silakan pilih yang mana saja, hanya kebetulan disini saya menggunakan Google Chrome.

Oke, mari kita teliti!

Buka halaman Gmail, kemudian kita lakukan klik kanan pada tombol yang ingin dilihat sourcenya > pilih “Inspect element”

Lihat bahwa tombol tersebut sebenarnya bukan elemen <button> tapi elemen <a> yang distyle sedemikian rupa. Disini kita bisa melihat class CSSnya adalah g-button dan g-button-red, apa saja rule CSS dari kedua class tersebut bisa dilihat di kolom sebelah kanan.

Cukup menarik, Google menggunakan banyak property CSS3 seperti text-shadow yang memberikan kedalaman pada teks, text-transform yang secara otomatis mengubah case teks (disini menjadi huruf kapital), gradient yang memberikan efek gradasi warna pada tombol dengan pemilihan warna yang nilai hexanya berdekatan tampak sangat menyatu, border-radius yang memberi efek lekukan dinamis pada sudut-sudut tombol, transition yang memberikan efek animasi pada perubahan state default ke state hover, dst.

Bagaimana CSS dari tombol tersebut pada saat hover? oke kita centang :hover pada inspector untuk melihatnya

Apa yang berubah? ternyata Google hanya mengubah warna dari gradient dan menambahkan property box-shadow dengan transparansi 0,2 namun dengan adanya property transition di kedua arah perubahan dari bayangannya sangat haluus

Nah kode CSSnya sudah kita dapatkan, sekarang kita bisa buat replikanya untuk melihat demonya buat sebuah file HTML (bisa pake notepad atau text editor apapun) dengan isi sebagai berikut:

<!doctype html>
<html>
  <head>
    <style>
      html {
        font: 81.25% arial, helvetica, sans-serif;
      }
      a {
        text-decoration: none;
      }
      .tombol {
        display: inline-block;
        min-width: 46px;
        text-align: center;
        font-size: 11px;
        font-weight: bold;
        height: 27px;
        padding: 0 8px;
        line-height: 27px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        border-radius: 2px;
        -webkit-transition: all 0.218s;
        -moz-transition: all 0.218s;
        -ms-transition: all 0.218s;
        -o-transition: all 0.218s;
        transition: all 0.218s;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        cursor: default;
        border: 1px solid transparent;
        color: white;
        text-shadow: 0 1px rgba(0, 0, 0, 0.1);
        text-transform: uppercase;
        background-color: #D14836;
        background-image: -webkit-gradient(linear,left top,left bottom,from(#DD4B39),to(#D14836));
        background-image: -webkit-linear-gradient(top,#DD4B39,#D14836);
        background-image: -moz-linear-gradient(top,#DD4B39,#D14836);
        background-image: -ms-linear-gradient(top,#DD4B39,#D14836);
        background-image: -o-linear-gradient(top,#DD4B39,#D14836);
        background-image: linear-gradient(top,#DD4B39,#D14836);
      }
      .tombol:hover {
        text-decoration: none;
        -webkit-transition: all 0.0s;
        -moz-transition: all 0.0s;
        -ms-transition: all 0.0s;
        -o-transition: all 0.0s;
        transition: all 0.0s;
        border: 1px solid #B0281A;
        color: white;
        text-shadow: 0 1px rgba(0, 0, 0, 0.3);
        background-color: #C53727;
        background-image: -webkit-gradient(linear,left top,left bottom,from(#DD4B39),to(#C53727));
        background-image: -webkit-linear-gradient(top,#DD4B39,#C53727);
        background-image: -moz-linear-gradient(top,#DD4B39,#C53727);
        background-image: -ms-linear-gradient(top,#DD4B39,#C53727);
        background-image: -o-linear-gradient(top,#DD4B39,#C53727);
        background-image: linear-gradient(top,#DD4B39,#C53727);
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        -ms-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        -o-box-shadow: 0 1px 1px rgba(0,0,0,0.2);
        box-shadow: 0 1px 1px rgba(0,0,0,0.2);
      }
    </style>
  </head>
  <body>
    <a href="#" class="tombol">F4154LMAN</a>
  </body>
</html>

Coba jalankan di browser, dan…

Wow, sik asik!😉

Ganti Alamat ke Faisalman.com


Ada yang berbeda di address bar ketika mengunjungi blog ini kembali? yap, dari judul postnya aja udah ketebak haha😆 blog ini sekarang berganti alamat menjadi https://faisalman.com/ dari alamat lamanya yang ada di subdomain wp.com https://faisalman.wordpress.com/ hehehe sebenarnya sudah lama ingin punya domain sendiri cuman ragu2 dan akhirnya kesampean sekarang wkwkww, tapi tenang saudaraku.. blognya sendiri tidak pindah kemana-mana koq, hanya ganti nama domain sahaja.😀

Untuk mengalihkan alamat lama ke alamat baru (baik itu domain yang didaftarkan melalui wordpress atau lewat registrar lain), saya menggunakan fitur upgrade domain mapping yang disediakan oleh wordpress.com, kemudian setelah sekitar 1×24 jam setelah server DNS di seluruh dunia dikabar-kabari atau mungkin lebih cepat dari itu (karena kurang dari beberapa jam saja alamat ini sudah bisa saya akses), jika saudara2 sekalian mengunjungi alamat lama blog saya di https://faisalman.wordpress.com, om Matt akan dengan berbaik hati mengantarkan anda ke alamat yang baru ini dengan selamat, terima kasih Mister!

FYI, traffic blog saat ini rata2 mencapai kisaran 600~700 pengunjung per hari (padahal jarang banget apdet), kita lihat nanti seberapa besar dampak perubahan domain pada SEO blog ini di beberapa minggu ke depan ;) (ceritanya eksperimen)

Konversi Angka ke Format Rupiah di JavaScript


Dalam memprogram sebuah aplikasi seringkali ada kebutuhan untuk menampilkan sebuah nilai dengan format yang berbeda dari format aslinya yang tersimpan di database, sebagai contoh adalah menampilkan mata uang dalam bentuk rupiah dari database yang mana data aslinya disimpan dalam bentuk angka.

Jika aplikasinya berbasis web maka pertama mungkin kita dihadapkan pada pilihan: dimana sebaiknya format angka diubah ke format rupiah, apakah di sisi server (PHP/ASP/dsb) atau di sisi client (JavaScript)? Kalau melihat esensi dari penampilan format rupiah yang lebih ke arah aspek tampilan dan penuh dengan pemrosesan teks, tentunya akan lebih baik jika konversi dilakukan di sisi client, dengan skenario ini maka server hanya perlu berhubungan dengan angka, lumayan untuk mengurangi resources karena proses tambahan ini cukup dihandle di sisi client oleh browser.

Kemudian masuk ke bagaimana caranya mengubah angka ke rupiah pada JavaScript? memang tidak ada fungsi built-in yang bisa melakukan hal tersebut secara langsung, namun algoritma konversinya sederhana saja yakni:

1. Setiap 3 angka dari belakang ditambahkan “.”
2. Tambahkan “Rp.” di depan dan pada beberapa keadaan bisa juga tambahkan “,00” di belakang

Algoritma di atas agar lebih mudah diimplementasikan kita pecah-pecah ke tahapan yang lebih detail lagi:

  1. Karena sepertinya rupiah tidak memiliki nilai desimal, angka pertama-tama diubah ke bentuk integer
    var angkaInt = parseInt(angka, 10);
  2. Karena akan melakukan pemrosesan teks, maka terlebih dulu angka perlu diubah ke string
    var angkaStr = angkaInt.toString();
  3. Agar lebih mudah menghitung dari belakang, nilai string perlu dibalik, ini bisa dilakukan dengan mengubah jadi  array dan memanfaatkan fungsi reverse() array kemudian diubah lagi jadi string
    var angkaStrRev = angkaStr.split('').reverse().join('');
  4. Lakukan loop dengan tiap 3 karakter (modulo 3) kita tambahkan titik, kecuali jika karakter terakhir (karena akan berada di depan karakter pertama jika dibalik)
    var angkaStrRevTitik = '';
    for(var i = 0; i < angkaStrRev.length; i++){
        angkaStrRevTitik += angkaStrRev[i];
        if((i+1) % 3 === 0 && i !== (angkaStrRev.length-1)){
            angkaStrRevTitik += '.';
        }
    }
  5. Setelah beres kita balikkan lagi stringnya (mirip tahap 3)
    var angkaRp = angkaStrRevTitik.split('').reverse().join('');
  6. Tambahkan “Rp.” di depan, dan jika berkenan tambah “,00” di belakang
    var rp = 'Rp. ' + angkaRp + ',00';

Agar bisa digunakan ulang, kita dapat menyatukan statement-statement di atas ke dalam bentuk sebuah fungsi:

function toRp(angka){
    var rev     = parseInt(angka, 10).toString().split('').reverse().join('');
    var rev2    = '';
    for(var i = 0; i < rev.length; i++){
        rev2  += rev[i];
        if((i + 1) % 3 === 0 && i !== (rev.length - 1)){
            rev2 += '.';
        }
    }
    return 'Rp. ' + rev2.split('').reverse().join('') + ',00';
}

Atau, dengan tidak mengubah algoritma, variabel2 dan sintaksnya dapat saja kita persingkat menjadi:

function toRp(a,b,c,d,e){e=function(f){return f.split('').reverse().join('')};b=e(parseInt(a,10).toString());for(c=0,d='';c<b.length;c++){d+=b[c];if((c+1)%3===0&&c!==(b.length-1)){d+='.';}}return'Rp.\t'+e(d)+',00'}

Dengan ini maka untuk mengubah angka ke format rupiah kita tinggal memanggil fungsi toRp()😉

var angka = 12345678;
var rp = toRp(angka);

console.log("angka: " + angka); // "angka: 12345678"
console.log("rupiah: " + rp); // "rupiah: Rp. 12.345.678,00"

Setelah hal di atas terselesaikan, maka masalah yang mungkin akan muncul selanjutnya adalah ketika mengirimkan kembali nilai ke server tentu kita harus mengirimnya dalam bentuk angka kembali, untuk itu tentu perlu ada fungsi untuk membalik format rupiah ke dalam angka, yang  dalam logika sederhananya antara lain:

1. Hilangkan karakter selain angka
2. Pada beberapa keadaan karakter angka di belakang koma juga perlu dihilangkan

Algoritma pembalik ini lebih mudah diimplementasikan, karena tidak perlu membalik dan menghitung karakter, cukup menggunakan fungsi replace() dengan parameter berupa regular expression untuk menghapus karakter yang tidak diinginkan

function toAngka(rp){return parseInt(rp.replace(/,.*|\D/g,''),10)}

Sehingga dengan ini kita dapat menggunakan toAngka() untuk membalik formatnya😉

var rp = "Rp. 12.345.678,00";
var angka = toAngka(rp);

console.log("rupiah: " + rp); // "rupiah: Rp. 12.345.678,00"
console.log("angka: " + angka); // "angka: 12345678"

Demikian.

Segitu dulu untuk hari ini, kalau ada yang salah atau ada yang kurang-kurang silakan dikoreksi ;) wassalamualaikum.

==

Referensi fungsi2 JavaScript yang digunakan: parseIntsplitreversejoin, replace, Regular Expressions

CSS3 Accordion Tanpa JavaScript


Masih terkait dengan postingan CSS1K yang lalu, jika anda melihat demo CSS saya yang berjudul “1024-bytes” efek visualnya memang sangat terpengaruh dari efek accordion.

Biasanya, untuk membuat efek visual seperti accordion ini perlu digunakan JavaScript dikarenakan efek animasi yang tidak dimiliki CSS2.1, namun seiring perkembangannya khususnya dengan hadirnya fitur “transition” di CSS3 maka sebuah komponen accordion dapat dibuat murni menggunakan CSS.

Meski demikian terdapat beberapa keterbatasan daripada pembuatan accordion menggunakan CSS:

Bahwa pada dasarnya CSS tidak memiliki event listener untuk mouse click, namun bukan tidak ada cara sebenarnya, untuk menyiasati event click ini bisa digunakan trik yang memanfaatkan :target selector, hanya saja dengan syarat tiap elemen dari accordion memiliki nilai attribute href yang unik (itulah mengapa pada demo CSS saya accordionnya bereaksi pada event mouse hover saja karena markup HTML-nya sudah ditentukan dari sananya, tidak bisa diubah).

Kemudian pula, accordion yang dibuat menggunakan murni CSS ini adalah bersifat fixed (tidak fluid/responsive) dikarenakan nilai ukuran tidak dapat berdasar proporsi/perbandingan ukuran dengan elemen parentnya (yang kalau menggunakan JavaScript ini mudah saja dihitung) namun ditentukan besarnya secara fix.

Terakhir, tentu saja tidak semua browser mendukung fitur-fitur CSS terbaru ini, karena browser-browser lama belum memiliki implementasi CSS3. Berdasarkan data dari Mozilla (https://developer.mozilla.org/en/CSS), berikut daftar fitur yang didukung dan versi browsernya:

“transition / -webkit-transition / -moz-transition” property:
Chrome 1.0+, Safari 3.0+, Firefox 4.0+, Opera 10.5+, IE?

“:target” selector:
Chrome 1.0+, Safari 1.3+, Firefox 1.3+, Opera 9.5+, IE 9+