Stylizacja znaczników HTML5 w IE bez scenariusza

23 Feb 10:52 am


Original: http://blog.whatwg.org/styling-ie-noscriptPoprzedni post omówione jak włączyć stylistykę nowych elementów HTML5 w IE za pomocą prostego skryptu. Jednakże, jeśli użytkownik ma w przeglądarce wyłączone, układ prawdopodobnie rozpadnie się źle.

To znaczy, że jeśli zależy Ci na użytkowników IE z wyłączony w przeglądarce, nie można korzystać z nowych elementów, tak?

Niekoniecznie.

Istnieje kilka sztuczek obejścia uszkodzonego stylizacji w IE DOM i ograniczony:

  •     Wiesz co DOM wygląda i kierować inne elementy niż nowych elementów do stylizacji.
  •     Użyj selektora uniwersalnego (*) do celu odpowiedni element.
  •     Użyj NoScript.

Co to znaczy?
Kieruj innych elementów stylizacji

Rozważ masz następujący znacznik:

<body>
<Article>

</ Article>
<NAV>
<ul>

</ Ul>
</ Nav>
</ Body>

Zamiast tego:

* {Margin: 0; padding: 0}
body {background: silver}
artykuł {border: solid; background: white; margin-left: 10em}
nav {position: absolute; top: 0; left: 0; width: 10em}

… To zrobić:

* {Margin: 0; padding: 0}
html {background: silver}
body {border: solid; background: white; margin-left: 10em}
ul {position: absolute; top: 0; left: 0; width: 10em}

Teraz oczywiście masz zamiar stosować inne elementy ul niż nawigacji, więc jak mamy zdobyć bardziej szczegółowe, w którym elementem kierować? Oczywistym rozwiązaniem jest ustawienie klasy lub id na ul elementu, ale nie ma innego rozwiązania, które mogą być bardziej wygodne, w niektórych przypadkach, co doprowadza mnie do …
Korzystanie z selektora uniwersalnego

W zależności od sytuacji, i czy zależy Ci na IE6, czy nie, można użyć selektora uniwersalnego kierować element chcesz.

Rozważ masz następujący znacznik:

<body>
<Article>
<header>
<h1> … </ h1>

 

<p> … </ p>
</ Header>

… I chcesz styl w P, który jest w nagłówku, można byłoby to zrobić w normalnym przypadku:

header p artykuł {font-weight: bold}

Ale w IE, artykuł, header, h1 i elementy p są wszystkie rodzeństwo, więc wybór nie pasuje.

Tak więc można się spodziewać to pasuje, ale nie (IE nie pozwala na wybranie nieznane elementy za pomocą selektorów typu):

artykuł + nagłówek + h1 + p {font-weight: bold}

Jednak to mecze:

* + * + h1 + p { font-weight:bold }”>body> * + * + h1 + p {font-weight: bold}

Korzystanie NoScript

Powyższe techniki nie powinny zepsuć innych przeglądarek (IE lub gdy jest włączona w przeglądarce), ale jeśli wolisz (lub jeśli coś się zepsuć), można użyć osobnego arkusza stylów dla IE, gdy skryptów jest wyłączona tylko przy użyciu następującego znaczników :

<head>
<- [If IE]>
<noscript> <link rel=”stylesheet” href=”ie-noscript.css”> </ noscript>
<[Endif] ->

Konkluzja

Powyższe techniki mogą nie być bardzo skalowalne lub może dobrze wpłynąć maintanence, ale punkt tego artykułu jest pokazanie, że można korzystać z nowych elementów, a jednocześnie wspieranie IE z wyłączona w przeglądarce.

 

Comments are closed