CSS3 Introduction - What's New?


Cascading Style Sheets, commonly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. Put simply, CSS handles the look and feel part of a web page or a whole website. and the the latest standard for CSS is CSS3(source : css3.com)

Beberapa waktu yang lalu saya memposting artikel pengenalan tentang Mengenal Dasar-dasar CSS #1 dan kali ini saya akan memberitahukan kepada sobat blogger semua tentang fitur baru CSS3, meskipun sudah agak lama sejak CSS3 ini resmi dirilis.

History...

CSS2 muncul kembali pada tahun 1998 dan sejak itu banyak yang telah terjadi di internet. Yang dibuat hanya untuk revisi ialah pada tahun 2011, CSS2.1, namun para ahli mengatakan itu hanya masalah waktu sampai CSS3 seharusnya sudah diresmikan, karena fitur yang datang akan menjawab semua kebutuhan Web designer & Developer.

Walaupun kedengarannya seperti ada perbedaan besar antara CSS2 dan CSS3 (yang mungkin cukup benar), semua browser modern saat ini cukup cepat untuk mengadopsi tambahan-tambahan baru dari keluarga W3C. Semua browser besar mendukung fitur CSS3 yang saat ini telah tersedia. Seperti dengan HTML5, Konsorsium masih menganggap CSS3 berada di bawah pembangunan berkelanjutan dan sangat tidak mungkin untuk mendapatkan versi final.

Different...

Perbedaan terbesar antara CSS2 dan CSS3 adalah bahwa CSS3 telah dibagi menjadi beberapa bagian yang berbeda, yang disebut modul. Masing-masing modul membuat jalan itu melalui W3C dalam berbagai tahap proses rekomendasi. CSS2 diserahkan sebagai dokumen tunggal dengan semua informasi Cascading Style Sheets di dalamnya. Karena masing-masing modul yang sedang dikerjakan secara individual, kita memiliki jangkauan yang lebih luas dari browser dukungan untuk CSS3 modul. Seperti halnya spesifikasi baru, Namun ketika kita berbicara tentang modul, kita akan mendapatkan jumlahnya lebih dari lima puluh, namun empat di antaranya telah diterbitkan sebagai rekomendasi formal. yang terdiri dari :


  • Media Queries (diterbitkan tahun 2012)
  • Namespaces (diterbitkan tahun 2011)
  • Selectors Level 3 (diterbitkan tahun 2011)
  • Color (diterbitkan tahun 2011)

Media Queries

Media Queries mungkin juga menjadi tambahan yang paling penting untuk CSS. Apa yang dilakukan adalah sederhana, yaitu memungkinkan kondisi tertentu yang harus diterapkan untuk stylesheet yang berbeda, membuat website menjadi fixed atau fluid dan cocok untuk semua jenis ukuran layar. Media queries memungkinkan pengembang untuk menyesuaikan dengan resolusi yang berbeda tanpa harus mengubah atau menghapus konten.


Responsive layout using @media queries

Media queries bekerja sangat mudah namun anda diharuskan untuk mengatur lebih banyak lagi stylesheetnya. Mari kita lihat contoh di bawah ini pada beberapa baris kode.

@media screen and (max-width: 600px) {
    background: #FFF;
}

Dengan melihat code media queries yang di atas, Anda hanya akan merubah style untuk layar dengan lebar maksimum 600px. Dalam contoh di atas, semua layar dengan lebar maksimum 600px akan menampilkan latar belakang putih. Namun, max-width bukanlah satu-satunya kondisi yang dapat diterapkan ke stylesheet. Anda dapat menggunakan max-device-width juga (yang merupakan resolusi layar, max-width yang merupakan area tampilan).


Anda juga dapat menggunakan min bukannya max, tetapi Anda juga dapat menggabungkan dua kondisi, seperti pada contoh di bawah, yang hanya akan berlaku untuk layar dengan area tampilan antara 600px dan 900px.

@media screen and (min-width: 600px) and (max-width: 900px) {
    background: #FFF;
}

CSS3 memiliki beberapa stylesheet standar untuk perangkat portabel, seperti iPhone atau iPad, yang dapat Anda lihat di bawah :

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

Dan ini :

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"/>
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"/>

Seperti yang Anda lihat di atas, media queries sangat berguna ketika seorang developer harus membuat fluid grid bekerja pada perangkat yang berbeda dengan ukuran layar yang berbeda.

Border

Beberapa hal penting lainnya dari CSS3 adalah, misalnya, border. CSS3 sebenarnya telah memperkenalkan rounded border, yang merupakan bantuan besar bagi desainer dan developer. Namun, banyak dari fitur ini tidak bekerja dalam versi Internet Explorer, tapi ini bukan sesuatu yang baru bagi kita, kita pernah mendengar itu sebelumnya. Satu-satunya kode yang Anda butuhkan untuk menambahkan stylesheet (dalam kelas khusus) adalah sesuatu yang mirip dengan :

-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 2px solid #446CB3;

Text Shadows

