W tym artykule podzielimy się z wami prostym trikiem, który może ułatwić wam pracę. Stosując właściwość „outline” w css, możemy bardzo łatwo dokonać audytu layoutu strony internetowej. W ten sposób możemy zdiagnozować problemy związane z CSL (cumulative layout shift), a także inne kwestie związane z układem elementów na stronie.
Wystarczy, że do swojego arkusza CSS dodasz następujący styl:
* {
outline: 2px solid red;
}Teraz każdy element na stronie został obrysowany czerwonym konturem, który dodatkowo nie ma wpływu na rozmiar elementu na stronie, ani jego pozycjonowanie. Podczas ładowania strony, zauważysz teraz przesunięcie układu i zidentyfikujesz elementy, które to powodują.
Częstym problemem jest późniejsze ładowania się elementów, na przykład reklam. Powoduje to wysoki CLS i można to rozwiązać stosując placeholdery o wymiarach takich, jakie potencjalnie będzie miała reklama. W ten sposób rezerwujemy jej odpowiednie miejsce. Gdy reklama już się załaduje, przesunięcia układu nie będzie lub będzie ono dużo mniejsze.
Dlaczego outline, a nie border?
Wizualnie efekt byłby bardzo podobny. Jednak technicznie, mogłoby to zafałszować nam wyniki. Border fizycznie zwiększa faktycznie wymiary elementu i przesuwa elementy wokół. Outline natomiast nie zmienia rozmiaru elementu, ani jego pozycji. Dzięki temu możemy wizualnie wyróżnić elementy, ale nie wpływamy w ten sposób na układ strony.
