search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

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

[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:

1
2
3
4
5
<!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.

1
2
3
4
5
<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:

1
2
3
4
5
6
7
8
.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):

1
2
3
4
.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:

1
2
3
4
5
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:

1
2
3
4
5
<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:

1
2
3
4
5
.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:

1
2
3
4
5
.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:

1
2
3
4
.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

  • Klasyczne problemy?

    1) Outline jest brzydki i se go wyłączymy. Super, ale ja nawiguję klawką i w tym momencie mogę se taką stronę o kant stołu utłuc.

    2) Coś, o czym już wspominałeś, ale trza by zaznaczyć to mocniej: w HTML są tylko dwa rodzaje elementów klikalnych – link i przycisk. Jeśli coś ma być klikalne a nie przenosi przy okazji do innej strony, jest przyciskiem; we wszystkich innych przypadkach to link. I nie, span[onclick] tego nie zastępuje (bo nie jest nawigowalny z klawki, nie reaguje jak przycisk, nie jest tak stylowalny, nie ma odpowiedniego oznaczenia dla AT…)

    3) progress to to samo co meter – bo przecież to „Internet winien dbać o semantykę, nie ja”. Cóż…

  • Osobiście odchodzę od layoutów robionych na „float”. Dużo lepiej prezentują się rozwiązania działające w oparciu o inline-block. Trzeba uważać by poszczególne kolumny nie miały białych znaków między sobą, ale za to nie trzeba używać wierszy co niesamowicie uprasza sprawę i daje ładniejszy kod.

  • Damian Wielgosik

    „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.”

    Bzdura, nie szerzyłbym takich opinii wśród początkujących.

  • Gut6

    Michał masz jakieś ciekawe triki na białe znaki? Nie liczę tego z ujemnym marginesem albo z rozpoczynaniem kolejnego taga w tej samej lini typu: tekst [nowa linia] Tekst.
    Czasem to jest jedyny problem, który zmusza mnie do przejścia jednak na floaty. Mam np. wiersz z taką składnią:
    Tekst 1

    , tekst 2

    Na inline blockach tego nie zrobię z rozpoczęciem taga w tej samej linii, z powodu ifa PHPowego.

  • font-size:0 dla rodzica. chyba najlepszy hack na inline-block

  • osobiście odchodzę od inline-block na rzecz flexboxa. życie nagle stało się przyjemniejsze 😉

  • Takie podejście w przypadku kodu z float ułatwia organizację strony. Nie powiesz mi, że jest inaczej.

  • Problem z flexbox polega na braku wsparcia IE.

  • 10 ma jakieś tam wsparcie a 11 już ma dobre. a zgodnie z polityką Google, 9 już się nie powinno wspierać… 😉

  • ale jakby nie patrzeć, to zakłóca układ treści na stronie. jeśli piszemy w HTML5, to jeszcze nav czy aside uratują jakoś sprawę. w innym wypadku może być kiepsko.

    to przeczy zasadzie „content first” – nie po to we flexboxie wprowadzono opcję zmieniania kolejności wyświetlania treści, żebyśmy robili takie rzeczy przy float

  • Damian Wielgosik

    Ułatwiać, ułatwia, ale uczy złych praktyk. Początkujący develperzy nie powinni uczyć się takich regułek.

  • Ciągle czekam na moment gdy nie będę musiał się przejmować IE by korzystać z Flexbox.

  • Mi font-size:0 jak proponuje @Compander się nie podoba, bo trzeba font-size ustawiać na zero a potem do stanu „właściwego”. Lepiej wykorzystać komentarz w HTML, a najlepiej tagi php.

  • Gut6

    W moim przypadku akurat się sprawdzi na szczęście. Dzięki @Comandeer:disqus, tego nie znałem. @michal_zalecki:disqus Twojego sposobu z komentarzem też nie znałem więc zapamiętam na przyszłość. Dzięki za info.

  • Nie można powiedzieć, że się powinno lub nie powinno. Zależy kto jak robi strony, czy dla siebie czy dla użytkownika. IE 9 ma liczące się grono użytkowników. Poza tym flexbox nie bardzo wg. mnie nadaje się do budowania layoutu jako takiego, a raczej przydaje się konkretnych elementach takich jak jakieś kafelki itd.

  • Gut6

    Szczęśliwi Ci, którzy wspierać niższych wersji IE nie muszą. Z IE 9 jest o tyle dobrze, że z tego co wiem, samo aktualizuje się wzwyż razem z aktualizacjami Windowsa więc z czasem powinno go ubywać. Problemem jest IE8 i „blokada” na XPkach do aktualizacji do wyższych wersji.

  • Gut6

    A dopiero teraz zauważyłem, że poobcinało. Spróbuję wyedytować.

  • >Zależy kto jak robi strony, czy dla siebie czy dla użytkownika.
    Google jakoś jest w stanie a wydaje mi się, że oni też piszą dla użytkownika. Trzeba wiedzieć co można uwalić ze wsparcia i np dostarczyć prostszą wersję strony.

    >Poza tym flexbox nie bardzo wg. mnie nadaje się do budowania layoutu jako takiego, a raczej przydaje się konkretnych elementach takich jak jakieś kafelki itd.
    Genialne są wszelkie gridy oparte o flexboxa. W tym wypadku są po prostu szkieletem dla całej strony

  • >a gdy korzystamy z podawania wymiarów np. w em to pojawiają się kolejne kłopoty.
    Tylko i wyłącznie, jeśli musimy wspierać prastare IE. Wszędzie indziej naturalnym rozwiązaniem problemu będzie jednostka rem

  • > Google jakoś jest w stanie
    Jakieś przykłady? Przypominam, że czasy różnych wersji stron na różne przeglądarki minęły i nie powinniśmy wgl myśleć o takiej możliwości. Prostszą wersję to znaczy jaką?