Kullanarak <style> < etiketleri;body> diğer HTML ile

SORU

13 Mayıs 2010, PERŞEMBE

Kullanarak <style> < etiketleri;body> diğer HTML ile

<html>
  <body>
    <style type="text/css">
      p.first {color:blue}
      p.second {color:green}
    </style>

    <p class="first">Hello World</p>
    <p class="second">Hello World</p>

    <style type="text/css">
      p.first {color:green}
      p.second {color:blue}
    </style>

    <p class="first">Hello World</p>
    <p class="second">Hello World</p>
  </body>
</html>

Nasıl bir tarayıcı olmayan bitişik olan css render etmesi mi gerekiyor? Bazı veri yapısı bir sayfadaki tüm css stilleri kullanarak oluşturmak gerekiyor ve işleme için kullanılır?

Veya render tarzı bilgileri kullanarak sırayla mı görür?

CEVAP

30 Mayıs 2013, PERŞEMBE

Diğerleri zaten belirttiğim gibi, HTML 4 <style> <head> bölümüne yerleştirilecek etiketi çoğu tarayıcı body içinde <style> etiketleri veriyor olsa da () gerektirir.

Ancak, HTML 5 <style> etiketinin ana içinde kapsamlı stil sayfaları oluşturmak için olanak scoped attribute element içerir. Bu da sana <body> öğesi içinde <style> etiketleri yerleştirmek için sağlar:

<!DOCTYPE html>
<html>
<head></head>
<body>

<div id = "scoped-content">
    <style type = "text/css" scoped>
    h1 { color: red; } 
    </style>

    <h1>Hello</h1>
</div>

<h1>World</h1>

</body>
</html>

Eğer scoped, destekleyen HTML 5 desteği ile yukarıdaki kod oluşturma stil sayfasını sınırlı kapsamı göreceksiniz.

Sadece bir tane varönemliuyarı...

Dönemde (Mayıs, 2013) neredeyse hiçbir ana tarayıcı şu anda scoped özniteliği destekler bu cevap yazıyorum. (Her ne kadar görünüşte developer builds of Chromium destek.)

ANCAK, bu soru ile ilgilidir scoped öznitelik ilginç bir ima var. Gelecekteki tarayıcılar standart) <body> (<style> elemanları belirlenmektedir.) içinde <style> öğeleri sağlamak için zorunlu olduğu anlamına gelir

Yani, bu verilen:

Hemen hemen her mevcut tarayıcı şu anda scoped özniteliği yok sayar
Hemen hemen her mevcut tarayıcı şu anda <body> içinde <style> etiketleri sağlar
İleride uygulamaları (kapsamlı) <body> içinde <style> etiketleri izin vermek için gerekli olacaktır

...kelimenin tam anlamıyla vardırzararı yok<style> etiketleri yerleştirerek * scoped bir öznitelik ile vücut içinde, size yardımcı olmak için geleceğe onları. Tek sorun, geçerli tarayıcılar olmaz aslındakapsamını sınırlamakstil - tüm belge için geçerli olacak. Ama asıl nokta, tüm pratik amaçlar için, senin içinolabilir<style> etiketleri vardır <body> içinde verilmiştir:

Geleceğe yönelik scoped öznitelik ekleyerek HTML
Şu an itibariyle, <body> içinde stil aslında kapsamlı hiçbir ana tarayıcı desteği henüz var çünkü) olacak

HTML elemanları kızdırmak için elbette hariç, * ...

Son olarak, HTML içinde CSS gömme kötü uygulama ortak (ama) öznel iddiası ile ilgili olarak, unutulmamalıdırbütün meselescoped öznitelik, geliştiriciler modülleri veya sendikasyon içerik olarak HTML parçaları almak için izin tipik modern geliştirme çerçeveleri karşılamak için. Çok uygun CSS gömülüsadeceözel tasarımlar ile kapsüllü, modüler bileşenleri geliştirmek için HTML belirli bir parça için geçerlidir.

Bunu Paylaş: