Podłączanie CSS dla poszczególnych przeglądarek. Hacki CSS dla wszystkich przeglądarek: od IE po Opera CSS dla różnych przeglądarek

Opublikowano: 07.06.2011

Jeszcze raz opiszę znane wszystkim hacki, które opisałem już 100 500 razy dla różnych przeglądarek.

Podam definicję hacka ze strony internetowej Vlada Merzhevicha htmlbook.ru: „Hack to zestaw technik mających na celu ustawienie stylu określonego elementu dla jednej przeglądarki, który różniłby się od stylu dla innych przeglądarek”.

Przede wszystkim interesowały mnie aktualne działające rozwiązania, dlatego wszystkie przykłady testowałem w najnowszych wersjach przeglądarek, z wyjątkiem IE (Opera 11, Firefox 4, Chrome 13, Safari 5, IE 8).

Internet Explorera

Najbardziej „niepodobna” przeglądarka od innych. Co więcej, każda wersja jest „inna” na swój sposób. Zaakceptujmy jednak rzeczywistość taką, jaka jest. Ale rzeczywistość jest taka, że podczas kodowania jest wystarczająco dużo hacków dla różnych wersji IE, że należy je umieścić w osobnym pliku i załadować tylko dla tej rodziny przeglądarek. Aby to zrobić, w sekcji Napiszmy komentarz w dokumencie HTML rozpoznawalnym przez przeglądarkę Internet Explorer.

Jako warunku możesz użyć następujących słów kluczowych:

IE – dowolna wersja przeglądarki Internet Explorer;
IE 7 – Internet Explorer 7;
IE 8 - Internet Explorer 8;
IE 9 – Internet Explorer 9;
lt - numer wersji przeglądarki mniejszy niż podany;
gt - numer wersji większy niż podany;
lte - numer wersji mniejszy lub równy podanemu;
gte - numer wersji przeglądarki większy lub równy podanemu.

Być może osobno odnotuję inny hack dla IE 7: gwiazdka przed nazwą selektora. Na przykład:

#przykład (
Zielony kolor ;
* kolor czerwony ;
}

Chrome i Safari

Hack dla przeglądarek opartych na silniku webkit - Chrome i Safari:

@media screen i (-webkit-min-device-pixel-ratio:0) (
#przykład (
kolor czerwony;
}

}

Firefoksa

@-moz-prefiks adresu URL-dokumentu() (
#przykład (
kolor czerwony;
}

}

Opera

Nie ma uniwersalnych hacków dla Opery! Tak, oczywiście, w Internecie można znaleźć hacki do Opery, ale niestety te informacje są trochę nieaktualne. Kiedyś był hack, ale wszystko wyszło:

@media all i (min-width:0px) (

}

Hmm, jeśli istnieją hacki dla wszystkich przeglądarek, ale nie dla Opery, nasuwa się logiczny wniosek: najpierw trzeba zaprojektować dla Opery, a następnie dopracować układ dla innych przeglądarek. Jak ci się podoba?

Aktualizacja 09.08.11: Najnowsze doniesienia z frontu: na Habré znaleziono hack do Opery. Lubię to:

@media all i (-webkit-min-device-pixel-ratio:10000),
nie wszystkie i ( -webkit-min-device-pixel-ratio : 0 ) (
#przykład ( kolor : czerwony ; )
}

Jednakże zdecydowanie odradzam jego używanie. Jako argument przytoczę komentarz Vadima Makeeva (alias Pepelsbey): „Te hacki opierają się na niekompletnej lub błędnej obsłudze zapytań o media i mogą przerwać każdą drobną aktualizację przeglądarki, która naprawia lub dodaje obsługę. Nie strzelaj sobie w stopę, używając potencjalnie niebezpiecznych hacków”.. I tak właśnie stało się z pierwszym hackiem do Opery wspomnianym w tym artykule.

Na tej podstawie nadal wierzymy, że najlepszym hackiem dla przeglądarki Opera jest kompetentny, prawidłowy układ.

Jak wiadomo, nie wszystkie przeglądarki traktują pliki CSS w ten sam sposób. Zasadniczo problemy pojawiają się w przypadku starych wersji małych dzieł oprogramowania Internet Explorera(wersja 7 i starsze). Nawiasem mówiąc, jeśli problem występuje w nowoczesnych przeglądarkach (takich jak Opera, Mozilla Firefox, Chrome), to I wysoce zalecane przejrzyj układ strony.

Więc oto jest. Wystąpił problem z przeglądarkami. I znam co najmniej trzy sposoby rozwiązania tego problemu.

Metoda 1. Najbardziej poprawne

