[HTML][CSS] Dlaczego pisanie kodu HTML i CSS nas wkurza?

Będąc webmasterami bardzo często musimy walczyć z "dziwnym" zachowaniem przeglądarek, co potrafi doprowadzić spokojnego człowieka do szału. W tym wpisie przedstawię listę rzeczy z którymi webmasterzy najczęściej się borykają w swojej pracy.

Zawsze deklaruj DOCTYPE

Jest to rzecz, która się wydaje oczywista. Lecz brak takiej deklaracji czasem pojawia się w różnych generatorach stron co często powoduje dziwne zachowanie się kodu i powoduje rozpacz webmasterów. W dzisiejszych czasach stosujemy już DOCTYPE dla HTML5, czyli:

<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>

Pominięcie deklaracji DOCTYPE sprawi, że przeglądarka wejdzie w tryb quirks mode co sprawi, że przeglądarka zacznie wyświetlać stronę niepoprawnie lub niezgodnie z zamierzeniami twórcy, np:

tabele będą źle wyświetlane,
kolory mogą być niewłaściwie interpretowane,
wysokość elementów może być źle obliczana,
może powodować wiele, wiele innych problemów

Problemy z modelem pudełka - box model

Przed tak zwaną "erą responsywności" twórcy stron internetowych korzystali z klasycznego modelu CSS pudełka (CSS box model), to znaczy ustalali szerokość elementu, a wartość padding i wartość border-width były dodawane do szerokości elementu przez co element ostatecznie był szerszy. Co sprawiało webmasterom dużo problemów.

Dzisiaj można korzystać z dobrodziejstw jakie daje wykorzystanie reguły CSS box-sizing: border-box. Dzięki temu, element ma niezmienną, faktyczną szerokość, a wartości padding i border-width są zawierane w szerokości elementu. Jest to genialne rozwiązanie, które pozwala nam zachować większą kontrolę nad układem strony. I co ważne, działa od IE8 wzwyż, czyli działa już wszędzie.

Elementy z float powinny być pierwsze w strukturze strony

Ile to już razy na różnych forach webmasterskich ludzie szukali pomocy z rozjeżdżającym się layoutem? Takich pytań jest pełno. Jedną z fundamentalnych rzeczy w pisaniu kodu HTML i CSS jest dbanie o to, aby elementy które będą miały ustawiony float były umiejscowione w strukturze jako pierwsze. Dzięki temu, unikniemy problemu ze "spadającymi" elementami, które pojawiają się poniżej docelowego miejsca.

<div class="wrapper">
  <div class="floated">Lewy sidebar</div>
  <div class="floated">Prawy sidebar</div>
  <div class="content">Treść</div>
</div>

W powyższym przypadku, element o klasie .content będzie wchodził w wolną przestrzeń między dwoma "floatowanymi" elementami w przypadku gdy ten elementy z klasą .floated mają zdefiniowaną szerokość a elementowi z klasą .content przypiszemy wartość overflow: hidden.

Czyszczenie floatów

Jeśli korzystamy z właściwości float, to musimy pamiętać o tym, aby resetować zachowanie layoutu w momencie gdy już nie chcemy by kolejne elementy zachowywały się jak elementy z float. W tym celu stosujemy tzw. clearfix:

.row:before,
.row:after {
  display: table;
  content: '';
}
.row:after {
  clear: both;
}

W wielu miejscach w Internecie powyższy kod znajdziecie pod nazwą .clearfix, ale ja go w swoim kodzie lubię nazywać jako .row. Ewentualnie, zamiast dopisywać klasę .row możesz dać własność overflow: hidden do kontenera nadrzędnego, np. tak jak w przykładzie wyżej możesz dodać tą własność do elementu z klasą .wrapper.

Element zawierający floatowane elementy a jego wysokość

Kolejna rada odnośnie elementów z własnością CSS float. Kontener zawierający elementy z float domyślnie ma wysokość obliczoną na 0 - height: 0. To może powodować różnego rodzaju problemy, w szczególności jeśli chcemy aby układ strony nie skakał w momencie dynamicznie dodawanych nowych elementów lub gdy chcemy określić obszar w którym np. klikanie będzie dawało określony efekt.

