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.
Łukasz
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?
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.
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ą.
