przeglądarki internetowe
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.
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.
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ą).
Style oddziaływają na:
.selector:not(*:root) {}W miejscu .selector wpisujemy nazwą klasy jaką posiada nasz obiekt.
Podobnie działa:
@supports (-webkit-appearance:none) {}Jak widać nie tylko Chrome korzysta z tych rozwiązań
.selector { (;property: value;); }.selector { [;property: value;]; }var isChromium = !!window.chrome;Jedynym rozwiązaniem, który tak naprawdę wpływa tylko na Chrome jest:
<script>
var isChrome = !!window.chrome && !!window.chrome.webstore;
</script>
To oczywiście kod JS (sprawdzający czy nasza przeglądarka to na pewno Chrome) do którego możemy dopisać odpowiedni kod.
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 {} }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.
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
}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:
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…