By sprawić, że kontener z elementami będzie miał wyliczoną wysokość wystarczy dodać clearfix o którym wspomniałem wyżej. Tym samym układ strony się nie rozjedzie.

Elementy z float są domyślnie elementami blokowymi

W starszym kodzie CSS jak również w kodzie pisanym przez osoby dopiero poznające tajniki pisania kodu CSS bardzo często można spotkać się z zapisem (lub podobnym):

.floated {
  float: left;
  display: block;
}

Taki zapis nie zepsuje nam układu strony, ale jest niepotrzebny. Dzieje się tak dlatego, że elementy z float domyślnie są elementami blokowymi. Nawet wymuszanie innej wartości dla display, na przykład: display: inline; lub display: table; nie zmieni tego stanu. Elementy z float są elementami blokowymi i dlatego wystarczy dać tylko float: left;

Stylowanie wierszy w tabeli

Stylowanie elementów tabeli może być czasem zaskakującym zajęciem. Warto zapamiętać, że element <tr> nie zaakceptuje stylów CSS wykonanych za pomocą własności border, dopóki tabela w której znajduje się wiersz nie będzie miała własności border-collapse: collapse;.

Co ciekawsze, jeśli elementy <tr>, <td> lub <th> będą miały tą samą szerokość zdefiniowaną w border-width, na przykład:

1
2
3

