Ogólnie przyjmuje się że przeglądarki internetowe takie jak Chrome i Firefox mają takie same albo bardzo zbliżone interpretowanie styli CSS.
Przeważnie różnice są znikome. Można powiedzieć 1px w tą lub tamtą. W efekcie nie wpływa to istotnie na wygląd strony. Bywa jednak i tak, że różnice są całkiem spore. A całość niekoniecznie dobrze wygląda. Zdarza się też, że celowo chcemy inaczej coś wyświetlić.
UWAGA: Przeglądarki ciągle się rozwijają. Część z opisanych poniżej metod może więc już nie działać lub działać w inny sposób.
Dodawanie przedrostka (Prefix) do właściwości
Prawdopodobnie każdy z was wielokrotnie spotykał się z sytuacją kiedy przez nazwą właściwości CSS coś się znajdowało np:
-webkit-
To tak zwane przedrostki. Powodują one, że właściwość jest odczytywana tylko przez konkretną przeglądarkę internetową. W tym wypadku -webkit- oddziałuje właśnie na Chrome, ale nie tylko (również na Safari). Przykładowo:
background: #1e5799; /* Old browsers */
background: linear-gradient(to bottom, #d6722a 0%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
background: -webkit-linear-gradient(top, #e02cb3 0%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: -moz-linear-gradient(top, #1e5799 0%, #7db9e8 100%); /* FF3.6-15 */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#337517', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
Powyższy kod dodaje jako tło gradient. Na samym końcu w komentarzu znajduje się informacja o tym na, którą przeglądarkę działa konkretna linijka. Jak widać daje nam to pewne możliwości personalizowania Chrome do naszych potrzeb.
Personalizowanie klas dla Google Chrome
Inną opcją na którą trafiłam szukając informacji przydatnych do aktualizacji tego wpisu jest „ukrywanie klas” tak by były one widoczne jedynie dla danej przeglądarki (w teorii – bo praktyka swoją drogą).
Selector Hacks
Style oddziaływają na:
- Chrome *
- Safari *
- Opera ≥ 14
- Android *
.selector:not(*:root) {}
W miejscu .selector wpisujemy nazwą klasy jaką posiada nasz obiekt.
Podobnie działa:
- Chrome ≥ 28
- Safari ≥ 9
- Internet Explorer/Edge >= 12
- Opera ≥ 14
@supports (-webkit-appearance:none) {}
Jak widać nie tylko Chrome korzysta z tych rozwiązań
Property/Value Hacks
.selector { (;property: value;); }.selector { [;property: value;]; }
- Chrome ≤ 28
- Safari ≤ 7
- Opera ≥ 14
JavaScript Hacks
var isChromium = !!window.chrome;
- Chrome *
- Opera ≥ 14
- Android 4.0.4
Jedynym rozwiązaniem, który tak naprawdę wpływa tylko na Chrome jest:
<script>
var isChrome = !!window.chrome && !!window.chrome.webstore;
</script>
- Chrome ≥ 14
To oczywiście kod JS (sprawdzający czy nasza przeglądarka to na pewno Chrome) do którego możemy dopisać odpowiedni kod.
Media Query Hacks
Dla Chrome w wersji 29+
/* Chrome 29+ */
@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
.selector1 { property:value; }
}
Author: Jeff Clayton
Dla Chrome w wersji 22-28
/* Chrome 22-28 */
@media screen and(-webkit-min-device-pixel-ratio:0) {
.selector2 {-chrome-:only(;
property:value;
);}
}
Author: Jeff Clayton
źródło: https://jeffclayton.wordpress.com/2015/08/10/1279/
@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector {} }
- Chrome ≥ 29
- Opera ≥ 16
Tak naprawdę nie wiem jak długo te metody będą działać – nowe wersje przeglądarek mogą działać nieco inaczej. Dlatego warto jest zweryfikować czy wszystko poprawnie działa.
See the Pen Untitled by Aura (@Julka85) on CodePen.
Style w innym pliku
Kod podobnie jak w przypadku IE należy umieścić w kodzie strony pomiędzy znaczkami <head></head>.
<script type="text/javaScript">
if (-1 != navigator.userAgent.indexOf("KHTML")) {
document.write('<link rel="stylesheet" href="style2.css" />'); }
</script>
Plikiem z którego pobierane będą informacje dla chroma są style2.css. Kod działa w starszych wersjach Google Chrome. Niestety nie bardzo mam możliwość ustalić na które wersje konkretnie działa
lub inaczej
if (navigator.appVersion.indexOf("Chrome/") != -1) {
// modify button
}
Z czego najlepiej korzystać
Po pierwsze to w cale bym nie zmieniała styli tej przeglądarki. Potraktowała bym ją jako główną. Manipulowała bym np. Firefox, IE lub Safari. Te zmiany będą dużo łatwiejsze – ponieważ dla tych przeglądarek przewidziano możliwość osobnych styli.
Po drugie jeśli chcemy wprowadzać duże zmiany to lepiej tworzyć style w osobnym pliku. W nowym pliku będziemy mogli nadpisywać style CSS.
źródła:
- https://jeffclayton.wordpress.com/2015/08/10/1279/
- http://www.forum.optymalizacja.com/index.php?showtopic=117107
- http://mynthon.net/howto/webdev/css-hacks-for-google-chrome.html
- http://browserhacks.com/
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.