LBweb Łukasz Bącik

#frontendowe spojrzenie na tworzenie stron www

Komentarze: 0

Console log w CSS

Pisanie kodu JavaScript nierzadko wymaga weryfikacji jakiegoś błędu, co wymaga zastosowania console.log’a. Błędy zdarzają się także w kodzie CSS, zatem co w takim przypadku należy zrobić? Z pomocą powinno przyjść najprostsze rozwiązanie. O tym przeczytasz poniżej.

Opis i wizualizacja problemu

Podczas pisania kodu CSS zdarza się, że jakiś element wychodzi poza kontener w którym się znajduje. W przypadku kontenera jakim jest <body> robi się problem, ponieważ pojawia się niepożądany poziomy scroll. Dotyczy to również sytuacji przedstawionej na obrazie głównym tego artykułu. Pasek przewijania może się pojawić na zwykłej sekcji (np. <div>). Pierwsza myśl?

W JS wystarczyłby console.log i po sprawie. Ciekawe czy jest console log w css?

poziomy scroll wewnątrz sekcji

Rozwiązanie – console log w CSS

Jak wiadomo, deweloperzy nierzadko muszą wykazać się sporą kreatywnością, by sprostać temu co zaprojektował dział kreacji. Kreatywność przyda się także w przypadku znalezienia winowajcy tego problemu, czyli elementu, który wychodzi poza kontener.

👉 Zatem, jak zrobić console log w CSS? Rozwiązanie jest bardzo proste. Użyj ramki na wszystkich elementach strony. 🙂

body * {
  border: 1px solid #CED0D4;
}

I to wszystko? A jakże! Efekt jaki uzyskamy prezentuje się poniżej.

console log w css

Selektor CSS, jaki napisałem powyżej, oznaczy ramką każdy element wewnątrz <body>, dzięki czemu z łatwością zlokalizujemy element wychodzący poza dozwolony obszar.

Podsumowanie

Pewnie wiele osób nie jest zaskoczona takim rozwiązaniem, jednak na początku drogi z kodem CSS warto zapamiętać tę metodę „walki” ze stroną.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.