Saya yakin shorthand sudah tidak asing lagi bagi para programer, tapi yang sudah tahu biarkan saya menjelaskan apa yang di maksud dengan shorthand dan bagaimana penjelasannya. Baiklah saya tidak akan basa basi lagi silahkan simak di bawah ini.
Apa itu Shorthand ?
Sfesifikasi dalam CSS, di mana kita harus mengetikkan aturan-aturan css ke dalam style kadang membuat kita merasa jemu jika harus menuliskan seluruh aturan-aturan yang panjang tersebut untuk menyetting hanya sebuah area kecil saja dalam dokumen web yang di buat.
Namun jika anda menggunakan tekhnik shorthand css, akan memungkinkan anda untuk membuat berbagai style menggunakan sintaks yang lebih singkat yang di kenal dengan shorthand CSS atau shorthand Notation.
Shorthand CSS memungkinkan anda untuk menentukan nilai beberapa property sekaligus dengan menggunakan sebuah property tag, misalnya pada penggunaan property font yang memungkinkan anda untuk menentukan property font-style, font-variant, font weight, font-size, line-height, dan font-family dalam sebuah baris sintaks. Contoh:
- <html>
- <title>Menggunakan shorthand CSS</title>
- <head>
- <style>
- H1 {
- font-weight :bold;
- font-size:16pt;
- line-height:18pt;
- font-family: Arial;
- font-variant: normal;
- font-stretch: normal;
- font-size-adjust: none; }
- </style>
- </head>
- <body>
- <h1> Huruf ini akan tebal dengan jenis huruf arial sebesar 16 point </h1>
- </body>
- </html>
Jika di tulis dalam shorthand CSS, tag di atas akan terlihat seperti :
h1 {font:bold 16pt/18pt arial}
Sebagai perbandingan, tag H1 di bawah ini menggunakan sintaks longhand CSS.
Catatan: property font-variant, font-stretch, font-size-adjust, dam font-style telah di buat ke dalam nilai default
Tampilan script di atas jika di eksekusi maka tampilannya akan seperti di bawah ini.
Menggunakan Shorthand CSS memungkinkan anda untuk menempatkan hanya beberapa nilai saja dari property yang anda inginkan dalam sebuah style. Penempatan property dalam dokumen web di wakili oleh niali yang di pisahkan dengan spasi.
Sebagai contoh, dalam menyingkat penulisan pembuatan layout seperti margin, padding, dan border-width dengan shorthand css, anda dapat menjadikannya ke dalam margin-top-width, margin-right-width, margin-buttom-width, dan lain sebagainya dalam susunan property seperti top, right, bottom, dan left. Perhatikan contoh di bawah ini:
p {border-top-width: 1px; border-right-widht: 5px; border-bottom-width: 10px; border-left-width: 20px;}
Penulisan dapat di buat menjadi lebih singkat dengan menggunakan shorthand notation sehingga akan menjadi seperti di bawah ini:
p {border:1px red solid;}
Cara ini dapat juga di aplikasikan untuk border-top, border-right, dan sebagainya dengan hanya menetapkan dua nilai (seperti margin: 1em 10em;), di mana nilai pertama akan menjadi nilai untuk posisi atas dan posisi bawah, kemudian nilai kedua akan menjadi nilai dari posisi kiri dan kanan.
Property yang berhubungan dengan font juga dapat di jadikan satu dengan menggunakan property font seperti dalam contoh berikut, di mana nilai '/15' mengacu pada nilai untuk line height:
p {font: italic bold 1em/1.5 courier;)
Jika di terapkan dalam dokumen html maka akan menjadi seperti di contoh di bawah ini:
- <html>
- <title> Menggunakan shorthand CSS</title>
- <head>
- <style>
- body {border: 1px, red, solid;}
- p {font: italic bold 1em /1.5 courier;}
- H1 {font: bold 16pt /18pt Arial;}
- </style>
- </head>
- <body>
- <p> Huruf ini akan tebal dan miring dengan line height 1,5 </p>
- <h1> Huruf ini akan tebal dan jenis huruf arial sebsar 16 point </h1>
- </body>
- </html>
Ketika di tulis menggunakan shorthand notation, nilai lain akan di abaikan secara otomatis dan menetapkan nilai default untuk nilai yang di abaikan tersebut. Jika anda memiliki style yang di tentukan lebih dari satu lokasi, sebaiknya berhati-hati jika anda mengabaikan property tersebut karena jika terdapat aturan CSS yang berlawanan maka akan dapat mengakibatkan adanya property yang bertumbuk sehingga akan merusak tampilan yang di buat.
Sebagi contoh adalah style CSS yang akan di ikutkan dalam halaman HTML dan style yang di impor dari external style sheet menggunakan sintaks CSS shorthand dan longhand.
Jika anda menggunakan program HTML editor yang bersifat visual seperti Macromedia Dreamweaver maka style CSS yang di buat akan menggunakan longhand CSS, Longhan CSS yaitu menuliskan secara penuh atribut dan property CSS secara lengkap tanpa penyingkatan seperti pada shorthand css.
Jadi ada baiknya jika anda saat ini membuat style CSS menggunakan notepad dan nantinya akan di olah lebih lanjut menggunakan program Micromedia Dreamweaver tersebut agar membuat style CSS menggunakan longhand CSS, yaitu menuliskan aturan-aturan yang di buat dalam CSS tanpa penyingkatan.
Tampilan script di atas akan seperti ini bila di eksekusi di internet exproler, mozila fire fox maupun di browser lainnya.
Nah itulah pembahasan kali ini mengenai Shorthand dalam CSS, semoga adanya artikel ini bisa bermanfaat untuk kita semua. Salam Sukai Penulis
0 Komentar