Marzec 5, 2010 Kategorie: Internet Explorer, Przeglądarki, xhtml/css - 2 Comments

Hacki CSS oraz komentarze warunkowe

CSS HACK
Jednym z wielu sposobów radzenia sobie z niesfornymi przeglądarkami są Hacki CSS, pozwalają zastosować dany styl tylko dla wybranej przeglądarki co umożliwia niejednokrotnie poprawienie błędu. Jednak musimy pamiętać, że hacki wymyślali i odnajdywali koderzy więc nie są one zgodne ze standardami, a ich interpretacja wraz z rozwojem przeglądarek może kiedyś spowodować, że najnowsza wersja danej przeglądarki wyświetli nam coś zupełnie niepożądanego. Co prawda jest to mało prawdopodobne, ale jednak mimo wszystko trzeba brać taką ewentualność pod uwagę. Poniżej zaprezentowałem Hacki, dla najpopularniejszych przeglądarek.

Hacki CSS

Hacki dla selektorów

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/*** IE6 ***/
* html #box {  color: red; }


/*** IE6, IE7 ***/
*:first-child+html #box { color: red }


/*** IE7 ***/
*+html #box {  color: red; }


/*** IE7, FF, Saf, Opera  ***/
html>body #box { color: red }


/*** IE8, FF, Saf, Op (all oprócz IE6,7) ***/
html>/**/body #box { color: red }


/*** FF 2.x ***/
#box, x:-moz-any-link { color: red; }


/*** FF3.x ***/
#box, x:-moz-any-link, x:default { color: red; }


/*** Opera < 9.5 ***/
html:first-child #box { color: red; }


/*** Opera 9.5/10 ***/
body:first-of-type #box { color: red; }


/*** Safari ***/
html[xmlns*=""] body:last-child #box { color: red; }


/*** Safari 4 ***/
body:first-of-type #box { color: red; }


/*** Chrome1+, saf3+ ***/

@media screen and (-webkit-min-device-pixel-ratio:0) {
 #box  { color: red  }
}

Hacki dla atrybutów

1
2
3
4
5
6
7
8
9
10
11
12
/*** IE6 ***/
#box  { _color: red;  }

#box { color: red; !ie}


/*** IE6, IE7 ***/
#box  { *color: red;  }


/*** IE6, IE7, IE8 ***/
#box  { color: red\9;  }

Komentarze warunkowe Internet Explorer

Podpiąłem ten temat pod Hacki z bardzo prostego względu hacki mają za zadanie zmienić styl w konkretnej przeglądarce komentarze warunkowe mają dokładnie to samo zastosowanie. Zostały wprowadzone przez Microsoft i chwała im za to, dzięki temu rozwiązaniu możemy dodać nasz kod CSS czy HTML widoczny tylko dla IE lub dla wszystkich tylko nie IE. Komentarze wklejamy do pliku z kodem HTML.

Kod tylko dla IE

1
2
3
<!--[if IE]>
Kod znajdujący się między tymi znacznikami zobaczy wyłącznie IE
<![endif]-->

Kod nie dla IE

1
2
3
<!--[if !IE]>< -->
Kod znajdujący się pomiędzy tymi znacznikami zobaczą wszystkie przeglądarki tylko nie IE
<!-- ><![endif]-->

Wyrażenia w nawiasach kwadratowych możemy zmieniać. Wybierać konkretne wersje IE.
A robimy to w następujący sposób:

1
2
3
4
5
6
7
   [if IE 6]              <!-- dla IE 6 ( wyłącznie ) -->
   [if gt IE 5]          <!-- dla IE wyższego niż 5 ( gt wyższy ) -->
   [if gte IE 5]        <!-- dla IE wyższego bądź równego 5 ( gte wyższy bądź równy ) -->
   [if lt IE 7]           <!-- dla IE niższego niż 7 ( lt niższy ) -->
   [if lte IE 7]         <!-- dla IE niższego bądź równego 7 ( lte niższy bądź równy ) -->
   [if !IE 8]             <!-- dla IE różnego od 8 ( ! różny ) -->
   [if (IE 5)|(IE 6)]  <!-- dla IE 5 lub IE 6 ( | spójnik ) -->

2 Responses to “Hacki CSS oraz komentarze warunkowe”

  1. Michno mówi:
    07-03-2010 o 21:21

    Dla IE 6 można jeszcze skorzystać z takiego komentarza w CSS:

    1
    div#box { color: red; !ie}

    Też działa ;]

  2. admin mówi:
    08-03-2010 o 15:05

    Dodałem do listy

Leave a Reply

«
»