Style dla przeglądarek, które nie rozumieją poprawnie Twojego css, są zapisywane w osobnym pliku. Zwykle ta przeglądarka, jak powiedziałem, jest Internet Explorera, a pliki nazywane są w ten sposób fix-ie.css

... ... ...

Zmieniamy się nazwaTematy do prawdziwej nazwy Twojego motywu - i kiedy go otworzysz Internet Explorera wersje 7 i starsze - ten plik zostanie dodany do ogólnego zestawu plików stylów, a nawet zapisany w pamięci podręcznej, jeśli włączono buforowanie.

Linia ta odpowiada za wersję przeglądarki, do której zostanie podłączony plik stylu:

Если перевести на русский язык, то будет примерно так: "Если браузер пользователя - IE , то подключить таблицу стилей из файла css/ie.css ".

Если необходимо указать конкретную версию браузера, то вместе с "IE " необходимо поставить ещё и номер версии. Например так:

Как не трудно догадаться, стиль будет применён только для браузеров IE версии 6 . Также бывает необходимо указать таблицу стилей для браузеров ниже определённой версии. В таком случае, используется данный синтаксис:

Ten styl zostanie zastosowany do wszystkich wersji przeglądarek IE poniżej wersji 6. Jeśli zamiast „ Por" umieścić " lte", oznaczałoby to wersję niższą lub równoważną wersji 6.

W większości przypadków ta wiedza jest już wystarczająca i powinniśmy starać się nie wymagać więcej. Są jednak sytuacje, w których metody te nie są całkowicie uzasadnione. Na przykład w sytuacji, gdy w ogromnym Plik CSS, tylko 1-2 style wymagają specjalnego wyglądu dla poszczególnych przeglądarek. W tym przypadku głupotą jest tworzenie osobnego, ogromnego pliku, który następnie jest łączony za pomocą skryptów lub za pomocą takich warunków. Dlatego je wymyślono Hacki CSS dla przeglądarek i do tego teraz przejdziemy. I zaczniemy od:

1) Internet Explorera. The Włamanie do CSS działa dla wersji IE7 i poniżej. Z mojego doświadczenia wynika, że przeglądarka IE8 Jest już bardzo przyzwoicie, więc nie miałem jeszcze z nim żadnych problemów. Ale dla przeglądarek IE7 i poniżej pokazuję hack:

P(
* margines u góry: 30px; # Dla przeglądarek IE7 i starszych.
}

Jak widać przed drugą właściwością” górny margines„jest symbolem” * ". To jest to Włamanie do CSS. Oznacza to, że jeśli umieścisz „*” przed nazwą właściwości, ta właściwość zostanie zastosowana tylko do przeglądarek IE7 i poniżej. Wniosek: dla wszystkich przeglądarek” górny margines„będzie miało znaczenie” 20 pikseli" i dla przeglądarek IE7 i poniżej w znaczeniu " 30 pikseli". Jeśli chcesz określić styl tylko dla IE6 i poniżej(często się to zdarza, ponieważ IE7 rzeczy są znacznie lepsze i najczęściej nie ma potrzeby edytowania stylu dla tej przeglądarki), potem jest inny Włamanie do CSS:

P(
margines u góry: 20 pikseli; # Dla wszystkich przeglądarek
_margines u góry: 30px; # Dla przeglądarek IE6 i starszych.
}

Jak nie trudno zauważyć, drugą właściwość poprzedza znak „_”, czyli Włamanie do CSS dla przeglądarek IE6 i poniżej.

2) Mozilla Firefox. The Włamanie do CSS działa tylko dla przeglądarek Mozilla Firefox. Oto jego przykład:

P, x:-moz-any-link (
margines u góry: 30 pikseli;
}

Ten przykład raportuje, że styl selektora „ P" będzie dotyczyć tylko przeglądarek Mozilla Firefox, a wszystkie inne przeglądarki zignorują ten styl.

3) Opera. Ten Włamanie do CSS używany w przeglądarkach Opera. Przykład jego użycia:

* |html p (
margines u góry: 30 pikseli;
}

Tutaj też myślę, że wszystko jest jasne.

To wszystko, co chciałem napisać w tym artykule. Przypominam jednak jeszcze raz, że Hacki CSS- to jest złe, bardzo często nie przechodzą kontroli ważności kodu, a to już nie jest dobre. Ogólnie rzecz biorąc, staraj się ich nie używać lub używaj ich tylko w ostateczności. Generalnie radzę się z tym zapoznać, wtedy będziesz miał mniej problemów związanych z różną prezentacją stylów w przeglądarkach.