tr { border: 2px solid #b30; } /* kolor wiersza będzie niewidoczny */
td { border: 2px solid #cde; }
th { border: 2px solid #000; }

To kolor obramowania wiersza nie będzie widoczny. Aby kolor obramowania wiersza był widoczny, to trzeba zwiększyć jego wielkość:

1
2
3

tr { border: 3px solid #b30; } /* kolor wiersza będzie już widoczny */
td { border: 2px solid #cde; }
th { border: 2px solid #000; }

Tym samym, kolory obramowania wszystkich elementów są widoczne na stronie.

Oznaczanie przycisku jako zaznaczonego w Firefox

Aby zwiększyć dostępność elementów strony Firefox dodaje wewnętrze obramowanie do elementów <input> oraz <button>. Dzięki temu łatwiej jest korzystać z nich za pomocą np. klawiatury. Niestety, nie zawsze jest to pożądany efekt. Na szczęście możemy to zmienić za pomocą następującego kodu:

input::-moz-focus-inner,
button::-moz-focus-inner {
  padding: 0;
  border: 0;
}

Tym samym wyłączymy oznaczanie aktywnego przycisku. Dobrym zwyczajem jest jednak zapewnienie jakiegokolwiek zamiennego sposobu na oznaczanie aktywnego elementu.

Pamiętaj by poprawnie definiować typ przycisku w HTML

Warto pamiętać o tym, aby definiować poprawny typ przycisku - <button>, w kodzie HTML. Brak zdefiniowanego typu będzie oznaczał dla przeglądarki, że przycisk przyjmie domyślną wartość submit. Co może spowodować, że w momencie gdy mamy więcej niż jeden przycisk w formularzu, to naciśnięcie któregokolwiek z nich spróbuje wysłać dane formularza na serwer, a co jest niepożądanym zachowaniem.

Poniżej przykładowa poprawna implementacja formularza z dwoma przyciskami: jeden do wysłania formularza a drugi do jakiejkolwiek innej akcji, np. do zresetowania pól formularzy:

<form action="akcja.php" method="post">
  <input type="text" name="wartosc" />
  <button type="submit">Wyślij</button>
  <button type="button">Wyczyść pole</button>
</form>

Co ważne, dobrym zwyczajem jest określanie znacznika <button>, a nie na przykład za pomocą <a>. Dzięki temu czytniki dla osób niedowidzących lub niewidomych będą w stanie poprawnie zlokalizować przycisk akcji, a nie pusty link do którego jest przypisana jakaś akcja w JS. Warto o tym pamiętać.

Dla przycisków znajdujących się poza formularzem należy stosować zapis <button type="button">Przycisk</button>.

Limit selektorów i arkuszy w IE9 i w starszych

Przy pracy nad naprawdę dużym projektami, które są w trakcie totalnej renowacji strony wizualnej (czyli od nowa jest pisany kod HTML i kod CSS) można natknąć się na problem z kodem CSS niedziałającym w przeglądarkach Internet Explorer. Może to być spowodowane limitem, który wynosi 4096 selektorów na arkusz stylów.

Należy pamiętać o tym, że selektorem nie jest zestaw reguł dla wybranych elementów, na przykład:

.elem1,
.elem2,
.elem3 .text { font-size: 20px; }
 
.elem2 { color: #000; }

W powyższym przypadku mamy do czynienia z czterema selektorami, a nie dwoma. Przeglądarka taki zapis interpretuje jako:

.elem1       { font-size: 20px; }
.elem2       { font-size: 20px; }
.elem3 .text { font-size: 20px; }
 
.elem2 { color: #000; }

Oprócz limitu selektorów jest też limit arkuszy stylów zarówno tych ładowanych za pomocą <link rel="stylesheet" href="style.css" /> jak i za pomocą <style>/* CSS */</style>. Limit wynosi 31 arkuszy stylów, w sumie dla obydwu sposobów ich ładowania.

Rodzaje pozycji elementów strony

Bardzo często na forach można się spotkać z problemem, że jakiś element (z własnością position: absolute; nie chce się pojawić w wybranym miejscu tylko znajduje się totalnie gdzieś indziej. Jest to związane z tym, że elementy z tą własnością ustawiają się względem ich najbliższego rodzica/kontenera, który ma ustawioną jedną z własności: position: relative;, position: absolute; lub position: fixed;. Własność position: static; jest wartością domyślną dla każdego elementu strony i można jej użyć do resetowania zachowania elementu.

Należy też pamiętać, że elementy które mają zaimplementowaną własność position: fixed; są ustawiane tylko i wyłącznie względem okna przeglądarki. To oznacza, że podczas przewijania strony element będzie zawsze widoczny, bo okno przeglądarki samo w sobie nie zmienia pozycji.

Pozycja elementu a jego szerokość

Nie ma potrzeby dawania własności width: 100% elementom z własnością position: absolute; lub position: fixed;, jeśli mają ustawione własności left: 0; oraz right: 0;, ponieważ to są zamienne sposoby na osiągnięcie tego samego.

Position: fixed i transformacje

Jeśli bawisz się animacjami CSS, to mogłeś/aś się spotkać z przypadkiem gdy element z własnością CSS position: fixed; zachowuje się jakby jego własność miała wartość position: absolute;. Jest to spowodowane tym, że wykorzystanie właśności transform na kontenerze który zawiera element z position: fixed; sprawia, że kontener zachowuje się jakby miał ustawioną własność position: relative;, a element z position: fixed; jest traktowany jak element z position: absolute. Można poczytać o tym w artykule Erica Meyera (jednego z magów CSS).

Optymalizacja animacji CSS

Jako że ostatnimi czasy bardzo na topie są animacje CSS, to warto zadbać o to, aby strona która posiada ich mnóstwo np. w postaci płynnych przejść stanów przycisków lub posiadająca płynnie zmieniające swoją formę elementy, była odpowiednio zoptymalizowana. Można tego dokonać poprzez dodanie następujących własności w kodzie CSS odpowiedzialnym za animacje:

.animowany-element {
  transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
}

Dzięki temu, wymusisz wykorzystanie procesora graficznego zamiast normalnego procesora urządzenia. Procesory graficzne są znacznie efektywniejsze w generowaniu grafiki stron. Ponadto, dzięki temu, w szczególności na urządzeniach mobilnych, poprawisz wydajność swojej strony oraz sprawisz, że korzystanie z Twojej strony lub aplikacji nie będzie takie "bateriożerne".

Podsumowanie

To był długi wpis, ale zawiera szereg użytecznych porad o których warto pamiętać podczas tworzenia kodu strony internetowej czy też aplikacji internetowej. Dzięki temu, unikniesz kłopotliwych sytuacji i Twoje życie będzie przyjemniejsze.
Jeśli znasz inne ciekawe problemy związane z kodem HTML lub CSS oraz sposoby ich rozwiązania, to zapraszam do podzielenia się swoimi spostrzeżeniami w komentarzach pod tym wpisem.

źródło