Cascading Style Sheets (CSS) adalah
bahasa style sheet yang digunakan untuk menggambarkan
semantik presentasi (tampilan dan format) dari dokumen yang ditulis dalam
bahasa markup . Penerapannya paling umum adalah dengan gaya
halaman web yang ditulis dalam
HTML dan
XHTML , tetapi bahasa juga dapat diterapkan untuk setiap jenis
XML dokumen, termasuk
polos XML ,
SVG dan
XUL .
CSS dirancang terutama untuk memungkinkan pemisahan konten dokumen
(yang ditulis dalam HTML atau bahasa markup yang mirip) dari penampilan
dokumen, termasuk unsur-unsur seperti
tata letak ,
warna , dan
font .
[1] Pemisahan ini dapat meningkatkan konten
aksesibilitas
, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi
karakteristik presentasi, memungkinkan beberapa halaman untuk berbagi
format, dan mengurangi kompleksitas dan pengulangan dalam konten
struktural (seperti dengan memungkinkan untuk
desain web Tableless ).
CSS juga dapat memungkinkan halaman markup yang sama yang akan
disajikan dalam gaya yang berbeda untuk metode rendering yang berbeda,
seperti di layar, di cetak, dengan suara (ketika dibacakan oleh browser
pidato-based atau
pembaca layar ) dan
Braille berbasis,
taktil perangkat.
Hal ini juga dapat digunakan untuk memungkinkan halaman web untuk
menampilkan secara berbeda tergantung pada ukuran layar atau perangkat
yang sedang dilihat.
Sementara penulis dokumen biasanya menghubungkan bahwa dokumen ke style
sheet CSS, pembaca dapat menggunakan style sheet yang berbeda, mungkin
satu di komputer mereka sendiri, untuk menimpa salah satu penulis telah
ditentukan.
CSS menetapkan skema prioritas untuk menentukan aturan gaya berlaku jika sesuai aturan lebih dari satu melawan elemen tertentu. Dalam apa yang disebut
kaskade, prioritas atau
bobot dihitung dan ditugaskan untuk peraturan, sehingga hasilnya dapat diprediksi.
Spesifikasi CSS diselenggarakan oleh
World Wide Web Consortium (W3C). Jenis media internet (
tipe MIME )
text/css terdaftar untuk digunakan dengan CSS oleh
RFC 2318 (Maret 1998).
CSS memiliki sederhana
sintaks dan menggunakan sejumlah kata kunci Inggris untuk menentukan nama-nama berbagai gaya properti.
Sebuah style sheet terdiri dari daftar
aturan. Setiap aturan atau aturan-set terdiri dari satu atau lebih
penyeleksi dan satu
blok deklarasi. Sebuah deklarasi-blok terdiri dari daftar
deklarasi di kawat gigi. Setiap deklarasi itu sendiri terdiri dari
properti, tanda titik dua (
: ), dan
nilai. Jika ada multiple deklarasi di blok, sebuah semi-colon (
; ) harus dimasukkan untuk memisahkan deklarasi masing-masing.
[2]
Dalam CSS,
penyeleksi digunakan untuk menyatakan mana dari elemen markup gaya diterapkan, semacam ekspresi pertandingan.
Selectors mungkin berlaku untuk semua elemen dari tipe tertentu, atau
hanya elemen yang cocok dengan atribut tertentu; elemen dapat
disesuaikan tergantung pada bagaimana mereka ditempatkan relatif
terhadap satu sama lain dalam kode markup, atau pada bagaimana mereka
bersarang di dalam
Document Object Model .
Pseudo-class
adalah bentuk lain dari spesifikasi yang digunakan dalam CSS untuk
mengidentifikasi unsur-unsur markup, dan dalam beberapa kasus, tindakan
pengguna tertentu yang mana blok deklarasi tertentu berlaku. Contoh yang sering digunakan adalah
:hover
pseudo-class yang menerapkan gaya hanya bila 'poin untuk' pengguna
elemen terlihat, biasanya dengan menekan kursor mouse di atasnya. Hal ini ditambahkan ke pemilih seperti pada
a:hover atau
#elementid:hover . Lain pseudo-kelas dan
pseudo-elemen, misalnya,
:first-line ,
:visited atau
:before . Sebuah khusus pseudo-class adalah
:lang(c) ., "c"
[ klarifikasi diperlukan ]
Sebuah
kelas pseudo-elemen seluruh memilih, seperti
:link atau
:visited , sedangkan
elemen pseudo-membuat pilihan yang mungkin terdiri dari unsur parsial, seperti
:first-line atau
:first-letter .
Selectors dapat dikombinasikan dengan cara lain juga, terutama dalam
CSS 2.1, untuk mencapai spesifisitas yang lebih besar dan fleksibilitas.
[3]
Berikut adalah contoh menyimpulkan aturan di atas:
pemilih [, selector2, ...] [: pseudo-class] {
properti: nilai;
[Property2: nilai2;
...]
}
/ * Komentar * /
[ edit ] Penggunaan
Sebelum CSS, hampir semua atribut presentasional dokumen HTML yang
terkandung dalam HTML markup; semua warna font, background, keberpihakan
elemen, perbatasan dan ukuran harus secara eksplisit dijelaskan, sering
berulang kali, dalam HTML.
CSS memungkinkan penulis untuk bergerak jauh dari informasi tersebut
untuk sebuah style sheet terpisah sehingga markup HTML cukup sederhana.
Judul (
h1 unsur), sub-judul (
h2 ), sub-sub-judul (
h3 ), dll, didefinisikan secara struktural menggunakan HTML. Di cetak dan di layar, pilihan
huruf ,
ukuran ,
warna dan
penekanan untuk elemen ini
penyajian.
Sebelum CSS, dokumen penulis yang ingin menugaskan seperti
tipografi karakteristik, katakanlah, semua
h2 judul harus menggunakan HTML
font dan elemen presentasi lain untuk setiap terjadinya jenis pos. Markup presentational tambahan dalam HTML dokumen dibuat lebih kompleks, dan umumnya lebih sulit untuk mempertahankan. Dalam CSS, presentasi dipisahkan dari struktur.
Dalam cetak, CSS dapat menentukan warna, font, teks alignment, ukuran,
batas, jarak, tata letak dan tipografi banyak karakteristik lainnya. Hal ini dapat melakukannya secara independen untuk di layar dan tampilan cetak. CSS juga mendefinisikan non-visual gaya seperti kecepatan dan penekanan dengan teks yang dibacakan oleh pembaca teks aural. The
W3C
sekarang menganggap keuntungan dari CSS untuk mendefinisikan semua
aspek penyajian halaman HTML menjadi lebih unggul dari metode lain. Oleh karena itu telah
usang penggunaan semua markup HTML asli penyajian.
File CSS dimasukkan ke dalam dokumen HTML menggunakan sintaks berikut:
<Tautan rel = "stylesheet" href = "http://example.com/css/style.css" type = "text / css" />
CSS informasi dapat diberikan oleh berbagai sumber. CSS informasi gaya dapat berupa dilampirkan sebagai dokumen terpisah atau tertanam dalam dokumen HTML. Beberapa style sheet dapat diimpor.
Gaya yang berbeda dapat diterapkan tergantung pada perangkat output
yang digunakan, misalnya, versi layar bisa sangat berbeda dari versi
cetak, sehingga penulis dapat menyesuaikan presentasi tepat untuk setiap
media.
Prioritas skema untuk sumber CSS (dari tertinggi ke prioritas terendah):
- Penulis gaya (disediakan oleh penyusun halaman web), dalam bentuk:
- Inline style, di dalam dokumen HTML, informasi gaya pada satu elemen, ditentukan dengan menggunakan "gaya" atribut
- Embedded gaya, blok informasi CSS dalam HTML itu sendiri
- Style sheet eksternal, yaitu, file CSS terpisah dirujuk dari dokumen
- Pengguna style:
- Sebuah file CSS lokal pengguna menentukan dengan opsi browser, yang bertindak sebagai menimpa diterapkan untuk semua dokumen
- Pengguna agen gaya
- Standar gaya yang diterapkan oleh agen pengguna, yaitu, pengaturan default browser untuk presentasi elemen
Style sheet dengan prioritas tertinggi mengontrol tampilan konten. Deklarasi tidak diatur dalam sumber prioritas tertinggi diteruskan ke sumber prioritas rendah seperti gaya agen pengguna. Proses ini disebut
cascading.
Salah satu tujuan dari CSS adalah juga untuk memungkinkan
pengguna kontrol yang lebih besar atas presentasi. Seseorang yang menemukan judul miring merah sulit dibaca mungkin menerapkan style sheet yang berbeda.
Tergantung pada browser mereka dan situs web, pengguna dapat memilih
dari style sheet yang disediakan oleh para desainer, mungkin menghapus
semua gaya tambah dan melihat situs menggunakan styling default browser,
atau dapat mengganti hanya gaya tajuk merah miring tanpa mengubah
atribut lainnya .
Berkas
highlightheaders.css berisi:
h1 {color: white; background-color: orange penting;!}
h2 {color: white; background-color: green penting;!}
Style sheet sudah ada dalam satu bentuk sejak awal dari
SGML pada 1980-an.
Cascading Style Sheets dikembangkan sebagai alat untuk menciptakan
pendekatan yang konsisten untuk memberikan informasi gaya untuk dokumen
web.
Sebagai
HTML tumbuh, itu datang untuk mencakup lebih banyak jenis gaya kemampuan untuk memenuhi tuntutan
pengembang web .
Evolusi ini memberikan desainer lebih mengontrol tampilan situs tapi
pada biaya dari HTML menjadi lebih kompleks untuk menulis dan
memelihara. Variasi dalam
browser web implementasi, seperti
ViolaWWW dan
WorldWideWeb ,
[4] membuat penampilan situs konsisten sulit, dan pengguna memiliki kontrol yang kurang atas bagaimana konten web itu ditampilkan.
Robert Cailliau ingin memisahkan struktur dari presentasi.
[4]
Cara ideal akan memberikan pengguna pilihan yang berbeda dan
mentransfer tiga macam style sheet:. satu untuk pencetakan, satu untuk
presentasi di layar dan satu untuk fitur editor
[4]
Untuk meningkatkan kemampuan presentasi web, sembilan bahasa style sheet yang berbeda diusulkan ke
World Wide Web Consortium daftar 's (W3C) www-gaya list.
Dari sembilan proposal, dua dipilih sebagai dasar untuk apa yang
menjadi CSS: Cascading Style Sheets HTML (CHSS) dan Stream berbasis Gaya
Lembar Proposal (SSP). CHSS, sebuah bahasa yang memiliki beberapa kemiripan dengan hari ini CSS, diusulkan oleh
Wium Lie HÃ¥kon pada Oktober 1994.
Bert Bos sedang bekerja pada browser yang disebut
Argo , yang menggunakan gaya sendiri bahasa lembar disebut SSP.
[5] Lie dan Yves Lafon bergabung
Dave Raggett untuk memperluas
Arena browser untuk mendukung CSS sebagai
testbed aplikasi untuk W3C.
[6] [7] [8]
Bos Lie dan bekerja sama untuk mengembangkan standar CSS (yang 'H'
telah dihapus dari nama itu karena gaya ini lembaran juga dapat
diterapkan pada bahasa markup lain selain HTML).
[9]
Tidak seperti bahasa style yang ada seperti
DSSSL dan
TTS , CSS memungkinkan gaya dokumen akan dipengaruhi oleh beberapa style sheet. Satu style sheet dapat
mewarisi atau "cascade" dari yang lain, memungkinkan campuran gaya preferensi dikendalikan sama oleh perancang situs dan user.
Usulan Lie dipresentasikan pada "
Mosaic dan Web "konferensi (kemudian disebut www2) di
Chicago, Illinois pada tahun 1994, dan lagi dengan Bert Bos pada tahun 1995.
[9] Sekitar waktu ini W3C sudah sedang didirikan, dan mengambil minat dalam pengembangan CSS. Ini diselenggarakan lokakarya menuju akhir yang dipimpin oleh
Steven Pemberton . Hal ini mengakibatkan W3C menambahkan bekerja pada CSS untuk kiriman dari redaksi Tinjauan HTML papan (ERB). Berbohong dan Bos adalah staf teknis utama pada aspek ini proyek, dengan anggota tambahan, termasuk Thomas Reardon dari
Microsoft , berpartisipasi juga. Pada bulan Agustus 1996
Netscape Komunikasi Perusahaan disajikan lembar gaya bahasa alternatif yang disebut
Style Sheets JavaScript (JSSS).
[9] spec tidak pernah selesai dan sudah ditinggalkan.
[10] Pada akhir 1996, CSS sudah siap untuk menjadi resmi, dan CSS tingkat 1 Rekomendasi diterbitkan pada bulan Desember.
Pengembangan dari HTML, CSS, dan
DOM semua telah terjadi dalam satu kelompok, HTML Editorial Review Board (ERB). Pada awal 1997, Erb terpecah menjadi tiga
kelompok kerja : Bekerja HTML kelompok, dipimpin oleh
Dan Connolly dari W3C; DOM kelompok Kerja, dipimpin oleh Lauren Wood dari
SoftQuad ; dan CSS kelompok Kerja, dipimpin oleh
Chris Lilley dari W3C.
Kelompok Kerja CSS mulai menangani masalah yang belum ditangani dengan
tingkat, CSS 1 sehingga penciptaan CSS tingkat 2 pada 4 November 1997. Buku ini diterbitkan sebagai Rekomendasi W3C pada tanggal 12 Mei 1998. CSS level 3, yang dimulai pada tahun 1998, masih dalam pengembangan sejak 2009.
Pada tahun 2005 Kerja CSS Grup memutuskan untuk menegakkan standar persyaratan lebih ketat.
Ini berarti bahwa sudah diterbitkan standar seperti CSS 2.1, CSS 3
Selectors dan CSS 3 Teks ditarik kembali dari Calon Rekomendasi untuk
tingkat Draft Bekerja.
[ sunting ] Kesulitan dengan adopsi
Meskipun CSS 1 spesifikasi selesai pada tahun 1996 dan Microsoft
Internet Explorer 3 [9]
dirilis pada tahun itu menampilkan beberapa dukungan terbatas untuk
CSS, itu lebih dari tiga tahun sebelum web browser mencapai hampir penuh
pelaksanaan spesifikasi.
Internet Explorer 5.0 untuk
Macintosh , dikirim pada Maret 2000, adalah browser pertama yang memiliki penuh (lebih baik dari 99 persen) CSS 1 dukungan,
[11] melebihi
Opera , yang telah pemimpin sejak diperkenalkan dukungan CSS 15 bulan sebelumnya. Browser lain diikuti segera setelah itu, dan bagian tambahan diimplementasikan banyak dari mereka dari CSS 2. Pada Agustus 2010 , tidak ada browser (jadi) telah sepenuhnya menerapkan CSS 2, dengan tingkat penerapan yang bervariasi (lihat
Perbandingan mesin layout (CSS) ).
Meskipun browser awal seperti
Internet Explorer 3 [9] dan
4 , dan
Netscape 4.x memiliki dukungan untuk CSS, itu biasanya tidak lengkap dan menderita serius
bug . Ini merupakan hambatan serius bagi penerapan CSS.
Ketika 'versi 5' kemudian browser mulai menawarkan implementasi yang
cukup penuh CSS, mereka masih salah di daerah tertentu dan yang penuh
dengan inkonsistensi, bug dan
kebiasaan .
Perkembangan seperti CSS terkait inkonsistensi dan bahkan variasi yang
mendukung fitur telah membuatnya menjadi sulit bagi desainer untuk
mencapai penampilan yang konsisten di seluruh platform. Beberapa penulis terpaksa
workarounds seperti
CSS hacks dan
filter CSS untuk memperoleh hasil yang konsisten di web browser dan
platform .
Masalah dengan adopsi merata browser 'CSS bersama dengan errata dalam
spesifikasi asli dipimpin W3C untuk merevisi CSS 2 standar ke dalam CSS
2.1, yang mendekat ke snapshot kerja dukungan CSS saat ini di browser
HTML.
Beberapa CSS 2 sifat yang tidak ada browser berhasil menerapkan
dijatuhkan, dan dalam beberapa kasus, perilaku didefinisikan diubah
untuk membawa standar sejalan dengan implementasi yang ada dominan.
CSS 2.1 menjadi Rekomendasi Calon pada tanggal 25 Februari 2004, tetapi
CSS 2.1 ditarik kembali ke Working Draft Status pada tanggal 13 Juni
2005,
[12] dan hanya kembali ke status Rekomendasi Calon pada tanggal 19 Juli 2007.
[13]
Di masa lalu, beberapa web server dikonfigurasi untuk melayani semua dokumen dengan ekstensi nama file
.css [14] sebagai
mime type application/x-pointplus [15] daripada
text/css . Pada saat itu, perusahaan Bersih-Scene menjual Maker PointPlus untuk mengkonversi
PowerPoint file ke dalam file Slide Show Compact (menggunakan
.css ekstensi).
[16]
CSS memiliki berbagai tingkat dan profil.
Setiap tingkat dibangun berdasarkan CSS, fitur terakhir baru biasanya
menambahkan dan biasanya dinotasikan sebagai CSS1, CSS2 CSS3, dan CSS4. Profil biasanya subset dari satu atau lebih tingkat dari CSS dibangun untuk perangkat tertentu atau user interface. Saat ini ada profil untuk perangkat mobile, printer, dan televisi. Profil tidak boleh berbeda dengan berbagai jenis media, yang ditambahkan dalam CSS2.
Spesifikasi CSS pertama yang menjadi rekomendasi W3C resmi CSS tingkat 1, diterbitkan pada bulan Desember 1996.
[17] Di antara kemampuan adalah dukungan untuk
- Font properti seperti jenis huruf dan penekanan
- Warna teks, latar belakang, dan elemen lainnya
- Teks atribut seperti spasi antara kata, huruf, dan baris teks
- Alignment teks, gambar, tabel dan elemen lainnya
- Margin, border, padding, dan positioning untuk elemen yang paling
- Unik identifikasi dan klasifikasi generik kelompok atribut
W3C tidak lagi mempertahankan Rekomendasi CSS1.
[18]
CSS level 2 spesifikasi dikembangkan oleh W3C dan diterbitkan sebagai Rekomendasi pada Mei 1998. Sebuah superset dari CSS1, CSS2 mencakup sejumlah kemampuan baru seperti posisi absolut, relatif, dan tetap elemen dan
z-index , konsep jenis media, dukungan untuk style sheet aural dan teks dua arah, dan properti font baru seperti bayangan.
W3C tidak lagi mempertahankan rekomendasi CSS2.
[19]
CSS level 2 revisi 1, sering disebut sebagai "CSS 2.1", perbaikan
kesalahan dalam CSS2, menghilangkan fitur-kurang didukung atau tidak
sepenuhnya interoperable dan menambahkan ekstensi browser yang sudah
dilaksanakan untuk spesifikasi.
Dalam rangka memenuhi Proses W3C untuk standarisasi spesifikasi teknis,
CSS 2.1 bolak-balik antara status Draft Bekerja dan status Calon
Rekomendasi untuk bertahun-tahun. CSS 2.1 pertama kali menjadi
Rekomendasi Calon pada tanggal 25 Februari 2004, tapi itu kembali ke Draft Bekerja pada tanggal 13 Juni 2005 untuk diperiksa lebih lanjut. Ini kembali ke Rekomendasi Calon pada tanggal 19 Juli 2007 dan kemudian diperbarui dua kali pada tahun 2009. Namun, karena perubahan dan klarifikasi dibuat, lagi kembali ke Panggilan Terakhir Bekerja Draft pada tanggal 7 Desember 2010.
CSS 2.1 pergi ke Rekomendasi Diusulkan pada tanggal 12 April 2011.
[20] Setelah dikaji oleh Komite Penasehat W3C, akhirnya diterbitkan sebagai Rekomendasi W3C pada tanggal 7 Juni 2011.
[21]
Tidak seperti CSS2, spesifikasi tunggal besar mendefinisikan berbagai
fitur, CSS3 dibagi menjadi beberapa dokumen terpisah yang disebut
"modul".
Setiap modul menambahkan kemampuan baru atau memperluas fitur
didefinisikan dalam CSS2, lebih menjaga kompatibilitas ke belakang. Bekerja pada CSS tingkat 3 mulai sekitar waktu penerbitan rekomendasi CSS2 asli. Para CSS3 awal draft diterbitkan pada bulan Juni 1999.
[22]
Karena modularisasi, modul yang berbeda memiliki stabilitas yang berbeda dan berada dalam status yang berbeda.
[23] Pada November 2011, ada lebih dari lima puluh CSS modul diterbitkan dari Kelompok Kerja CSS.
[22] Tiga dari mereka-Selectors, Ruang nama dan Warna- menjadi rekomendasi W3C pada tahun 2011.
Beberapa modul seperti Backgrounds dan Warna, Media Query, Multi-kolom
layout berada dalam status Rekomendasi Calon dan dianggap cukup stabil. Pada tahap ini, implementasi disarankan untuk menjatuhkan awalan vendor.
[24]
W3C telah mulai menyusun CSS4 di
29 September ,
2009 .
[25] [26] Namun, saat ini tidak didukung oleh salah satu
web browser .
Salah satu hal yang baru adalah
:matches() . Untuk yang
: Pertandingan (div, p, nav) rentang {
font-size: 18px;
}
adalah sama dengan:
div span, p rentang, rentang nav {
font-size: 18px;
}
Meskipun dalam
Firefox dan
WebKit sudah memiliki fungsi yang sama:
[27]
/ * Firefox * /
-Moz-apapun (div, p, nav) rentang {
font-size: 18px;
}
/ * WebKit * /
-WebKit-apapun (div, p, nav) rentang {
font-size: 18px;
}
[ sunting ] Dukungan Browser
Karena tidak semua browser benar
mengurai
kode CSS, dikembangkan teknik pengkodean dikenal sebagai CSS hacks
dapat menyaring browser tertentu atau menargetkan browser tertentu
(umumnya keduanya dikenal sebagai
filter CSS ).
Yang pertama dapat didefinisikan sebagai CSS hacks penyaringan dan yang
terakhir dapat didefinisikan sebagai CSS menargetkan hacks dan keduanya
dapat digunakan untuk menyembunyikan atau menampilkan bagian CSS untuk
browser yang berbeda. Hal ini dicapai baik dengan memanfaatkan CSS-
penanganan kebiasaan atau bug di browser, atau dengan mengambil keuntungan dari kurangnya dukungan untuk bagian dari spesifikasi CSS.
[28]
Menggunakan filter CSS, beberapa desainer telah pergi sejauh memberikan
CSS yang berbeda untuk tertentu browser untuk memastikan desain render
seperti yang diharapkan.
Karena browser web yang sangat awal adalah baik benar-benar tidak mampu
menangani CSS, atau membuat CSS sangat buruk, desainer hari ini sering
secara rutin menggunakan filter CSS yang benar-benar mencegah browser
ini dari mengakses salah satu CSS.
Internet Explorer dukungan untuk CSS dimulai dengan
IE 3.0 dan meningkat secara progresif dengan setiap versi. Pada tahun 2008, Beta pertama dari
Internet Explorer 8 menawarkan dukungan untuk CSS 2.1 dalam modus terbaik web standar.
Contoh bug browser terkenal CSS adalah
Internet Explorer model kotak bug
, di mana lebar kotak diinterpretasikan secara tidak benar dalam
beberapa versi browser, sehingga blok yang terlalu sempit bila dilihat
di Internet Explorer, tetapi benar dalam standar-compliant browser. Bug dapat dihindari di
Internet Explorer 6 dengan menggunakan benar
DOCTYPE dalam (X) dokumen HTML. CSS hacks dan
filter CSS
digunakan untuk mengkompensasi bug seperti ini, hanya satu dari ratusan
bug CSS yang telah didokumentasikan dalam berbagai versi
Netscape ,
Mozilla Firefox ,
Opera , dan Internet Explorer (termasuk
Internet Explorer 7 ).
[29] [30]
Bahkan ketika ketersediaan CSS-mampu membuat browser CSS giat
teknologi, penerapan CSS masih ditahan oleh 'perjuangan dengan browser'
desainer pelaksanaan salah CSS dan merata dukungan CSS.
Bahkan saat ini, masalah ini terus membuat bisnis desain CSS lebih
kompleks dan mahal daripada ini dimaksudkan untuk menjadi, dan
lintas-browser pengujian tetap suatu keharusan.
Alasan lain untuk adopsi tidak melanjutkan dari CSS adalah:
kompleksitas yang dirasakan, kurangnya penulis keakraban dengan sintaks
CSS dan teknik yang diperlukan, dukungan miskin dari authoring tools,
risiko yang ditimbulkan oleh inkonsistensi antara browser dan kenaikan
biaya pengujian.
Saat ini ada persaingan kuat antara
Mozilla 's
Gecko layout engine yang digunakan dalam
Firefox , yang
WebKit tata letak mesin yang digunakan di
Apple Safari dan
Google Chrome , yang mirip
KHTML mesin yang digunakan di
KDE itu
Konqueror browser, dan Opera
Presto tata letak mesin -masing-masing adalah terkemuka di berbagai aspek CSS. Pada Agustus 2009, Internet Explorer 8, Firefox 2 dan 3 telah cukup menyelesaikan tingkat pelaksanaan CSS 2.1.
[31]
[ sunting ] Keterbatasan
Beberapa keterbatasan dicatat dari kemampuan saat CSS meliputi:
- Miskin kontrol untuk layout yang fleksibel
-
Sedangkan tambahan baru untuk CSS 3 memberikan lebih kuat, lebih kuat
fitur-set untuk layout, CSS masih di hati bahasa styling (untuk font,
warna, perbatasan dan dekorasi lainnya), bukan bahasa tata letak (untuk
blok dengan posisi, ukuran, margin, dan sebagainya).
Keterbatasan ini berarti bahwa menciptakan layout cairan umumnya
membutuhkan tangan-coding CSS, dan telah menahan pengembangan berbasis
standar WYSIWYG editor. [ rujukan? ].
- Selectors tidak dapat naik
- CSS tidak menawarkan cara untuk memilih orang tua atau nenek moyang unsur yang memenuhi kriteria tertentu. [32] Sebuah skema pemilih lebih maju (seperti XPath ) akan memungkinkan style sheet yang lebih canggih.
Namun, alasan utama Kelompok Kerja CSS menolak proposal untuk
penyeleksi orang tua terkait dengan kinerja browser dan masalah render
tambahan. [33]
- Vertikal kontrol keterbatasan
-
Sementara penempatan horisontal unsur umumnya mudah untuk mengontrol,
penempatan vertikal sering unintuitive, berbelit-belit, atau tidak
mungkin.
Kegiatan ringan seperti berpusat elemen vertikal atau mendapatkan
footer yang akan ditempatkan tidak lebih tinggi dari bawah viewport,
baik memerlukan aturan style rumit dan unintuitive, atau aturan
sederhana namun banyak yang tidak didukung. [32]
- Tidak adanya ekspresi
- Saat ini tidak ada kemampuan untuk menentukan nilai properti sebagai ekspresi sederhana (seperti
margin-left: 10% – 3em + 4px; ). Ini akan berguna dalam berbagai kasus, seperti menghitung ukuran kolom dikenakan kendala pada jumlah semua kolom. Namun, draft kerja dengan calc () nilai untuk mengatasi keterbatasan ini telah dipublikasikan oleh WG CSS. [34] Internet Explorer versi 5 sampai 7 dukungan ekspresi berpemilik () pernyataan, [35] dengan fungsi serupa. Pernyataan ekspresi () milik tidak lagi didukung dari Internet Explorer 8 dan seterusnya, kecuali dalam mode kompatibilitas. Keputusan ini diambil untuk "standar kepatuhan, kinerja browser, dan alasan keamanan". [35]
- Kurangnya deklarasi kolom
- Sementara saat ini mungkin dalam CSS 3 (menggunakan
column-count modul), [36] layout dengan beberapa kolom dapat kompleks untuk melaksanakan dalam CSS 2.1.
Dengan CSS 2.1, proses ini sering dilakukan dengan menggunakan elemen
mengambang, yang sering diberikan berbeda oleh browser yang berbeda,
bentuk layar komputer yang berbeda, dan rasio layar yang berbeda set
pada monitor standar.
- Tidak dapat secara eksplisit menyatakan lingkup baru secara independen dari posisi
-
Peraturan Penjajakan untuk properti seperti z-index mencari elemen
induk terdekat dengan posisi: absolut atau posisi: atribut relatif.
Ini kopling aneh memiliki efek yang tidak diinginkan seperti tidak
mungkin untuk menghindari mendeklarasikan lingkup baru ketika seseorang
dipaksa untuk menyesuaikan posisi suatu elemen, mencegah satu dari
menggunakan ruang lingkup yang diinginkan dari elemen induk.
- Pseudo-class perilaku dinamis tidak dapat dikontrol
- CSS menerapkan pseudo-kelas yang memungkinkan tingkat umpan balik pengguna dengan aplikasi bersyarat gaya alternatif.
Satu CSS pseudo-kelas, ": hover", adalah dinamis (setara dengan
javascript "onmouseover") dan memiliki potensi untuk penyalahgunaan
(misalnya, menerapkan kursor-kedekatan popup), [37]
tetapi CSS tidak memiliki kemampuan untuk klien untuk menonaktifkannya
(tidak ada "menonaktifkan"-seperti properti) atau membatasi dampaknya
(tidak ada "nochange"-seperti nilai untuk masing-masing properti).
[ sunting ] Keuntungan
- Pemisahan konten dari presentasi
- CSS memfasilitasi penerbitan konten dalam format presentasi beberapa berdasarkan parameter nominal.
Nominal parameter termasuk preferensi pengguna eksplisit, web browser
yang berbeda, jenis perangkat yang digunakan untuk melihat isi (komputer
desktop atau perangkat mobile Internet), lokasi geografis dari pengguna
dan variabel lainnya.
- Situs-lebar konsistensi
-
Bila CSS digunakan secara efektif, dalam hal warisan dan "Cascading,"
sebuah style sheet global dapat digunakan untuk mempengaruhi dan elemen
gaya situs-lebar.
Jika situasi muncul bahwa gaya dari elemen harus perlu diubah atau
disesuaikan, perubahan ini dapat dibuat dengan mengedit aturan pada
style sheet global. Sebelum CSS, semacam ini pemeliharaan lebih sulit, mahal dan memakan waktu.
- Bandwidth
-
Stylesheet, baik internal ke dokumen sumber atau terpisah, akan
menentukan gaya sekali untuk berbagai elemen HTML yang dipilih oleh
class , ketik atau hubungan dengan orang lain. Ini jauh lebih efisien daripada mengulangi informasi gaya inline untuk setiap kemunculan elemen. Sebuah stylesheet eksternal biasanya disimpan dalam cache browser , dan karena itu dapat digunakan pada beberapa halaman tanpa mengisi, lebih lanjut mengurangi transfer data melalui jaringan.
- Halaman reformatting
-
Dengan perubahan sederhana dari satu baris, sebuah style sheet yang berbeda dapat digunakan untuk halaman yang sama.
Ini memiliki kelebihan untuk aksesibilitas, serta menyediakan kemampuan
untuk menyesuaikan halaman atau situs untuk perangkat target yang
berbeda. Selain itu, perangkat tidak dapat memahami styling masih menampilkan konten.
- Aksesibilitas
-
Tanpa CSS, web designer biasanya harus lay out halaman mereka dengan
teknik yang menghambat aksesibilitas bagi pengguna visi-gangguan,
seperti tabel HTML (lihat desain web Tableless # Aksesibilitas ).
[ sunting ] CSS kerangka
Kerangka CSS yang telah disiapkan
perpustakaan yang dimaksudkan untuk memungkinkan lebih mudah, lebih
sesuai standar styling dari
halaman web menggunakan Cascading Style Sheets bahasa. Tata Letak-grid terkait CSS kerangka termasuk
Blueprint ,
960 kotak , dan
CSS YUI grid .
Seperti pemrograman dan scripting bahasa perpustakaan, kerangka CSS
biasanya dimasukkan sebagai eksternal. Css lembar direferensikan dalam
HTML
<head> . Mereka memberikan sejumlah yang sudah jadi pilihan untuk merancang dan meletakkan halaman web.
Sementara banyak dari kerangka kerja ini telah dipublikasikan, beberapa
penulis menggunakannya sebagian besar untuk prototyping cepat, atau
untuk belajar dari, dan lebih memilih untuk 'kerajinan' CSS yang tepat
untuk setiap situs diterbitkan tanpa pemeliharaan, desain dan download
overhead memiliki fitur yang tidak digunakan styling di situs.
[38]
CSS 2.1 mendefinisikan tiga skema posisi:
- Normal aliran
- Inline
item yang tercantum dalam cara yang sama seperti huruf dalam kata-kata
dalam teks, satu demi satu di ruang yang tersedia sampai tidak ada lebih
banyak ruang, maka memulai baris baru di bawah item Blok stack secara vertikal,. Seperti paragraf dan seperti item dalam daftar bullet. Aliran normal juga mencakup posisi relatif item blok atau inline, dan run-dalam kotak.
- Mengapung
- Item melayang diambil dari aliran normal dan bergeser ke kiri atau kanan sebagai sejauh mungkin di ruang yang tersedia. Konten lain kemudian mengalir bersama item melayang.
- Absolute positioning
- Item benar-benar diposisikan tidak memiliki tempat dalam, dan tidak berpengaruh pada, aliran normal item lainnya. Ini menempati posisinya ditugaskan di wadah terpisah dari item lainnya. [39]
[ sunting ] Posisi: atas, bawah, kiri, dan kanan
Ada empat nilai yang mungkin dari
position properti. Jika item diposisikan dalam cara apapun selain
static , maka sifat lebih lanjut
top ,
bottom ,
left , dan
right digunakan untuk menentukan offset dan posisi.
- Statis
- Nilai default menempatkan item dalam aliran normal
- Relatif
- Item ini ditempatkan dalam aliran normal, dan kemudian bergeser atau offset dari posisi itu. Item aliran kemudian atas ditata jika item tersebut belum dipindahkan.
- Mutlak
- Menentukan posisi absolut
- Tetap
- Item ini benar-benar diposisikan dalam posisi tetap di layar bahkan sebagai sisa dokumen tersebut sam [39]
[ edit ] Float dan jelas
Para
float properti mungkin memiliki salah satu dari tiga nilai. item
Tentu diposisikan atau
tetap tidak dapat melayang. Elemen lain yang biasanya mengalir di sekitar item melayang, kecuali mereka akan dicegah dari melakukannya oleh mereka
clear properti.
- meninggalkan
- Mengapung di sebelah kiri garis bahwa itu akan muncul di; item lain mungkin mengalir di sekitar sisi kanan
- tepat
- Mengapung di sebelah kanan garis bahwa itu akan muncul di; item lain mungkin mengalir di sekitar sisi kiri
- jelas
- Menghapus properti mengambang dari item dapat menjadi jelas: kiri;, jelas: tepat, atau clear: both; [39] [40]