Alternatif CSS @scope

tmp7
Feb 14

Per posting ini, CSS @scope tidak ada fallback support. Tapi kamu tetap bisa bikin alternatif.

html
[ .widget-Post
  
  [ .inner id="top"
    [ .title
      Post title
    ]
  ]
  
  [ .widget-Comment .sub-widget
    [ .inner id="bottom"
      First comment
    ]
  ]
  
]

Pada HTML di atas, kalau kita mau memberi background kuning pada .inner#top saja, maka CSS @scope sebagai berikut:

css
.widget-Post {
    
  @scope (&) to (.sub-widget) {
    .inner {
      background: yellow;
    }
  }
    
}

Kalau tanpa CSS @scope, sebenarnya kita cukup beri nama class yang yang lebih spesifik saja, misalnya jadi .inner-Post dan .inner-Comment.

css
.widget-Post {
  .inner-Post {
    & {
      background: yellow;
    }
  }
}

Penamaan kapital Post di sini disengaja supaya lebih mudah dikenali saja.

Komentar