Personalizowanie styli CSS dla Google Chrome

Czas czytania: 3 minut

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 */
Zmieniamy kolor tła w zależności od przeglądarki

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

Testowy tekst dla Chrome 29+

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/

Testowy tekst dla Google Chrome 22-28
@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: