CSS'y dla różnych przeglądarek, Jak to realizujecie ? Opcje

[kosmowariat]

Witam
Chciałbym się dowiedziec jak robicie CSS'y dla różnych przeglądarek (czyli w sumie dla IE6 i dla reszty) ;-)
W 99% przypadków potrzebujemy drugiego CSS dla (i tu kilka epitetów ) dla IE6. I teraz moje pytanie : który wariant jest lepszy
1) Piszemy CSS dla "reszty", kopiujemy nanosimy poprawki dla IE6 i w zależności od przeglądarki dołączamy odpowiedniego CSS'a
2) Piszemy CSS dla reszty, a później dla IE6 ale tylko nadpisując tylko klasy/elementy które się sypią i dołączamy poprzez tzw conditional comments

Chciałbym poznac wasze opinie oraz w miarę możliwosci argumenty świadczące o wyższości, któregos z rozwiązan.

Z góry THX za udział w dyskusji

Pozdrawiam

[ayeo]

Witam!

To zależy. Ogólnie już na etapie cięcia layoutu bierzesz pd uwagę IE. W idealnych sytuacjach jest wszędzie ten sam styl bez żadnych modyfikacji. Najczęściej wystarczy po prostu nadpisać margin i padding, ja robię to w tym samym pliku. Jest kilka sposobów np *margin: 0 0 0 0; każda normalna przeglądarka to olewa jako błąd składni, a IE akceptuje. Jak modyfikacji jest dużo to lepiej dać w osobnym pliku (tzw modyfikator) wszystkie hacki na IE (IE6 i trochę IE7, IE8 podobno jest ok).

Pozdrawiam!

[piotrooo89]

ja robię dwa pliki stylów. jeden dla kIEpskiego drugi dla reszty. hacki IE + komentarze warunkowe.

[kosmowariat]

chyba trochę niejasno zadałem pytanie....

[PHP] pobierz, plaintext 
<?php
/*Opcja 1*/
 
/*Plik style.css*/
.klasa1 {
   attr1 : val1;
   attr2 : val2;
}
 
.klasa2 {
    attr3 : val3; 
    attr4 : val4;
}
 
/*style_ie.css*/
 
.klasa1 {
   /* Ta klasa jest taka sama jak w pliku style.css*/
   attr1 : val1;
   attr2 : val2;
}
 
.klasa2 {
    /* ta klasa została zmodyfikowana bo w IE jest BUG */
    attr3 : val3_for_ie; 
    attr4 : val4;
}
 
/*w tej opcji załączamy plik style_ie.css dla IE6 lub style.css dla reszty (albo jeden albo drugi)*/
?>
[PHP] pobierz, plaintext 

[PHP] pobierz, plaintext 
<?php
/*Opcja 2*/
 
/*Plik style.css*/
.klasa1 {
   attr1 : val1;
   attr2 : val2;
}
 
.klasa2 {
    attr3 : val3; 
    attr4 : val4;
}
 
/*style_ie.css*/
 
/* nadpisujemy tylko wartosci dla klasa2 */
 
.klasa2 {
    /* ta klasa została zmodyfikowana bo w IE jest BUG */
    attr3 : val3_for_ie; 
    attr4 : val4;
}
 
/*w tej opcji zawsze załączamy plik style.css a dla IE6 i style_ie.css poprzez komentarz warunkowy */
?>
[PHP] pobierz, plaintext 

@ayeo : to jest jakieś rozwiązanie, ale wolałbym unikac hacków w stylu *margin : 0;

Ten post edytował kosmowariat 4.03.2009, 14:45:04

[sowiq]

A po co masz dwa razy powtarzać to samo? Jak przyjdzie Ci jakaś duperela np. zmiana koloru linka, to musisz w 2 plikach CSS zmieniać. Poza tym bawisz się w komentarze warunkowe typu 'if not IE'.
Moim zdaniem najłatwiej jest stworzyć arkusz, w którym będziesz miał tylko właściwości, które chcesz nadpisać dla IE, potem jeden 'if' i po sprawie.
Oczywiście zawsze lepiej napisać wszystko tak, żeby działało na tym samym arkuszu styli, ale to czasami nieosiągalne niestety.

[DreeD]

Kiedys uzywalem komentarzy warunkowych.. teraz mi wystarcza male CSS'owe hacki dla IE 6 i 7, np.

[HTML] pobierz, plaintext 
div.class 
{
margin: 10px;
*margin: 10px; /* margin dla IE7, normalne przegladarki zignoruja atrybuty z * przed nazwa, IE nie  .Wazne zeby podawac je na samym koncu listy atrybutow dla tego selektora, inaczej te dla pozostalych przegladarek je 'nadpisza'*/
}
 
* html div.class  /* selektor dla IE6 */
{
margin: 10px;
}
[HTML] pobierz, plaintext 

Troche designow sie juz naciachalem, i do tej pory mi (prawie) nie potrzeba zadnych dodatkowych kombinacji. Wg. mnie to jest najprostsza metoda z mozliwych, i nie podwajasz niepotrzebnie fragmentow CSS'ow (np. w osobnym pliku tylko dla IE), to wszystko iles tam zajmuje, i musi sie z serwera pobrac majac jakis tam wplyw na predkosc wczytywania sie strony... Niby to male pliki, ale przy duzych projektach takich 'malych plikow' moze sie czasem nazbierac calkiem sporo.

[erix]

Kiedys uzywalem komentarzy warunkowych.. teraz mi wystarcza male CSS'owe hacki dla IE 6 i 7, np.

A po co karać użytkowników normalnych przeglądarek transferem hacków dla śmIEcia? Poza tym, w większości nie przechodzą one walidacji W3C.

z serwera pobrac majac jakis tam wplyw na predkosc wczytywania sie strony

To już problem użyszkodników Explodera.

Dla IE wstawiam z użyciem komentarzy warunkowych, dla Firefoksa (sic!) - XBL - http://eriz.pcinside.pl/weblog/komentarze-...foksie-196.html

Czemu dla Firefoksa? A czy normalnie obsługuje :before i :after?

[.radex]

dla Firefoksa (sic!) - XBL

są też inne sposoby, "czysto"-CSS-owe

[erix]

Owszem, ale wymagają śmiecenia arkusza dla przeglądarek renderujących CSS wg specyfikacji.