Pewnie jako programista / koder frontendu miał nie raz taką sytuację lub bojowe zadanie od szefa pod tytułem “Wykonać lub pociąć stronę, tak żeby było w każdej przeglądarce identycznie” ? Ja sam nie raz miałem takie sytuacje i oczywiście robiłem bez problemu te bojowe zadania.
Termin Cross-browser to inaczej mówiąc zdolność wykonania strony internetowej pod kątem każdej wersji przeglądarki (Internet Explorer, Firefox, Opera, Chrome i tak dalej) za pomocą: hacków czy trików w CSS, skryptów JavaScript lub jQuery, nawet w PHP też jest możliwe.
Tego tematu będę często poruszać na łamach mojego bloga, gdyż mam dużo nazbieranych materiałów i doświadczenia w kodowaniu lub pocięciu stron internetowych pod kątem każdej wersji przeglądarki. W tym wpisie opiszę kilka podstaw i zasad Cross-browser, które warto będzie wiedzieć zanim będę opisywać szczegółowo w następnych wpisach.
Od jakiej przeglądarki zacząć kodować CSS
Tu już mamy na dzień dobry krytyczne pytanie “Jakiej przeglądarki używają nasi użytkownicy?”, pewnie że większość z nas pomyśli – Internet Explorer. Oczywiście ciężko z tym zgodzić, bo trochę na tak i trochę na nie. Najlepiej to sprawdzić na przykład na podstawie statystyk zainstalowanych na swojej stronie internetowej: Google Analytics czy Gemius, albo na podstawie popularnego portalu – w3schools.
A więc wyniki wyglądają tak:
Google Analytics
Na podstawie mojego bloga QMike, wyciągnąłem dane z ostatniego miesiąca i prezentuje tak następująco:
- Firefox – 59,48%
- Chrome – 18,41%
- Opera – 9,75%
- Internet Explorer – 6,46%
- Safari – 2,75%
Gemius
Na podstawie rankingu gemiusRanking, dane z ostatniego miesiąca:
- Firefox – 48,84%
- Internet Explorer – 27,75%
- Chrome – 11,42%
- Opera – 10,06%
- Safari – 0,91%
w3schools
Na podstawie rankingu w portalu w3schools, dane z grudnia 2010 roku:
- Firefox – 43,5%
- Internet Explorer – 27,5%
- Chrome – 22,4%
- Safari – 3,8%
- Opera – 2,2%
Jak widać na podstawie powyższych statystyk – królują głównie Firefox, Internet Explorer i Chrome jak na dzisiejsze czasy, a więc moim zdaniem powinniśmy zacząć kodowanie CSS od przeglądarki Firefox, a następnie walczyć z Internet Explorer stosując różnego rodzaju trików i hacków CSS (nie sądzę, żeby odbyło się bez problemów a tym bardziej w moich dotychczas projektach zawsze musiałem coś skorygować i poprawiać, nawet mój blog QMike też rozjechał się w Internet Explorerze 8.0), a pozostałe przeglądarki czyli Opera, Chrome lub Safari to już mniej roboty bo właściwie są na bieżąco aktualizowane (w tym Firefox również) i są zbliżone do przeglądarki Firefox pod kątem silników przeglądarki.
Narzędzia gdzie można obejrzeć i zbadać swoją stronę w danej przeglądarce
Oczywiście że nie jest możliwe ot tak bez kombinowania zainstalowanie wszystkich wersji przeglądarek na jednym systemie, można kombinować na wiele sposobów lub są od tego narzędzia offline dla systemu i jak również są narzędzia online.
Narzędzia offline, instalowane w systemie
Narzędzia online w przeglądarce
Z kombinowaniem czyli wirtualny system / wirtualizacja
Hacki / triki w CSS i HTML
Trzeba mieć minimum duże pojęcie na temat CSS (Cascading Style Sheet) a tym bardziej hacków jakie można stosować dla poszczególnych przeglądarek. Niemal każda przeglądarka internetowa posiada jakiś swój ficzer lub patent w CSS. Poniżej kilka przykładowych w CSS (opis w komentarzach CSS).
Hacki CSS w selektorach
.klasa {
width: 200px; /* Wszystkie przeglądarki */
*width: 250px; /* Tylko Internet Explorer od 7.x i starsze */
_width: 300px; /* Tylko Internet Explorer od 6.x i starsze */
.width: 200px; /* Tylko Internet Explorer 7.x */
}
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
head~body .klasa { width: 250px; } /* Opera */
}
Hacki HTML jako komentarze warunkowe
Poniższy kod wykona dodatkowy warunek a nim jest uruchomienie stylów ie.css dla każdej wersji Internet Explorer wyłącznie, a reszta przeglądarek nie reaguje i nie widzi tego.
<!--[if IE]> <link href="ie.css" rel="stylesheet" type="text/css" /> <![endif]-->
A w tym poniższym kodzie ie6.css zobaczy tylko Internet Explorer 6.x.
<!--[if IE6]> <link href="ie6.css" rel="stylesheet" type="text/css" /> <![endif]-->
Wtyczki: JavaScript, jQuery, PHP
Jest też prostszy i inny sposób na kodowanie stylów CSS dla poszczególnych przeglądarek internetowych. Poprzez dodawanie dodatkowych nazw klas jako nazwy przeglądarki (np. .ie, .opera, .safari), dla przykładu za pomocą skryptu / wtyczki JavaScript CSS Browser Selector i kodowanie stylów CSS wyglądałoby następująco:
.ie .klasa { background-color: yellow; } /* Tylko wszystkie Internet Explorer */
.ie7 .klasa { background-color: orange; } /* Tylko Internet Explorer 7.x */
.gecko .klasa { background-color: Gray; } /* Tylko wszystkie Firefox */
.win.gecko .klasa { background-color: red; } /* Tylko wszystkie Firefox pod Windows */
.linux.gecko .klasa { background-color: pink; } /* Wszystkie Firefox pod Linux */
.opera .klasa { background-color: Green; } /* Opera */
.webkit .klasa { background-color: Black; } /* Safari, Chrome*/
.klasa { width: 100px; height: 100px; }
Oczywiście jest więcej opcji i możliwości wyboru przeglądarek internetowy, powyżej podałem jako przykład zastosowania i użycia takich wtyczek. Mamy wtedy nad tym kontrolę nad każdą przeglądarką a nawet systemem operacyjnym.
Strony wtyczek
- CSS Browser Selector (JavaScript)
- CSS Browser detection (jQuery)
- PHP CSS Browser Selector (PHP)
- Browser Specific CSS (WordPress wtyczka)
Frameworki CSS i gotowe Resety CSS
Co to jest framework CSS?
Framework CSS to inaczej zestaw plików / arkuszy stylów CSS, zawierających wiele zdefiniowanych reguł, klas czy identyfikatorów z gotowymi parametrami. Przeważnie zawierają także szablony przykładowe HTML, pliki graficzne lub skrypty JavaScript.
Za pomocą frameworka CSS, możemy mieć gotowe style dla wszystkich elementów z ustawionymi parametrami, nawet w większości frameworkach jest też reset stylów CSS (o tym opiszę poniżej). Umożliwia to tworzenie szybko wielokolumnowych układów strony i zmniejsza ilość pracy, inaczej nazwałbym gotowiec / ściągawka stylów CSS gdzie można już od razu wprowadzać elementy w HTML.
Co to jest reset CSS?
Reset CSS polega na usunięciu: domyślnych stylów CSS, przede wszystkim automatycznie domyślnie narzuconych stylów CSS przez każdą przeglądarke.
Przykładowo utwórzmy pusty dokument HTML bez stylów CSS i napiszmy trochę kodu. Wtedy zauważymy, że każda przeglądarka pokazuje inaczej marginesy, odstępy poszczególnych elementów. Reset CSS pomaga usunąć wszystkie domyślne ustawienia stylów CSS narzucone przez przeglądarki, a nawet pomaga pozbywać się domyślnych prezentacji np. obramowania, wyśrodkowane nagłówki tabel, akapity i marginesy do poziomu zerowego.
HTML, BODY, P, UL { margin: 0; padding: 0; }
Powyżej przykładowo napisałem usunięcie domyślnie marginesów i odstępów dla elementów wybranych przeze mnie. Wtedy zauważymy, że te marginesy dookoła przeglądarki / strony internetowej zresetują się do poziomu zerowego – co pozwala na budowanie stylów CSS od podstaw.
Zalety i wady: frameworków i resetów
Zalety
- gotowe arkusze stylów CSS pod kątem Cross-browser (nie wszystkie frameworki)
- usunięcie domyślnie ustawionych stylów CSS do poziomu zerowego
- szybciej i mniej roboty przy kodowaniu od nowa resetów czy gotowych stylów
- framework jest dobry do małych projektów, gdzie nie ma dużo kombinowania z elementami HTML
Wady
- trzeba więcej czasu poświecić na zapoznanie frameworka lub gotowych resetów
- czasem znajdzie się taki element HTML, który za pomocą swoich stylów CSS nie da się ostylować inaczej – bo jakaś klasa w frameworku lub resetcie wymusza taki styl
- w większości przypadkach gotowe resety CSS, resetują lub niszczą również natywne wyglądy elementów formularza lub przycisków np. usuwa obramowania oraz tła, wtedy będziemy mieli goły bez tła przycisk z tekstem niesformatowanym
- w niektórych przypadkach resetują też wypunktowania do poziomu zerowego, czyli będziemy mieli listę ale bez punktów czy numeracji i do tego z marginesem zerowym
Ja sam osobiście nie używam frameworków czy gotowych resetów, mam swój prywatny framework z zdefiniowanymi przez siebie stylami CSS, klasami i identyfikatorami. Jak i również swój reset stylów CSS. Dlatego, że wtedy wiem co i gdzie i jak ustawiłem style CSS lub reset CSS – może kiedyś udostępnię i opiszę o tym.
Popularne frameworki
Popularne gotowe resety
Podsumowanie
To co opisałem w tym wpisie jest wstępem do tego co będę opisywał w dalszych wpisach bardziej szczegółowo. Mam nadzieję, że takiego typu tematy będą dobre dla każdego programisty czy kodera, którzy chcą zagłębić tajniki Cross-browser. Może ty znasz jakieś inne porady, hacki czy patenty na kodowanie lub problemy związane z Cross-browser, podziel o tym w komentarzu to może opiszę o tym w następnych wpisach.
Jak znasz jakiegoś programistę lub kodera frontendu, to może podziel o tym znajomym za pomocą Twittera, Facebook itp.
właśnie dlatego nigdy nie chciałem zostać webmasterem ;)
E tam… css i html nie jest taki straszny jak inne języki programowania typu PHP, Java itd. wystarczy znać podstawy HTML i CSS a reszta już będzie pestką ;-)
CSS i HTML to nie języki programowania :P Poza tym to uważam, że trójka HTML+CSS+JS to świetny tandem służący do budowy interfejsów. Nie znam żadnego innego sposobu budowania schludnych, bogatych i elastycznych interfejsów, który byłby równie prosty. Przy użyciu tych języków można osiągnąć ciekawy rezultat w o wiele krótszym czasie niż np. korzystając z bibliotek w Javie. Choć oczywiście ta trójka ma też swoje ograniczenia – w tej chwili głównie wydajność, której się nie da przeskoczyć oraz bardziej zaawansowane metody stylowywania elementów (np. typografia tekstu).
Jeśli chodzi o artykuł, to dobry wstęp do cyklu :) O ile ten cykl powstanie, bo jak ja się zabieram za coś takiego, to zazwyczaj kończę dość szybko :D. Tak więc czekam na następną część, a blog ląduje w RSSie.