W tym artykule przyjrzymy się, czym są prefiksy przeglądarki, dlaczego istnieją i jak ich używać w CSS.

Co to są przedrostki?

Twórca stron internetowych, który zaczyna studiować teoretyczne podstawy CSS i wykorzystuje tę wiedzę w praktyce, może napotkać problemy przy rozpatrywaniu przykładów z życia. Może to spowodować, że źle zrozumie co się dzieje i zniechęci do dalszej nauki tej technologii.

Na przykład, rozważając style witryny, twórca stron internetowych może napotkać właściwości zawierające na początku niezrozumiałe słowa: -webkit-, -moz-, -ms- itp.

* ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; )

Co to jest? Tak naprawdę wszystko jest proste, te dziwne słowa to przedrostki następujących przeglądarek:

-webkit-: przeglądarki Chrome, Safari, Opera;
-moz-: przeglądarka Mozilla Firefox;
-ms-: przeglądarka Internet Explorer.

Zatem jeśli przed nazwą właściwości znajduje się przedrostek, oznacza to, że ta właściwość jest zaimplementowana i będzie używana wyłącznie w określonej przeglądarce. Wszystkie inne przeglądarki zignorują tę właściwość, ponieważ dla nich ten przedrostek jest nieznany.

Powody pojawienia się przedrostków?

Powodów pojawienia się przedrostków było kilka:

Aby uwzględnić w przeglądarce eksperymentalne właściwości CSS, które nie zostały jeszcze zatwierdzone przez standard. Dlatego dostawcy przeglądarek testują i przedstawiają sugestie przed przyjęciem właściwości CSS do standardu.
Aby rozwiązać problemy z kompatybilnością między przeglądarkami.
Aby stworzyć własne właściwości, które nie są zawarte w standardzie CSS, ale mogą się w nim po pewnym czasie pojawić.

Gdy właściwość eksperymentalna zostanie zatwierdzona w normie i przetestowana w przeglądarce, zwykle usuwa się z niej przedrostek.

Jak używać przedrostków?

Rozważ następujący kod jako przykład:

* ( -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; )

Ten kod stosuje właściwości CSS, które zmieniają algorytm obliczania szerokości i wysokości dla wszystkich elementów strony internetowej. Pierwsza właściwość CSS -webkit-box-sizing z wartością border-box przeznaczona jest dla przeglądarek korzystających z silnika webkit (Safari) lub Blink (Chrome, Opera, Yandex.Browser). Druga właściwość CSS -moz-box-sizing z wartością border-box przeznaczona jest dla przeglądarek korzystających z silnika Gecko (Mozilla Firefox). Ostatnia właściwość CSS przeznaczona jest dla przeglądarek, w których właściwość została już przetestowana i zaimplementowana zgodnie ze standardem.

Stosując przedrostki dla właściwości CSS należy pamiętać, że należy je umieścić przed właściwością CSS bez przedrostka. Dlaczego jest to takie ważne? Jest to istotne, ponieważ jeśli pewnego dnia przeglądarka zaimplementuje oryginalną właściwość (bez przedrostka), to zostanie ona użyta (ponieważ znajduje się na końcu), a nie jej wersja eksperymentalna.

Na przykład: zastosowanie właściwości CSS do wszystkich elementów strony internetowej w przeglądarce Google Chrome w wersji 40.

Na powyższym obrazku widać, że oryginalna właściwość box-sizing została już zaimplementowana w tej przeglądarce, a ponieważ znajduje się na końcu, przeglądarka używa jej, a nie powyższej właściwości -webkit-box-sizing.

Jak sprawdzić obsługę konkretnej właściwości w przeglądarce?

Stronę, na której można sprawdzić, czy dana właściwość jest zaimplementowana w konkretnej przeglądarce, można znaleźć pod linkiem poniżej. Ponadto strona pokazuje procentową liczbę użytkowników korzystających z tej wersji przeglądarki.

Strona internetowa „Czy mogę skorzystać z…”

Na przykład: sprawdźmy, jak właściwość transform jest implementowana w przeglądarkach.

Na stronie CanIUse przeglądarki są oznaczone różnymi kolorami w zależności od stanu obsługi określonych właściwości lub tagów:

Czerwony prostokąt to przeglądarka, w której ta właściwość nie jest zaimplementowana;
Zielony prostokąt z łącznikiem znajdujący się w prawym górnym rogu to przeglądarka, w której ta właściwość jest używana poprzez przedrostek;
Jasnozielony prostokąt to przeglądarka, w której ta właściwość jest częściowo zaimplementowana;
Zielony prostokąt to przeglądarka, w której ta właściwość jest zaimplementowana zgodnie ze standardem.