Znajomość CSS bywa niebezpieczna.
A umiejętność dodawania własnych klas może obrócić się przeciwko tobie. Nowa klasa tu, nowa tam i zanim się obejrzysz, twoj staranny dotąd kod CSS zaczyna przypominać bigos.
Dziś o tym, jak opcja .cls z Chrome DevTools zapobiega w nadmiarowej produkcji klas CSS i pomaga dobrze wykorzystać już istniejące.
Czytaj dalej Jak ta klasa CSS zmieni wygląd mojej strony? Moc opcji .cls
Wyrejestrowanie pliku w CSS w motywie WordPressa może być i dziecinnie proste, i niezmiernie trudne zarazem. Łatwe, bo służy do tego prosta funkcja przyjmująca tylko jeden parametr. Trudne, gdyż użyta w motywie potomnym, nie zadziała tak, jak byśmy tego chcieli, dopóki nie zrozumiemy kontekstu jej użycia.
Dziś przykłady pokazujące kiedy wyrejestrowywanie plików CSS może się przydać i kilka wskazówek, jak zrobić to poprawnie.
Czytaj dalej Jak wyrejestrować plik CSS w motywie potomnym WordPressa
Dołączyć plik CSS do strony na WordPressie – wydawałoby się, że to prosta sprawa. Jednak nawet na forach typu Stack Overflow można znaleźć wskazówki, które utrwalają złe nawyki.
Dzisiaj kompendium wiedzy, jak poprawnie dodajemy pliki CSS do strony na WordPressie: jakich błędów unikać, jaka jest różnica między rejestracją a dodawaniem (kolejkowaniem) pliku CSS, jak kontrolować kolejność i zależności. Wszystko na przykładach.
Czytaj dalej Jak dodać plik CSS do strony na WordPressie – prawidłowy sposób
Google fonts można testować szybko i bezpiecznie na dowolnej stronie. Bez instalacji wtyczek i dostępu do backendu strony.
Wystarczy, że stronę otworzymy w przeglądarce Chrome i za pomocą opcji Inspect w odpowiednie miejsce wkleimy kod pobrany ze strony Google Fonts.
W artykule używam przykładu strony na WordPressie, ale pokazany sposób pozwala testować Google fonts na dowolnej stronie.
Czytaj dalej Jak testować Google fonts na stronie w WordPressie
Gdy na stronie w WordPressie zaczynają się dziać cuda, a użytkownik twierdzi, że on nic nie zrobił, nie zakładaj, że kłamie.
Jeśli te dziwne rzeczy dotyczą stylów CSS, użyj Chrome Developer Tools. Dziś case study o tym, jak to narzędzie pomaga rozwikłać zagadki „tajemniczego” wyglądu strony. Czytaj dalej CSS mi nie działa na stronie na WordPressie! Jak sobie z tym radzić?
Czasami nasza witryna czy motyw WordPressa ładuje ogromny plik CSS, a my korzystamy zaledwie z kilku podstawowych klas. Cała reszta niepotrzebnie zajmuje miejsce na serwerze, a ładowanie zbyt dużego pliku stylów spowalnia wczytywanie naszej strony.
Warto pozbyć się niewykorzystywanych klas. W wykryciu nieużywanych klas i innych reguł CSS pomoże nam panel Coverage pakietu Developer Tools wbudowany w przeglądarkę Chrome.
Sprawdź, jak tego używać.
Czytaj dalej Jak znaleźć nieużywane klasy CSS na stronie i po co to robić
Opcja Inspect w przeglądarce Chrome pozwala na szybkie sprawdzenie jakie reguły CSS odpowiadają za wygląd wskazanego elementu. Jednak nie zawsze od razu widzimy tę właściwą regułę.
Czasami wiemy jakiej konkretnej właściwości (color, margin-bottom) lub wartości (#fff, auto) szukamy, i chcielibyśmy przefiltrować panel stylów właśnie z ich wykorzystaniem.
Sprawdź jak przeszukiwać panel stylów. Jest też filmik z przykładami!
Czytaj dalej Jak w przeszukiwać style w poszukiwaniu właściwej reguły CSS
Na przykładzie wyjaśniam, jak korzystać z Chrome Developer Tools w dostosowaniu wyglądu strony pod urządzenia mobilne oraz dlaczego pakiet ten jest niezastąpiony w Responsive Web Design i testowaniu media queries.
Czytaj dalej Jak testować media queries w Chrome Developer Tools
Jak szybko zmienić kolor elementu na stronie, na taki jak ma inny element? Użyj Color Picker w przeglądarce Chrome.
Nie musisz niczego instalować! Ta metoda pozwala na sprawne testowanie kolorów na twojej stronie.
Sprawdź, jak to zrobić krok po kroku.
Czytaj dalej Jak szybko zmieniać kolory na stronie – Color Picker z Chrome w akcji
Wow! Ale super efekt! Jak oni to zrobili? Myślisz, kiedy oglądasz ciekawą stronę internetową. I szybko klikasz w „Inspect”, aby podpatrzeć technikę, jaka została użyta.
A tu zonk! Okazuje się, że plik CSS podpięty do strony został zminifikowany. Czyli reguły CSS są połączone i tworzą jedną długą linię. No i jak teraz człowiek ma to przeczytać? Sprawdź, jakie to proste.
Czytaj dalej Jak podejrzeć zminifikowany plik CSS i do czego to się może przydać