poniedziałek, 2020-11-30

Style przeglądarek

Być może nie każdy początkujący twórca stron internetowych zdaje sobie z tego sprawę, ale do każdego dokumentu HTML automatycznie dodawane są style CSS definiowane przez przeglądarkę. Jest to potrzebne, choćby z tego powodu, że nie każda strona ma dodane przez autora kaskadowe arkusze stylów, a program musi w jakiś sposób wyświetlić dokument, np. wyświetlić akapity jako elementy blokowe, nadać marginesy i wielkość liter itd. Szczegółowe badanie domyślnych stylów przeglądarki raczej nie ma sensu, jednak jest w tym zakresie kilka możliwości. Pierwsza to badanie kodu przeglądarek lub silników udostępnianych wraz z kodem źródłowym. W kilku przypadkach domyślne style przeglądarki zostały opublikowane w Internecie:

• starsze wersje Internet Explorer;
• przeglądarki oparte na silniku Webkit;
• Opera 10.51;
• Firefox;
• Chrome;
• proponowane przez W3C style dla HTML4;
• proponowane przez WhatWG style dla HTML5;

Przytoczone źródła w wielu przypadkach nie są kompletne i nie stanowią najnowszej wersji. Mogą też zawierać rozwiązania specyficzne dla danej przeglądarki (np. prefixy itp.). W przeglądarce Firefox po wpisaniu w pasku adresu lokalizacji resource://gre-resources/ można przejrzeć pliki z rozszerzeniem css. Część domyślnych stylów przeglądarki można ustalić na drodze własnych badań, korzystając z przygotowanej samodzielnie strony HTML bez nadanych stylów oraz wbudowanych w przeglądarki i dostępnych po kliknięciu prawym przyciskiem myszy na wybrany element mechanizmów typu „zbadaj element”, „przeprowadź inspekcję” itp. Proces odczytywania stylów przeglądarki można próbować zautomatyzować za pomocą języka JavaScript.

Domyślne style w przeglądarkach różnią się od siebie, ale są najczęściej podobne i wywodzą się z czasów przeglądarki Mosaic. Jej sposób wyświetlania elementów przejęła przeglądarka Netscape Navigator. Wkrótce pojawił się rywalizujący z Navigatorem Internet Explorer, który powstał na bazie zakupionego kodu przeglądarki Mosaic. Kolejni konkurenci na rynku przeglądarek stosowali podobne style domyślne, prawdopodobnie po to, żeby nie zmuszać użytkowników do zmiany przyzwyczajeń. Obecnie w Internecie jest stosunkowo niewiele witryn niestosujących żadnych stylów CSS i nieścisłości domyślnych stylów różnych przeglądarek przeciętnym odbiorcom nie rzucają się w oko, co nie znaczy, że nie są dokuczliwe dla projektantów.

Twórcy stron od lat zmagali się z niezgodnościami stylów przeglądarek, często okazywało się, że np. marginesy elementów na stronie w kilku programach wyglądały dobrze, jednak w którejś przeglądarce dawały fatalny efekt. Problem ten można rozwiązać, deklarując wszystkie dostępne własności, jednak jest to pracochłonne i w wielu przypadkach niepotrzebne. Powstały dwa sposoby powszechnie stosowane przez autorów stron. Pierwszy z nich to tzw. reset stylów CSS, polegający na „zerowaniu” najważniejszych własności, np. dla wszystkich elementów marginesy i wypełnienia ustawione na zero, brak obramowań, punktorów list itd. W tym przypadku podczas pracy nad stroną od razu widać co trzeba ustawić i później jest duża szansa, że będzie ona w każdej aplikacji wyglądać podobnie (pomijając takie kwestie jak np. różne generacje przeglądarek). Trochę odmienna koncepcja to tzw. normalizacja stylów polegająca na nadaniu własnościom CSS własnych początkowych wartości, np. preferowane marginesy elementów, krój czcionki itd. W obu przypadkach projektant do każdej strony, nad którą pracuje, na początku dołącza dodatkowy plik z gotowymi własnościami (z resetem lub normalizacją).