CSS dirancang terutama untuk memungkinkan pemisahan konten dokumen dari presentasi dokumen , termasuk unsur-unsur seperti tata letak , warna , dan font.
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 ). Ini menyingkirkan bagian-bagian dari markup yang akan menentukan presentasi oleh bukannya menyediakan informasi dalam file terpisah. Untuk setiap relevan elemen HTML (diidentifikasi oleh tag), memberikan daftar instruksi format. Sebagai contoh, mungkin mengatakan (dalam sintaks CSS), "Semua pos 1 elemen harus berani .
" Oleh karena itu, tidak ada format markup seperti tag tebal (<b> </ b>) diperlukan dalam konten; apa yang dibutuhkan hanyalah semantik markup mengatakan, "teks ini adalah tingkat 1 judul."
CSS juga dapat memungkinkan halaman markup yang sama yang akan disajikan dalam gaya yang berbeda untuk metode rendering yang berbeda, seperti di layar, di media cetak, dengan suara (ketika dibacakan oleh browser atau pidato berbasis layar reader ) dan Braille berbasis , perangkat taktil. 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 link dokumen ke file CSS, pembaca dapat menggunakan style sheet yang berbeda, mungkin salah satu di komputer mereka sendiri, untuk menimpa salah satu penulis telah ditentukan. Namun, jika penulis atau pembaca tidak menghubungkan dokumen ke style sheet tertentu gaya default browser akan diterapkan.
CSS menetapkan skema prioritas untuk menentukan aturan gaya berlaku jika lebih dari satu aturan pertandingan 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). Internet jenis media ( tipe MIME )
text/css terdaftar untuk digunakan dengan CSS oleh RFC 2318 (Maret 1998), dan mereka juga mengoperasikan gratis layanan validasi CSS . Sintaks
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 blok deklarasi.
Selector
Dalam CSS, penyeleksi digunakan untuk menyatakan bagian dari markup yang gaya berlaku untuk, semacam ekspresi pertandingan. Penyeleksi mungkin berlaku untuk:- semua elemen dari jenis tertentu, misalnya tingkat kedua header h2
- elemen yang ditentukan oleh atribut , khususnya:
- id: identifier unik untuk dokumen
- kelas
- elemen tergantung pada bagaimana mereka ditempatkan relatif terhadap, atau bersarang dalam, yang lain di pohon dokumen .
Pseudo-classes digunakan dalam CSS untuk mengizinkan format berdasarkan informasi yang berada di luar pohon dokumen. Contoh yang sering digunakan dari kelas semu adalah
:hover
, yang mengidentifikasi konten hanya ketika pengguna menunjuk ke
'elemen terlihat, biasanya dengan menekan kursor mouse di atasnya. Hal ini ditambahkan ke pemilih seperti dalam a:hover atau #elementid:hover . A pseudo-class mengklasifikasikan elemen dokumen, seperti :link atau :visited , sedangkan pseudo-elemen membuat pilihan yang dapat terdiri dari unsur parsial, seperti :first-line atau :first-letter .Penyeleksi dapat dikombinasikan dengan berbagai cara, terutama dalam CSS 2.1, untuk mencapai spesifisitas besar dan fleksibilitas. Beberapa penyeleksi dapat bergabung dalam daftar spasi untuk menentukan unsur-unsur yang sesuai dengan semua pemilih. Urutan pemilih penting. Misalnya, div .myClass {color: red;} berlaku untuk semua elemen kelas myClass yang berada di dalam elemen div, sedangkan .myClass div {color: red;} berlaku untuk semua div elemen yang berada dalam unsur-unsur kelas myClass.
Ringkasan sederhana dari sintaks Selector menunjukkan penggunaan dan saat perkenalan.
| Pola | Arti | Pertama Ditetapkan di CSS Tingkat |
|---|---|---|
| E | Sebuah elemen tipe E | 1 |
| E: Link | elemen E menjadi jangkar sumber hyperlink yang target belum dikunjungi (: link) atau sudah dikunjungi | 1 |
| E: aktif | elemen E pada tindakan pengguna tertentu | 1 |
| E :: lini pertama | baris pertama diformat dari elemen E | 1 |
| E :: first-letter | huruf pertama diformat dari elemen E | 1 |
| E.warning | elemen E yang kelasnya adalah "peringatan" (bahasa dokumen menentukan bagaimana kelas ditentukan). | 1 |
| E # MyID | elemen E dengan ID sama dengan "MyID". | 1 |
| EF | unsur keturunan F dari elemen E | 1 |
| * | Setiap elemen | 2 |
| E [foo] | elemen E dengan "foo" atribut | 2 |
| E [foo = "bar"] | elemen E yang "foo" nilai atribut persis sama dengan "bar" | 2 |
| E [foo ~ = "bar"] | elemen E yang "foo" nilai atribut adalah daftar nilai spasi dipisahkan, salah satunya adalah persis sama dengan "bar" | 2 |
| E [foo | = "en"] | elemen E yang "foo" atribut memiliki daftar tanda hubung dipisahkan dari nilai awal (dari kiri) dengan "en" | 2 |
| E: pertama-anak | elemen E, anak pertama dari induknya | 2 |
| E: lang (fr) | elemen tipe E dalam bahasa "fr" (bahasa dokumen menentukan bagaimana bahasa ditentukan) | 2 |
| E :: sebelum | konten yang dihasilkan sebelum elemen E | 2 |
| E :: setelah | konten yang dihasilkan setelah elemen E | 2 |
| E> F | elemen anak F dari elemen E | 2 |
| E + F | elemen F segera didahului oleh elemen E | 2 |
| E [foo ^ = "bar"] | elemen E yang "foo" nilai atribut dimulai persis dengan string "bar" | 3 |
| E [foo $ = "bar"] | elemen E yang "foo" nilai atribut berakhir persis dengan string "bar" | 3 |
| E [foo * = "bar"] | elemen E yang "foo" nilai atribut berisi substring "bar" | 3 |
| E: root | elemen E, akar dokumen | 3 |
| E: n-anak (n) | elemen E,-n anak induknya | 3 |
| E: n-last-anak (n) | elemen E,-n anak induknya, menghitung dari yang terakhir | 3 |
| E: n-of-jenis (n) | elemen E, saudara-n dari jenis | 3 |
| E: n-terakhir-dari-jenis (n) | elemen E, saudara-n dari jenis, menghitung dari yang terakhir | 3 |
| E: last-anak | elemen E, anak terakhir dari induknya | 3 |
| E: pertama-of-jenis | elemen E, saudara pertama dari jenisnya | 3 |
| E: terakhir-of-jenis | elemen E, saudara terakhir dari jenisnya | 3 |
| E: hanya-anak | elemen E, anak tunggal dari induknya | 3 |
| E: hanya-of-jenis | elemen E, hanya saudara dari jenis | 3 |
| E: kosong | elemen E yang tidak memiliki anak (termasuk node teks) | 3 |
| E: Target | elemen E menjadi target URI mengacu | 3 |
| E: diaktifkan | elemen antarmuka pengguna E yang diaktifkan | 3 |
| E: cacat | elemen antarmuka pengguna E yang dinonaktifkan | 3 |
| E: diperiksa | elemen antarmuka pengguna E yang diperiksa (misalnya radio-button atau checkbox) | 3 |
| E: tidak (s) | E elemen yang tidak sesuai sederhana pemilih s | 3 |
| E ~ F | elemen F didahului oleh elemen E | 3 |
Deklarasi block
Sebuah blok deklarasi terdiri dari daftar deklarasi di kawat gigi. Setiap deklarasi itu sendiri terdiri dari properti, titik dua (: ), dan nilai. Jika ada beberapa deklarasi di blok, semi-colon ( ; ) harus dimasukkan untuk memisahkan setiap pernyataan.Properti yang ditentukan dalam standar CSS. Setiap properti memiliki seperangkat nilai yang mungkin. Beberapa properti dapat mempengaruhi jenis elemen, dan lain-lain hanya hanya berlaku untuk kelompok-kelompok tertentu elemen.
Nilai mungkin kata kunci, seperti "pusat" atau "mewarisi", atau nilai-nilai numerik, seperti 200px (200 pixel) atau 80%. Nilai warna dapat ditentukan dengan kata kunci (misalnya "merah"), nilai heksadesimal (misalnya # FF0000, juga disingkat sebagai # F00), nilai-nilai RGB pada skala 0 sampai 255 (misalnya rgb (255, 0, 0)), nilai-nilai RGBA yang menentukan warna dan opacity (misalnya RGBA (255, 0, 0, 0,8)), atau HSL atau nilai HSLA (misalnya HSL (000, 100%, 50%), HSLA (000, 100%, 50%, 80% )).
Gunakan
Sebelum CSS, hampir semua atribut presentasi dari dokumen HTML yang terkandung dalam markup HTML; semua warna font, gaya latar belakang, keberpihakan elemen, perbatasan dan ukuran harus secara eksplisit dijelaskan, sering berulang kali, dalam HTML. CSS memungkinkan penulis untuk bergerak jauh dari informasi tersebut untuk file lain, style sheet, sehingga HTML jauh lebih sederhana.Pos (
h1 elemen), sub-judul ( h2 ), sub-sub-judul ( h3 ), dll, didefinisikan secara struktural menggunakan HTML. Dalam cetak dan di layar, pilihan huruf , ukuran , warna dan penekanan untuk elemen ini penyajian.Sebelum CSS, dokumen penulis yang mau menetapkan seperti tipografi karakteristik untuk, katakanlah, semua
h2 pos harus mengulang HTML markup presentational untuk setiap kemunculan jenis pos. Hal ini membuat dokumen yang lebih kompleks, lebih besar, dan rawan kesalahan dan sulit untuk mempertahankan lebih. CSS memungkinkan pemisahan presentasi dari struktur.
CSS dapat menentukan warna, font, perataan teks, ukuran, perbatasan,
jarak, tata letak dan banyak karakteristik tipografi lainnya, dan dapat
melakukannya secara independen untuk di layar dan tampilan dicetak. CSS juga mendefinisikan gaya non-visual seperti kecepatan dan penekanan dengan teks yang dibacakan oleh pembaca teks aural. The W3C kini telah ditinggalkan penggunaan semua presentasi markup HTML.Sebagai contoh, di bawah pra-CSS HTML, elemen sundulan didefinisikan dengan teks merah akan ditulis sebagai:
<H1> <font color = "red"> Bab 1 </ font> </ h1>
<H1 style = "color: red"> Bab 1 </ h1>
<Link href = "path / to / file.css" rel = "stylesheet">
<Style>
Sumber
Informasi CSS dapat disediakan dari berbagai sumber. Sumber-sumber ini dapat menjadi browser web, pengguna dan penulis. Informasi dari penulis dapat diklasifikasikan lebih lanjut menjadi inline, jenis media, penting, pemilih spesifisitas, urutan aturan, warisan dan definisi properti. Informasi gaya CSS dapat di dokumen terpisah atau dapat tertanam ke 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 masing-masing media.
Style sheet dengan prioritas tertinggi mengontrol tampilan konten. Deklarasi tidak diatur dalam sumber prioritas tertinggi diteruskan ke sumber prioritas yang lebih rendah, seperti pengguna gaya agent. Proses ini disebut cascading.
Salah satu tujuan dari CSS juga untuk memungkinkan pengguna kontrol yang lebih besar presentasi. Seseorang yang menemukan judul italic merah sulit dibaca mungkin berlaku style sheet yang berbeda. Tergantung pada browser dan situs web, pengguna dapat memilih dari berbagai style sheet yang disediakan oleh desainer, atau dapat menghapus semua gaya ditambahkan dan melihat situs menggunakan styling default browser, atau mungkin menimpa hanya merah gaya tajuk miring tanpa mengubah lainnya atribut.
Skema CSS Prioritas (tertinggi ke terendah)
| Prioritas Tinggi | Sumber CSS Type | Deskripsi |
|---|---|---|
| 1 | Didefinisikan Pengguna | Sebagian besar browser memiliki fitur aksesibilitas: ditetapkan pengguna CSS |
| 2 | Inline | Sebuah gaya diterapkan pada sebuah elemen HTML melalui HTML properti 'gaya' |
| 3 | Jenis Media | Definisi properti berlaku untuk semua jenis media, kecuali CSS media khusus didefinisikan |
| 4 | Pentingnya | The '! Penting' nilai menimpa jenis prioritas sebelumnya |
| 5 | Pemilih spesifisitas | Sebuah pemilih kontekstual tertentu (#heading p) menimpa definisi generik |
| 6 | Agar aturan | Aturan terakhir deklarasi memiliki prioritas lebih tinggi |
| 7 | Warisan orang tua | Jika properti tidak ditentukan, itu adalah warisan dari elemen induk |
| 8 | CSS definisi properti dalam dokumen HTML | Aturan CSS atau CSS gaya inline menimpa nilai browser default |
| 9 | Browser default | Terendah Prioritas: nilai default browser ditentukan oleh spesifikasi nilai awal W3C |
Kekhususan
Kekhususan menggambarkan bobot relatif dari berbagai aturan. Ini menentukan gaya yang diterapkan pada elemen ketika lebih dari satu aturan dapat diterapkan. Berdasarkan spesifikasi, pemilih sederhana (misalnya, H1) memiliki spesifisitas 1, penyeleksi kelas memiliki spesifisitas 1,0, dan ID penyeleksi spesifisitas 1,0,0. Karena nilai-nilai spesifisitas tidak terbawa seperti dalam sistem desimal, koma digunakan untuk memisahkan "angka" (aturan CSS memiliki 11 elemen dan 11 kelas akan memiliki kekhususan yang dari 11,11, tidak 121).Jadi aturan penyeleksi berikut menghasilkan kekhususan yang ditunjukkan:
| Penyeleksi | Kekhususan |
|---|---|
| H1 {color: white;} | 1 |
| P EM {color: green;} | 2 |
| .grape {color: red;} | 1,0 |
| P.bright {warna: biru;} | 1,1 |
| P.bright EM.dark {color: kuning;} | 2,2 |
| # Id218 {color: brown;} | 1,0,0 |
| style = "" | 1,0,0,0 |
Contoh Kekhususan
Pertimbangkan fragmen HTML ini:<! DOCTYPE html> <Html> <Head> <Meta charset = "utf-8"> <Style> #xyz {color: red} </ Style> </ Head> <Body> <P id = "xyz" style = "color: blue"> Untuk menunjukkan spesifisitas </ p> </ Body> </ Html>
Warisan
Warisan adalah fitur kunci dalam CSS, hal itu bergantung pada hubungan leluhur-keturunan untuk beroperasi. Warisan adalah mekanisme yang sifat diterapkan tidak hanya untuk elemen tertentu, tetapi juga untuk keturunannya. Warisan bergantung pada pohon dokumen, yang merupakan hirarki (X) HTML elemen dalam halaman berdasarkan bersarang. Unsur keturunan dapat mewarisi nilai properti CSS dari elemen leluhur melampirkan mereka. Secara umum, unsur-unsur keturunan mewarisi sifat-teks terkait, tetapi sifat-kotak terkait tidak diwariskan. Properti yang bisa diwariskan adalah warna, font, letter-spacing, line-height, list-style, text-align text-indent, text-transform, visibilitas, white-space dan kata-spasi. Sifat yang tidak dapat diwariskan adalah latar belakang, perbatasan, layar, mengambang dan jelas, tinggi dan lebar, margin, kementerian dan max-height dan -width, garis besar, overflow, padding, posisi, text-decoration, vertical-align dan z indeks.Warisan mencegah sifat tertentu dari yang dinyatakan berulang-ulang dalam style sheet, yang memungkinkan pengembang perangkat lunak untuk menulis kurang CSS. Hal ini meningkatkan cepat-loading halaman web oleh pengguna dan memungkinkan klien untuk menyimpan uang pada bandwith dan biaya pengembangan.
Contoh warisan
Mengingat style sheet berikut: h1 {color: pink;}
<H1> Ini untuk <em> menggambarkan </ em> warisan </ h1>
Whitespace
Spasi antara properti dan penyeleksi diabaikan. Potongan kode ini: body {overflow: hidden; background: # 000000;}
body { overflow: hidden; background: # 000000; }
Sejarah
Contoh pertama dari apa yang kemudian datang untuk menjadi CSS, berada di Tim Berners-Lee NeXT browser / Editor. Browser ini dikembangkan sedemikian rupa bahwa gaya dokumen dapat dipisahkan dan didefinisikan dalam style sheet sederhana.Makalah pertama membahas perlunya bahasa Cascading stylesheet diterbitkan pada bulan Agustus 1995 dalam makalah berjudul A Metodologi untuk 'Structured Hypermedia Design. Komunikasi.
Style sheet sudah ada dalam satu bentuk atau lain sejak awal dari Standard Generalized Markup Language ( 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 kemampuan gaya untuk memenuhi tuntutan pengembang web . Evolusi ini memberikan kontrol desainer lebih besar atas penampilan situs, pada biaya HTML lebih kompleks. Variasi dalam web browser implementasi, seperti ViolaWWW dan WorldWideWeb, membuat situs penampilan konsisten sulit, dan pengguna memiliki kurang kontrol atas bagaimana konten web itu ditampilkan. Robert Cailliau ingin memisahkan struktur dari presentasi. 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
Untuk meningkatkan kemampuan web presentasi, sembilan bahasa style sheet yang berbeda diusulkan ke World Wide Web Consortium 's (W3C) www gaya mailing list. Dari sembilan proposal, dua dipilih sebagai landasan untuk apa menjadi CSS: Cascading Style Sheets HTML; dan Streaming berbasis Style Sheet Proposal (SSP).
CHSS, bahasa yang memiliki beberapa kemiripan dengan CSS hari ini, diusulkan oleh Håkon Wium Lie pada tanggal 10 Oktober 1994; merinci kebutuhan untuk skema style sheet untuk dokumen HTML. Bert Bos sedang bekerja pada browser yang disebut Argo , yang menggunakan bahasa style sheet sendiri yang disebut SSP. Lie dan Yves Lafon bergabung Dave Raggett untuk memperluas Arena Browser untuk mendukung CSS sebagai testbed aplikasi untuk W3C. Lie dan Bos bekerja sama untuk mengembangkan standar CSS ('H' telah dihapus dari nama itu karena style sheet ini juga bisa diterapkan untuk lainnya bahasa markup selain HTML).
Tidak seperti gaya bahasa 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 preferensi gaya 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. Sekitar waktu ini W3C sudah didirikan, dan mengambil minat dalam pengembangan CSS. Ini menyelenggarakan lokakarya menuju yang akhir diketuai oleh Steven Pemberton . Hal ini mengakibatkan W3C menambahkan bekerja pada CSS untuk kiriman dari HTML editorial dewan peninjau (ERB). Lie dan Bos adalah staf teknis utama pada aspek ini proyek, dengan anggota tambahan, termasuk Thomas Reardon dari Microsoft , berpartisipasi juga. Pada Agustus 1996 Netscape Communication Perusahaan disajikan alternatif bahasa style sheet disebut JavaScript Style Sheets (JSSS). spec tidak pernah selesai dan sudah ditinggalkan. Pada akhir tahun 1996, CSS sudah siap untuk menjadi resmi, dan CSS tingkat 1 Rekomendasi diterbitkan pada bulan Desember.
Pengembangan HTML, CSS, dan DOM semua telah terjadi dalam satu kelompok, HTML Editorial Review Board (ERB). Pada awal 1997, Erb terpecah menjadi tiga kelompok kerja : Kelompok Kerja HTML , 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 CSS tingkat 1, sehingga penciptaan CSS tingkat 2 pada 4 November, 1997 itu diterbitkan sebagai Rekomendasi W3C pada tanggal 12 Mei 1998 CSS level 3, yang dimulai pada tahun 1998, masih dalam pengembangan pada 2014.
Pada tahun 2005 Kelompok Kerja CSS memutuskan untuk menegakkan persyaratan untuk standar yang 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 Kerja tingkat Draft.
Kesulitan dengan adopsi
CSS 1 spesifikasi selesai pada 1996 Microsoft Internet Explorer 3 dirilis pada tahun itu, yang menampilkan beberapa dukungan terbatas untuk CSS. Tapi itu lebih dari tiga tahun sebelum web browser dicapai implementasi dekat-penuh spesifikasi. Internet Explorer 5.0 untuk Macintosh , dikirim pada Maret 2000, adalah browser pertama untuk memiliki penuh (lebih dari 99 persen) CSS 1 dukungan, melebihi Opera , yang telah menjadi pemimpin sejak diperkenalkan dukungan CSS 15 bulan sebelumnya. Browser lain diikuti segera setelah itu, dan banyak dari mereka tambahan dilaksanakan bagian dari CSS 2 Pada Agustus 2010 , ada (selesai) Browser telah sepenuhnya dilaksanakan CSS 2, dengan tingkat implementasi berbagai (lihat Perbandingan mesin tata letak (CSS) ) .Meskipun browser awal seperti Internet Explorer 3 dan 4 , dan Netscape 4.x memiliki dukungan untuk CSS, itu biasanya tidak lengkap dan memiliki banyak bug yang mencegah implementasi mereka dari berguna diadopsi.
Ketika kemudian 'versi 5' browser mulai menawarkan implementasi cukup penuh dari CSS, mereka masih salah di daerah tertentu dan penuh dengan inkonsistensi, bug dan lainnya kebiasaan . Perkembangan inkonsistensi-CSS terkait seperti dan bahkan variasi dalam mendukung fitur telah membuatnya menjadi sulit bagi desainer untuk mencapai penampilan yang konsisten di seluruh browser dan platform . Beberapa penulis terpaksa workarounds seperti hacks CSS dan filter .
Masalah dengan adopsi tambal sulam browser 'CSS, bersama dengan ralat dalam spesifikasi asli, dipimpin W3C untuk merevisi CSS 2 standar ke CSS 2.1, yang bergerak lebih dekat ke snapshot kerja dukungan CSS saat ini di browser HTML. Beberapa CSS 2 sifat yang tidak ada browser berhasil dilaksanakan dijatuhkan, dan dalam beberapa kasus, perilaku didefinisikan diubah untuk membawa standar agar 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 Status Draft pada tanggal 13 Juni 2005, dan hanya kembali ke status Rekomendasi Calon pada tanggal 19 Juli 2007.
Di masa lalu, beberapa server web yang dikonfigurasi untuk melayani semua dokumen dengan ekstensi nama file
.css sebagai tipe mime application/x-pointplus daripada text/css . Pada saat itu, ada sebuah produk perangkat lunak di pasar untuk mengkonversi PowerPoint file ke Compact Slide Show file menggunakan .css extension. Variasi
CSS memiliki berbagai tingkat dan profil. Setiap tingkat CSS dibangun berdasarkan yang terakhir, biasanya menambahkan fitur baru dan biasanya dilambangkan sebagai CSS 1, CSS 2, CSS 3, dan CSS 4. Profil biasanya subset dari satu atau lebih tingkat CSS dibangun untuk perangkat tertentu atau user interface . Saat ini ada profil untuk perangkat mobile, printer, dan televisi. Profil tidak harus bingung dengan jenis media, yang ditambahkan dalam CSS 2.CSS 1
CSS spesifikasi pertama yang menjadi Rekomendasi W3C resmi adalah CSS level 1, diterbitkan pada 17 Desember 1996 Håkon Wium Lie dan Bas Bos dikreditkan sebagai pengembang asli. Di antara kemampuan adalah dukungan untuk- Font properti seperti jenis huruf dan penekanan
- Warna teks, latar belakang, dan unsur-unsur lain
- Teks atribut seperti spasi antara kata-kata, huruf, dan baris teks
- Keselarasan dari teks, gambar, tabel dan elemen lainnya
- Margin, perbatasan, padding, dan positioning untuk sebagian besar elemen
- Identifikasi yang unik dan klasifikasi generik kelompok atribut
CSS 2
Tingkat CSS 2 spesifikasi dikembangkan oleh W3C dan diterbitkan sebagai rekomendasi Mei 1998 Sebuah superset dari CSS 1, CSS 2 mencakup sejumlah kemampuan baru seperti posisi absolut, relatif, dan tetap elemen dan z-index , konsep jenis media, dukungan untuk gaya aural seprai dan teks dua arah, dan properti font baru seperti bayangan.W3C tidak lagi mempertahankan CSS 2 rekomendasi
CSS 2.1
CSS level 2 revisi 1, sering disebut sebagai "CSS 2.1", perbaikan kesalahan dalam CSS 2, menghilangkan kurang didukung atau tidak fitur sepenuhnya interoperable dan menambahkan ekstensi browser yang sudah dilaksanakan untuk spesifikasi. Untuk memenuhi Proses W3C untuk standardisasi spesifikasi teknis, CSS 2.1 pergi bolak-balik antara Kerja Draft status dan Status Calon Rekomendasi selama bertahun-tahun. CSS 2.1 pertama kali menjadi Rekomendasi Calon pada tanggal 25 Februari 2004, tapi itu kembali ke Draft Kerja pada tanggal 13 Juni 2005 untuk diperiksa lebih lanjut. Itu kembali ke Calon Rekomendasi pada tanggal 19 Juli 2007 dan kemudian diperbarui dua kali pada tahun 2009 Namun, karena perubahan dan klarifikasi yang dilakukan, lagi kembali ke Last Draft Panggilan Kerja pada tanggal 7 Desember 2010.CSS 2.1 pergi ke Usulan Rekomendasi 12 April 2011. Setelah diperiksa oleh Komite Penasehat W3C, itu akhirnya diterbitkan sebagai Rekomendasi W3C pada 7 Juni 2011.
CSS 3
"CSS3" beralih ke halaman ini. Untuk kode CSS3 bandara, lihat Montréal / Les Cèdres Airport .
Karena modularisasi tersebut, modul yang berbeda memiliki stabilitas dan status yang berbeda. Pada Juni 2012, ada lebih dari lima puluh modul CSS diterbitkan dari Kelompok Kerja CSS. dan empat di antaranya telah diterbitkan sebagai resmi rekomendasi :
- 2012-06-19: Media Query
- 2011-09-29: Namespaces
- 2011-09-29: Penyeleksi Level 3
- 2011/06/07: Warna
| Modul | Title Spesifikasi | Status, tanggal |
|---|---|---|
| CSS3-background | Backgrounds CSS dan Borders Modul Level 3 | Terakhir Draft Panggilan Kerja, Februari 2014 |
| CSS3-kotak | CSS model kotak dasar | Draft Bekerja, Agustus 2007 |
| css-cascade-3 | CSS Cascading dan Warisan Level 3 | Calon Rekomendasi, Oktober 2013 |
| CSS3 warna | CSS Modul Color Level 3 | Rekomendasi, Juni 2011 |
| CSS3-konten | CSS3 Generated Content dan Diganti Modul | Draft Bekerja, Mei 2003 |
| css-font-3 | CSS Font Modul Level 3 | Calon Rekomendasi, Oktober 2013 |
| CSS3-gcpm | CSS Generated Content untuk Paged Media Modul | Draft Bekerja, November 2011 |
| CSS3-layout | CSS Template Tata Letak Modul | Draft Bekerja, November 2011 |
| CSS3-tenda | CSS Marquee Modul Level 3 | Calon Rekomendasi, Desember 2008 |
| CSS3-mediaqueries | Media Query | Rekomendasi, Juni 2012 |
| CSS3 halaman | CSS Paged Media Modul Level 3 | Draft Bekerja, Maret 2013 |
| CSS3-penyeleksi | Penyeleksi Level 3 | Rekomendasi, September 2011 |
| CSS3-ui | CSS Dasar User Interface Module Level 3 (CSS3 UI) | Draft Bekerja, Januari 2012 |
CSS 4
Tidak ada satu, spesifikasi terintegrasi CSS4, karena dibagi menjadi modul terpisah. Namun, ada "tingkat 4" modul.Sejak CSS3 membagi definisi bahasa CSS ke dalam modul, modul telah diizinkan untuk tingkat mandiri. Kebanyakan modul level 3 - mereka membangun hal-hal dari CSS 2.1. Beberapa level 4 modul ada (seperti Nilai Gambar , Backgrounds & Borders , atau Penyeleksi ), yang membangun fungsionalitas sebelumnya tingkat 3 modul. Lainnya mendefinisikan fungsionalitas yang sama sekali baru, seperti Flexbox .
Jadi, sementara tidak ada CSS4 monolitik akan bekerja setelah CSS3 selesai sepenuhnya, tingkat 4 modul dapat secara kolektif disebut sebagai CSS4.
Dukungan Browser
Informasi lebih lanjut: Perbandingan mesin tata letak (Cascading Style Sheets)
Karena tidak semua browser benar mengurai
kode CSS, mengembangkan teknik yang dikenal sebagai CSS hacks dapat
baik menyaring browser tertentu atau menargetkan browser tertentu coding
(umumnya keduanya dikenal sebagai filter CSS ).
Yang pertama dapat didefinisikan sebagai CSS hacks penyaringan dan yang
terakhir dapat didefinisikan sebagai CSS hacks penargetan. 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.Menggunakan filter CSS, beberapa desainer telah pergi sejauh memberikan CSS yang berbeda untuk tertentu browser untuk memastikan desain render seperti yang diharapkan. Karena web browser awal yang baik benar-benar tidak mampu menangani CSS, atau diberikan CSS sangat buruk, desainer hari ini sering secara rutin menggunakan CSS filter 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 masing-masing versi. Pada tahun 2008, Beta pertama Internet Explorer 8 menawarkan dukungan untuk CSS 2.1 dalam mode yang terbaik standar web.
Contoh dari historis terkenal bug Browser CSS adalah Internet Explorer bug model kotak , di mana kotak lebar diinterpretasikan salah 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) HTML dokumen. Hacks CSS dan CSS filter digunakan untuk mengkompensasi bug seperti ini, hanya salah satu dari ratusan CSS bug yang telah didokumentasikan dalam berbagai versi Netscape , Mozilla Firefox , Opera , dan Internet Explorer (termasuk Internet Explorer 7 ).
Bahkan ketika ketersediaan browser CSS-mampu membuat CSS giat teknologi, penerapan CSS masih ditahan oleh 'perjuangan dengan browser' desainer implementasi CSS yang salah dan dukungan CSS tambal sulam. Bahkan saat ini, masalah ini terus membuat bisnis desain CSS yang lebih kompleks dan mahal daripada itu dimaksudkan untuk menjadi, dan cross-browser pengujian tetap suatu keharusan. Alasan lain untuk terus non-adopsi CSS adalah:. Kompleksitas yang dirasakan, kurangnya penulis keakraban dengan sintaks CSS dan teknik yang dibutuhkan, dukungan miskin dari authoring tools, risiko yang ditimbulkan oleh inkonsistensi antara browser dan kenaikan biaya pengujian
Saat ini ada persaingan kuat antara WebKit layout engine yang digunakan dalam Apel Safari dan Google Chrome , yang serupa KHTML mesin yang digunakan di KDE 's Konqueror Browser dan Mozilla 's Gecko layout engine yang digunakan di Firefox - masing-masing memimpin dalam berbagai aspek CSS.
Pada Agustus 2009, Internet Explorer 8, Firefox 2 dan 3 memiliki tingkat cukup lengkap pelaksanaan CSS 2.1.
Keterbatasan
Beberapa keterbatasan dicatat dari kemampuan saat ini CSS meliputi:- Penyeleksi tidak dapat naik
- CSS saat ini tidak menawarkan cara untuk memilih orang tua atau nenek moyang dari elemen yang memenuhi kriteria tertentu. CSS Selectors Level 4, yang masih dalam Working Status Draft, mengusulkan pemilih tersebut, tetapi hanya sebagai bagian dari " lengkap "profil pemilih, bukan" cepat "profil yang digunakan dalam styling CSS dinamis. Sebuah skema pemilih lebih maju (seperti XPath ) akan memungkinkan style sheet yang lebih canggih. Alasan utama untuk Kelompok Kerja CSS sebelumnya menolak proposal untuk penyeleksi orangtua terkait dengan kinerja browser yang dan masalah render tambahan.
- Keterbatasan kontrol vertikal
- Sementara penempatan horisontal unsur umumnya mudah untuk mengontrol, penempatan vertikal sering unintuitive, berbelit-belit, atau langsung tidak mungkin. Tugas-tugas sederhana, seperti berpusat elemen vertikal atau mendapatkan footer yang akan ditempatkan tidak lebih tinggi dari bawah viewport, baik memerlukan rumit dan aturan style unintuitive, atau sederhana tapi banyak yang tidak didukung aturan.
- 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, konsep kerja dengan calc () nilai untuk mengatasi keterbatasan ini telah diterbitkan oleh WG CSS. Internet Explorer versi 5 sampai 7 dukungan ekspresi berpemilik () pernyataan,dengan fungsi serupa. Ekspresi () pernyataan kepemilikan ini tidak lagi didukung dari Internet Explorer 8 dan seterusnya, kecuali dalam mode kompatibilitas. Keputusan ini diambil untuk "standar kepatuhan, kinerja browser dan alasan keamanan". - Kurangnya kolom deklarasi
- Sementara mungkin dalam CSS saat ini 3 (menggunakan
kolom-hitunganmodul), layout dengan beberapa kolom dapat kompleks untuk menerapkan 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 bisa secara eksplisit menyatakan lingkup baru secara independen dari posisi
- Scoping aturan untuk properti seperti z-index mencari elemen induk terdekat dengan posisi: absolut atau posisi: relatif atribut. Kopling aneh ini memiliki efek yang tidak diinginkan. Sebagai contoh, adalah mustahil untuk menghindari menyatakan lingkup baru ketika seseorang dipaksa untuk menyesuaikan posisi elemen, mencegah satu dari menggunakan ruang lingkup yang diinginkan dari elemen induk.
- Perilaku dinamis Pseudo-class tidak dapat dikontrol
- CSS menerapkan pseudo-kelas yang memungkinkan tingkat umpan balik pengguna dengan aplikasi bersyarat gaya alternatif. Satu CSS pseudo-class, ": hover", adalah dinamis (setara dengan JavaScript "onmouseover") dan memiliki potensi untuk penyalahgunaan (misalnya, menerapkan popup kursor-dekat), tetapi CSS tidak memiliki kemampuan untuk klien untuk menonaktifkannya (tidak ada "menonaktifkan" -seperti properti) atau membatasi dampaknya (tidak ada "nochange" nilai -seperti untuk setiap properti).
- Tidak bisa menyebutkan nama aturan
- Tidak ada cara untuk nama aturan CSS, yang akan memungkinkan (misalnya) script sisi klien untuk merujuk pada aturan bahkan jika perubahan pemilih nya.
- Tidak bisa mencakup gaya dari aturan ke aturan lain
- Gaya CSS sering harus digandakan dalam beberapa aturan untuk mencapai efek yang diinginkan, menyebabkan perawatan tambahan dan membutuhkan pengujian lebih menyeluruh.
- Tidak dapat menargetkan teks tertentu tanpa mengubah markup
- Selain
: pertama-suratpseudo-elemen, seseorang tidak dapat menargetkan rentang tertentu dari teks tanpa perlu menggunakan elemen tempat-holder.
Keuntungan
- Pemisahan konten dari presentasi
- CSS memfasilitasi publikasi konten dalam berbagai format presentasi berdasarkan parameter nominal. Parameter nominal 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.
- Konsistensi situs-lebar
- Artikel utama: Pemisahan presentasi dan konten dan lembar Style (pengembangan web)Ketika CSS digunakan secara efektif, dalam hal warisan dan "Cascading," sebuah style sheet global dapat digunakan untuk mempengaruhi dan gaya elemen situs-lebar. Jika situasi muncul bahwa gaya dari elemen harus perlu diubah atau disesuaikan, perubahan ini dapat dilakukan dengan mengedit aturan dalam style sheet global. Sebelum CSS, semacam ini pemeliharaan lebih sulit, mahal dan memakan waktu.
- Bandwidth
- Sebuah stylesheet, internal atau eksternal, menentukan gaya sekali untuk berbagai elemen HTML dipilih oleh
kelas, jenis 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
- Artikel utama: peningkatan ProgresifDengan 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 harus biasanya lay out halaman mereka dengan teknik seperti tabel HTML yang menghambat aksesibilitas bagi pengguna visi-gangguan (lihat Tableless desain web # Aksesibilitas ).
Kerangka CSS
<head> .Mereka menyediakan beberapa pilihan siap pakai 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 CSS 'kerajinan' yang sesuai dengan setiap situs yang diterbitkan tanpa desain, pemeliharaan dan men-download overhead memiliki banyak fitur yang tidak terpakai di styling situs.
Positioning
CSS 2.1 mendefinisikan tiga skema posisi:- Aliran normal
- Inline item yang tercantum dalam cara yang sama seperti huruf dalam kata-kata dalam teks, satu demi satu seluruh ruang yang tersedia sampai tidak ada lebih banyak ruang, kemudian memulai baris baru di bawah ini. Block item tumpukan vertikal, seperti paragraf dan seperti item dalam daftar bullet. Aliran normal juga termasuk posisi relatif blok atau inline item, dan run-in kotak.
- Mengapung
- Item melayang diambil dari aliran normal dan bergeser ke kiri atau ke kanan sejauh mungkin di ruang yang tersedia. Konten lainnya kemudian mengalir bersama item melayang.
- Posisi absolut
- Item benar-benar diposisikan tidak memiliki tempat dalam, dan tidak berpengaruh pada, aliran normal barang-barang lainnya. Ini menempati posisinya ditugaskan dalam wadah secara independen dari barang-barang lainnya
Posisi: atas, bawah, kiri, dan kanan
Ada empat kemungkinan nilai dariposisi properti. Jika item diposisikan dengan cara apapun selain statis , maka properti lainnya atas , bawah , kiri , dan kanan digunakan untuk menentukan offset dan posisi.- Static
- Nilai default menempatkan item dalam aliran normal
- Relatif
- Item ini ditempatkan di aliran normal , dan kemudian bergeser atau offset dari posisi itu. Item aliran selanjutnya diletakkan seolah-olah barang itu belum dipindahkan.
- Absolute
- Menentukan posisi absolut . Unsur diposisikan dalam kaitannya dengan nenek moyang non-statis terdekat.
- Tetap
- Item ini benar-benar diposisikan dalam posisi tetap pada layar bahkan sebagai sisa dokumen sam
Mengambang dan jelas
Themengapung properti dapat memiliki salah satu dari tiga nilai. Benar-benar diposisikan atau tetap item tidak dapat melayang. Unsur-unsur lain biasanya mengalir item di sekitar melayang, kecuali mereka dicegah dari melakukannya oleh mereka jelas properti.- kiri
- Item mengapung di sebelah kiri garis bahwa itu akan muncul di; barang-barang lainnya dapat mengalir di sekitar sisi kanan.
- kanan
- Item mengapung di sebelah kanan garis bahwa itu akan muncul di; barang-barang lainnya dapat mengalir di sekitar sisi kiri.
- jelas
- Memaksa elemen yang muncul di bawah ('jelas') melayang elemen ke kiri (
jelas: kiri), kanan (jelas: kanan) atau kedua sisi (clear: both). - sumber : wikipedia
0 komentar:
Posting Komentar