Skip to content
Arif Setiawan
Arif Setiawan

travel, culinary and technology

  • Home
  • About
  • Travel
    • Indonesia
      • Bali
      • Banten
      • Jakarta
      • Jawa Barat
      • Jawa Tengah
      • Jawa Timur
      • Kalimantan Selatan
      • Lampung
      • Sumatera Barat
      • Sumatera Utara
      • Yogyakarta
    • Laos
    • Malaysia
    • Singapore
    • Vietnam
  • Culinary
  • Technology
    • Startup
    • Software Development
    • Social Media
  • #kulinersince
  • Nol Kilometer
Arif Setiawan

travel, culinary and technology

Apa yang Baru di CSS4?

Arif Setiawan, March 7, 2012August 22, 2020

CSS merupakan jembatan terbaik antara web designer dan developer, meski mungkin masih banyak masalah browser compatibility, tetapi mengetahui hal baru dari CSS adalah hal yang sangat menyenangkan :mrgreen:.

Nah, di saat saya belum khatam belajar CSS3, ini udah rilis aja CSS4. Ketinggalan banget ya?

Coba langsung kita tengok saja yuk apa yang baru di CSS4 ini ;).

Selectors $E > F

Sintaks selector yang memungkinkan untuk styling dari elemen parents ($ E) berdasarkan elemen anak nya (F).

[code language=”css”]/* style the LI element */
ul > $li > p { border: 1px solid #ccc; }
$ol > li:only-child {
list-style-type: none;
}[/code]

Pada source code ul di atas, yang akan terkena style adalah elemen li bukan elemen p, sedangkan pada ol akan melakukan styling pada elemen child li yang unik. Yang menarik di sini yaitu bagaimana nanti atau berapa sering developer akan menggunakan syntax $ (selector) :D.

Location Pseudo-Classes – :any-link and :local-link

Pseudo class bisa digunakan untuk elemen yang merupakan location based. Atribut any-link bisa digunakan untuk link general, sedangkan local-link bisa digunakan untuk link-link khusus.

[code language=”css”]/* To add an icon to all internal links within your sidebar */
#sidebar a:local-link {
background: url(internal.png) 0 0 no-repeat;
}

/*To add another icon to all <em>external</em> links*/

:not(:local-link) {
background: url(external.png) 0 0 no-repeat;
}[/code]

Ini merupakan penambahan yang sangat bagus, karena bisa lebih mempermudah dalam styling link.

Linguistic Pseudo-Class – :dir

Pseudo-class dir digunakan untuk mengidentifikasi display text, dari kiri ke kanan atau sebaliknya.

[code language=”css”]
p:dir(ltr) { /* left to right */
}
div:dir(rtl) { /* right to left */
}
[/code]

Ini juga penambahan yang sangat bagus, terutama jika kita sedang membangun web dengan multi bahasa.

Reference Combinators

Mengenalkan karakter slash (/) yang memetakan hubungan antara compound selector.

[code language=”css”]

label:matches(:hover, :focus) /for/ input {
box-shadow: #fffea1 0 0 8px
}
[/code]

Contoh di atas melakukan highlight elemen INPUT ketika LABEL nya difokuskan atau hover; asosiasi ini dibuat oleh atribut for dari label.

Untuk informasi yang lebih lengkap, bisa mengunjungi link di bawah ini :

  • http://davidwalsh.name/css4-preview
  • http://www.w3.org/TR/2011/WD-selectors4-20110929/
  • http://www.webmonkey.com/2011/10/discover-whats-new-in-css-4/
  • http://www.inserthtml.com/2012/01/css4-selectors/
  • http://www.red-team-design.com/meet-the-css4-selectors

→ 111 readers

Related

Programming Cascading Style SheetsCSSCSS4Linguistic Pseudo ClassLocation Pseudo ClassProgrammingReference CombinatorsSelectorsStyle SheetsTutorial

Post navigation

Previous post
Next post

Comment

  1. whegreen says:
    March 13, 2012 at 7:30 am

    Reblogged this on green, the one and only . . . and commented:
    :

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Popular Posts

  • Rawon Nguling Malang Sejak 1942
  • Getuk Goreng Haji Tohirin Sejak 1918
  • Danau Beratan Bedugul Bali
  • Kopi Kapuhan Ketep Magelang
  • Depot Nikmat Jombang Sejak 1987
  • Kupat Tahu Pojok Magelang Sejak 1942
  • 7 Wisata Kuliner Legendaris di Surabaya yang Wajib Dicoba
  • Ayam Goreng Bu Hartin Sejak 1978
  • Danau Ciharus, Ranu Kumbolonya Jawa Barat
  • Nasi Liwet Bu Parmi Solo Sejak 1989

Recent Posts

  • Dapoer Gending Muntilan: Cita Rasa Autentik di Kota Muntilan
  • Depot Nikmat Jombang Sejak 1987
  • Alun-Alun Jombang: Ruang Publik Ikonik di Jantung Kota Santri
  • Nol Kilometer Tuban: Titik Awal Menjelajah Bumi Wali
  • Mengenal Jenis-Jenis Server: Mana yang Cocok untuk Website Anda?

Categories

Archives

Subscribe

Enter your email address to subscribe to this blog.

Join 1,224 other subscribers
Seedbacklink

Travel

  • Alun-Alun Jombang: Ruang Publik Ikonik di Jantung Kota SantriMay 4, 2025
  • Nol Kilometer Tuban: Titik Awal Menjelajah Bumi WaliApril 27, 2025
  • Leisure Trip ke Morwell: Dari Taman Bunga hingga Sushi Favorit TravelerMarch 24, 2025
  • Jalan Braga: Simbol Kejayaan Bandung di Masa KolonialJanuary 5, 2025
  • Staycation di Grand Rohan JogjaDecember 25, 2024

Culinary

  • Dapoer Gending Muntilan: Cita Rasa Autentik di Kota MuntilanMay 13, 2025
  • Depot Nikmat Jombang Sejak 1987May 10, 2025
  • Sop Buntut dan Soto Pak Sugeng YogyakartaApril 3, 2025
  • Warung Kopi Purnama Bandung: Legenda yang Bertahan Sejak 1930January 4, 2025
  • Lacamera Coffee Bandung: Tempat Nongkrong Asyik dengan Kopi BerkualitasJanuary 1, 2025

Technology

  • iOS Conference Singapore 2020November 28, 2021
  • Sinergi Coworking Space JogjaAugust 22, 2020
  • WordCamp Jakarta 2019February 12, 2020
  • Kubik Coworking & Art Space PadangApril 13, 2019
  • Redesign Aplikasi IndiHomeNovember 6, 2018
©2025 Arif Setiawan | WordPress Theme by SuperbThemes
 

Loading Comments...