Seperti yang Anda lihat, jauh lebih mudah daripada sebelumnya. Gradien juga tersedia dalam CSS3, selain itu CSS3 juga memperlihatkan sesuatu yang simple seperti pembuatan box / text shadow dan border gambar. Untuk menambahkan teks shadows CSS3 hanya memerlukan baris kode berikut :

text-shadow: 2px 2px 2px #ccc;

Columns

Membuat kolom untuk konten lebih mudah dengan CSS3, seperti sekarang terdapat empat baris kode untuk pembuatan columns yang dapat Anda gunakan setiap saat. seperti :

  • column-count
  • column-width
  • column-gap
  • column-rule

Multiple Backgrounds

Untuk penghematan waktu dalam web designer lain adalah memasukkan beberapa latar belakang langsung dari CSS, lebih mudah dibandingkan anda menggunakan beberapa Hacks untuk template anda. Seperti :

.multiplebackgrounds {
height: 200px;
width: 300px;
padding: 25px;
background: url(top.gif) top right no-repeat,
url(bottom.gif) top left repeat-y,
url(middle.gif) bottom repeat-z;
}

Browser

Ketika CSS3 baru saja dirilis, Browser membantu menginterpretasikan kode. Kadang-kadang Anda masih perlu menggunakan kode ini, jika terdapat kasus browser anda tidak dapat membaca stylesheet yang anda terapkan, maka di bawah ini adalah daftar singkat dengan semua vendor prefix untuk browser yang biasa digunakan yaitu :

  • -moz- : Firefox
  • -webkit- : WebKit browser seperti Safari dan Chrome
  • -o- : Opera
  • -ms- : Internet Explorer

Menurut sebuah siaran pers resmi dari beberpa minggu yang lalu, Opera akan segera membangun desktop dan mobile browser baru yang menggunakan WebKit, Ini berarti bahwa -o- vendor akan menghilang.


Vendor Prefix

New pseudo-classes

  • :only-child - jika anda memiliki sebuah elemen dalam tree yang merupakan anak tunggal dari induknya, dapat ditargetkan oleh pseudo-class.
  • :empty - target elemen yang tidak memiliki anak atau teks apapun, misalnya elemen kosong seperti <p></p>
  • :nth-child(n) - mengambil keuntungan dari angka (n) nilai-nilai dan sasaran suatu elemen anak dalam kaitannya dengan posisi mereka dalam elemen orangtua/parent. Untuk memberikan contoh yang tepat, daftar komentar blog mungkin akan terlihat lebih menarik dengan warna latar belakang - hal ini dapat dilakukan menggunakan pseudo-class.
  • :first-of-type - menargetkan elemen pertama dari jenis elemen tertentu dalam orangtua/parent, dan merupakan kebalikan dari :last-of-type.
  • :first-child - menargetkan elemen anak pertama dari orangtua/parent, terlepas dari jenis elemen itu. Pseudo ini adalah kebalikan dari :last-child
  • :not(s) - yang satu ini menargetkan elemen yang tidak cocok dengan pemilih tertentu (s)
  • :root - yang satu ini menargetkan elemen root dari dokumen
  • :target - mencocokkan elemen yang merupakan target dari URL
  • :enabled - mencocokkan dengan elemen ketika pseudo ini diaktifkan dan merupakan kebalikan dari :disabled
  • :checked - mencocokkan elemen ketika pseudo ini aktif (tombol radio atau kotak centang)
  • :only-of-type - mencocokkan elemen yang mana hanya satu dari type elemen tersebut yang dituju

Sebenarnya ada lebih banyak pseudo-kelas yang ditambahkan ke CSS3 baru, tapi karena pada dasarnya ini adalah sebuah artikel untuk pemula, jadi tidak perlu disebutkan disini.

New Combinator

  • elementA ~ elementB - selector mencocokkan elemen yang adalah saudara kandung dari elemen tertentu, Maksudnya dalam hal ini elemenB mengikuti gaya elemenA menggunakan tanda (~) yang disebut "tilde"
Mari kita lihat contoh dari penerapan Combinator ini :
<p>This is a first paragraf</p>
<h2>Heading</h2>
<p>This is a second paragraf</p>

Dalam keadaan seperti diatas kondisi paragraf pertama tidak akan sama dengan kondisi elemen h2. dikarenakan posisinya berada diatas elemen h2, sebaliknya yang terjadi dengan kondisi paragraf kedua akan sama dengan elemen induknya yaitu elemen h2. seharusnya penulisan yang benar sama seperti contoh pada paragraf kedua diatas.

CSS Example :

h2~p {
  :declarations
}

Tapi ingat, Combinator ini tidak dapat bekerja sepenuhnya pada browser Internet Explorer


Where you can learn?


http://www.1stwebdesigner.com/css/css3-introduction/
http://webdesign.about.com/od/css3/a/differences-css2-css3.html
http://www.w3schools.com/css3/default.asp
5 Comments
Related Post

Join the Discussion!

Dont give a spam please!
Untuk menyisipkan video, gunakan
Untuk menyisipkan gambar, gunakan
Untuk menyisipkan kode, gunakan
Untuk menyisipkan beberapa baris kode, gunakan
Untuk menyisipkan catatan, gunakan
Untuk menciptakan efek teks tebal gunakan