Satu kelebihan penggunaan CSS adalah mengurangkan masa memuat turun dan pemaparan sesuatu laman web. Untuk menvariasikan sesuatu teks, anda akan mengulang elemen <font> setiap kali stail yang sama hendak digunakan. Anda juga mungkin akan memuatkan beberapa elemen lain seperti table, heading dan lain-lain. Sekarang, ke semua elemen variasi ini boleh dimuatkan ke dalam satu dokumen CSS yang mana setiap stail satu elemen hanya perlu dinyatakan sekali dan boleh digunakan berulang kali.

Tetapi jangan berhenti di situ. Penggunaan dokumen CSS yang terlalu besar juga boleh melambatkan kadar pemaparan sesuatu laman dan untuk mengatasinya, cuba gunakan "tangan pendek" atau "shorthand" dalam dokumen CSS.

Font

Gunakan:

font: 1em/1.5em bold italic "Arial";

berbanding:

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: "Arial";

Penggunaan ringkasan CSS ini hanya akan berhasil sekiranya atribut untuk font-size dan font-family dinyatakan. Ketiadaan salah satu menyebabkan stail elemen ini diabaikan. Sekiranya atribut untuk font-weight, font-style atau font-varient tidak dinyatakan, maka nilai asal atau default akan digunakan.

Background

Gunakan:

background: #fff url(images.gif) no-repeat left top;

berbanding:

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

Jika tidak ditetapkan salah satu atribut pada elemen ringkas CSS, maka nilai asal akan digunakan. Manakala untuk background-position, sekiranya tidak dinyatakan, maka kedudukan nilai asal iaitu top left akan digunakan.

Lists

Gunakan:

list-style: disc outside url(image.gif);

berbanding:

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

Seperti biasa, jika tidak dinyatakan elemen-elemen setiap satu pada ringkasan CSS, nilai asal akan digunakan.

Margin & padding

Terdapat beberapa ringkasan CSS yang boleh digunakan dalam arahan CSS untuk padding dan margin bergantung kepada bahagian yang hendak diaplikasikan atribut tersebut dan nilai tetapan yang sama.

Empat nilai atribut berlainan

Gunakan:

margin: 2px 1px 3px 4px (top, right, bottom, left)

berbanding:

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px;

Tiga nilai atribut berlainan

Gunakan:

margin: 5em 1em 3em (top, right dan left, bottom)

berbanding:

margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em;

Dua nilai atribut berlainan

Gunakan:

margin: 5% 1% (top dan bottom, right dan left)

berbanding:

margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%

Satu nilai atribut

Gunakan:

margin: 0 (top, bottom, right dan left)

berbanding:

margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;

Ringkasan di atas boleh diaplikasikan sama ada untuk atribut margin atau padding.

Border

Gunakan:

border: 1px black solid;

berbanding:

border-width: 1px;
border-color: black;
border-style: solid;

dan, gunakan:

border-right: 1px black solid

berbanding:

border-right-width: 1px;
border-right-color: black;
border-right-style: solid;

Anda boleh tukarkan right dengan top, bottom dan left.

Sesungguhnya, ringkasan dalam penggunaan elemen, atribut dan nilai tetapan dalam dokumen CSS membolehkan dokumen tersebut lebih cepat untuk dimuat turun dan kadar paparan laman web juga lebih pantas.

Penilaian: 
Average: 5 (1 vote)

Komen

wizan's picture

Bang translate direct tu.. "Tangan Pendek" - atau boleh guna "CSS Ringkas". Shorthand atau pun Trengkas (tringkas?) biasa dengar tak? Apa apa lah.. jangan PANJANG TANGAN sudah.

parasolx's picture
Admin

hehehe.. saya sengaja menggunakan istilah translasi terus bagi menjadikan tajuk artikel ni nampak catchy sket...

------

Hadafi Solution & Resources: http://parasolx.net
Professional in Drupal web development, theme designing, consultation and training