Polski frontend

W tym wpisie weźmiemy pod lupę błędy w HTML i CSS. Omówimy sobie 5 najczęstszych z nich, razem ze sposobami na to, jak się ich pozbyć. Dla spokoju ducha powiem, że ten wpis nie powstał, żeby się z kogoś naśmiewać czy zawstydzać. Moim celem jest raczej uświadomić Cię, że takie błędy istnieją i warto je poprawić. Mam nadzieję, że przygotowana przeze mnie lista pozwoli Ci pisać czystszy kod i stać się lepszym frontendowcem. 😊   1. Używanie divów zamiast semantycznych tagów HTML5 Czy budując strukturę strony w HTML, używasz nazw klas, takich jak nav, header lub main? Jeśli tak to czas przestać, bo specjalnie dla takich sekcji powstały ich semantyczne odpowiedniki w HTML5. Pewnie zastanawiasz się, po co miałabyś się w ogóle przejmować tą całą semantyką, więc już Ci odpowiadam. 🤔 Semantyczny HTML jest fundamentem dostępności sieci. Elementy, które dokładnie opisują swoje przeznaczenie i rodzaj treści, znacznie poprawiają wrażenia użytkowników, którzy korzystają z Internetu za pomocą technologii wspomagających. Mam na myśli np. czytniki ekranowe. Oprócz poprawy dostępności, korzystanie z semantycznego HTML polepsza pozycjonowanie (SEO – Search Engine Optimization) i ułatwia obsługę na urządzeniach mobilnych. Więcej na ten temat napisałyśmy we wpisie „Na co mi ten HTML?”.     Cały trud polega na tym, żeby dobrać odpowiedni element do danej treści. Dlatego kiedy następnym razem będziesz chciała skorzystać z diva, zastanów się najpierw, jaką rolę pełni ten element i w jaki sposób użytkownik będzie z niego korzystał. Może się bowiem okazać, że istnieje już semantyczny tag, który powstał specjalnie do tego celu. Dla inspiracji polecam podejrzeć nasz wpis o układzie strony, z którego dowiesz się więcej o tym, z jakich konkretnie elementów warto skorzystać przy budowie szkieletu strony.   2. Niekorzystanie ze skrótów dla właściwości CSS Czas ładowania strony internetowej jest jednym z najważniejszych czynników wpływających na to, aby witryna się dobrze pozycjonowała, ale też na odczucia użytkownika. User chce móc korzystać ze strony czy aplikacji OD RAZU, a jeśli tego nie dostanie, idzie dalej. Dlatego jako programiści musimy zawsze zwracać uwagę na to, co możemy zrobić, żeby zmniejszyć rozmiar plików i przyspieszyć ich ładowanie na stronie. Z tego powodu W3C (czyli bogowie Internetu, którzy ustalają standardy i reguły działania witryn internetowych), postanowiło rozbudować kod CSS o możliwość ustawiania skróconej wartości dla pewnych właściwości. Przykład ze screena wyżej ładnie obrazuje, jak mocno jesteśmy w stanie skrócić nasz kod, nie wpływając tym samym na jego gorsze zrozumienie. Używanie skrótów CSS sprawia, że rozmiar pliku jest mniejszy. Dzięki temu strona szybciej ładuje style, a Twój kod staje się czytelniejszy i łatwiejszy w utrzymaniu. 😎 Więcej właściwości, które mogą korzystać ze skrótowych wartości znajdziesz w dokumentacji mozilli.   3. Dodawanie tego samego zdjęcia na wszystkie rozdzielczości Tag <img> przez długi czas był jednym z podstawowych elementów HTML i nie było żadnych wątpliwości co do jego prostoty i użyteczności. Jednak wraz z rozwojem urządzeń o różnych rozmiarach ekranu i rozdzielczościach zaczęły pojawiać się problemy z responsywnością i wykorzystaniem na wielu urządzeniach. Znacznik <picture> powstał, aby dać nam większą kontrolę nad wyświetlaniem obrazów w zależności od rozdzielczości. Zamiast wczytywać pojedynczy obraz dla wszystkich urządzeń, <picture> ładuje konkretny obraz dla konkretnej rozdzielczości. Dzięki temu możesz zaoszczędzić na transferze danych i szybciej ładować mniejsze zdjęcia na telefonie, ale nie tylko. Możesz też całkowicie zmienić wczytywany plik. Na przykład, jeśli obraz ma wiele drobnych szczegółów, być może prostsza wersja byłaby bardziej odpowiednia na mniejszych wyświetlaczach. Pamiętaj, tylko aby dodać do tagu <picture> znacznik <img>, żeby zapewnić kompatybilność wsteczną dla przeglądarek, które nie obsługują <picture> lub jeśli żaden z nadanych warunków wczytywania zdjęcia nie pasuje.   4. Niepoprawne zagnieżdżanie elementów HTML via GIPHY Wyobraź sobie, że elementy blokowe to pudełka, a liniowe to koperty. Nie próbowałabyś wkładać pudełek do kopert, prawda? Analogiczna sytuacja ma miejsce w HTMLu. Niektóre przeglądarki dadzą radę z renderowaniem takiego dokumentu, mimo problemów w składni. Jednak są też takie, które nie będą wiedziały jak się zachować. Prawdopodobnie usuną element blokowy z wnętrza tagu liniowego, łamiąc strukturę strony. Od razu dodam, że nie należy mylić znaczników blokowych i wbudowanych z właściwością display w CSS. Są to dwa odrębne zagadnienia. Każdy element HTML ma domyślną wartość wyświetlaną, w zależności od typu elementu. Zawsze będzie widział pewne tagi jako blokowe lub liniowe (inline) niezależnie od tego co będzie ustawione w CSS. Z pełną listą elementów blokowych i liniowych możesz zapoznać się na stronie internetowej dokumentacji mozilli. Jeśli nadal masz wątpliwości czy struktura Twojej strony jest prawidłowa, zawsze możesz skorzystać z narzędzia Markup Validator, które zwróci Ci ewentualne błędy.   5. Używanie nazw kolorów zamiast wartości szesnastkowych Nie ustawiaj koloru jako „red” czy „blue”. Niektóre przeglądarki mogą nie zgadzać się co do znaczenia niektórych nazw kolorów i inaczej je interpretować. Korzystając z zapisu szesnastkowego (ang. hex triplet), masz pewność, że we wszystkich przeglądarkach będzie wyświetlany ten sam kolor. Dodatkowo masz dostęp do większej ilości kolorów. Dokładniej do 16 milionów 24-bitowych kolorów zamiast 140 standardowych nazw kolorów przygotowanych przez W3C. Nazwy kolorów w stylach mogą pojawić się, jeśli coś testujemy, sprawdzamy, czy debugujemy. W każdym innym przypadku korzystanie z wartości szesnastkowych będzie lepszym wyborem. Istnieją też inne systemy kolorów, z których możesz korzystać, takie jak RGB czy HSL. Jednak bez względu na to, który wybierzesz, pamiętaj o spójności kodu i trzymaj się obranej konwencji w całym projekcie.   Podsumowanie Błędy w HTML i CSS nie dotyczą tylko początkujących frontendowców. Podejrzewam, że wiele z nas popełnia lub popełniało, któreś z opisywanych błędów bez względu na swoje doświadczenie. Łącznie ze mną! 🙊. Ale spokojnie, ponoć wszystko da się naprawić, nawet błędy w HTML i CSS 😃. Najważniejsze to zdawać sobie sprawę, że samo pisanie kodu, który działa, nie wystarczy, żeby być dobrym frontendowcem. Trzeba też brać pod uwagę dobre praktyki (z jakiegoś powodu się tak nazywają), optymalizację i dostępność. Dlatego mam nadzieję, że po przeczytaniu tego wpisu zwrócisz większą uwagę na swój kod i na to, co można zrobić, żeby go polepszyć.   UWAGA ogłoszenie! 😀 Jeśli 5 wskazówek to dla Ciebie za mało i masz ochotę na więcej, to przygotowałyśmy ebooka ! 🎉 🎉 🎉  Znajdziesz w nim kolejne 20 najczęstszych błędów, razem z rozwiązaniami. Przekonaj się, co jeszcze możesz usprawnić w swoim kodzie. 

Artykuł Częste błędy w HTML i CSS oraz sposoby na ich naprawę pochodzi z serwisu Frontowisko.