Od autora: Tworzenie stron internetowych w Internecie może przypominać budowanie na ruchomych piaskach. Przeglądarki robią to samo, ale od czasu do czasu wprowadzają irytująco nieprzewidywalne różnice. Na przykład wszystkie przeglądarki mają „arkusze stylów klienta użytkownika” – domyślny zestaw stylów CSS, dzięki którym nagłówek wygląda jak nagłówek itp., nawet zanim przypiszesz style do strony 1. Oczywiście każdy silnik przeglądarki korzysta z nieco innych ustawień domyślnych.

Jednym z przykładów były domyślne style list, w których domyślne arkusze stylów przeglądarek Internet Explorer i Opera początkowo miały dopełnienie listy po lewej stronie: 30pt;, podczas gdy Firefox i KHTML miały dopełnienie po lewej stronie: 40px;. Jeśli chciałbyś zmienić domyślne dopełnienie poprzez zdefiniowanie ul (dopełnienie po lewej stronie: 0;), dałoby to bardzo różne wyniki w przeglądarkach.

ZRESETUJ USTAWIENIA CSS

Aby osiągnąć niewielką stabilność, niektórzy programiści resetują wszystkie marginesy i dopełnienie za pomocą uniwersalnego selektora:

* (margines: 0; wypełnienie: 0;)

* (margines: 0; dopełnienie: 0; )

Definiując wcięcie listy i rozpoczynając w tym miejscu arkusz stylów, otrzymasz to, czego oczekujesz. Jednak użycie * oznaczało, że domyślny margines i dopełnienie uległy awarii dla wszystkich elementów, a gdy tylko dodano element formularza, sytuacja stała się naprawdę zła.

Celem resetu jest zresetowanie wszystkiego, co możesz... [i] służyć jako punkt wyjścia dla twoich własnych podstawowych stylów- Erica Meyera

html, body, div, span, aplet, obiekt, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abr, akronim, adres, duży, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, Fieldset, formularz, etykieta, legenda, tabela, podpis, tbody, tfoot, thead, tr, th, td, artykuł, na bok, płótno, szczegóły, osadzanie, figura, figcaption, stopka, nagłówek, hgroup, menu, nav, wyjście, rubin, sekcja, podsumowanie, czas, znak, audio, wideo ( margines: 0; dopełnienie: 0; obramowanie: 0; rozmiar czcionki: 100%; czcionka: dziedziczenie; wyrównanie do pionu: linia bazowa; )

html, treść, div, span, aplet, obiekt, iframe, h1, h2, h3, h4, h5, h6, p, cytat blokowy, pre, a, skrót, akronim, adres, duży, cytuj, kod, del, dfn, em, img, ins, kbd, q, s, samp, mały, strajk, silny, sub, sup, tt, var, b, ty, ja, środek, dl, dt, dd, ol, ul, li, zestaw pól, formularz, etykieta, legenda, tabela, podpis, tbody, tfoot, thead, tr, th, td, artykuł, bok, płótno, szczegóły, osadzenie, rysunek, figcaption, stopka, nagłówek, hgroup, menu, nawigacja, wyjście, Ruby, sekcja, podsumowanie, czas, znak, audio, wideo ( margines: 0; dopełnienie: 0; granica: 0; rozmiar czcionki: 100%; czcionka: dziedzicz; pionowe - wyrównanie: linia bazowa;

Resetuje niektóre właściwości wielu (ale nie wszystkich) elementów do odpowiednika w postaci zwykłego tekstu. Ponieważ resetowane są tylko pasujące elementy, pozwala to uniknąć pewnych problemów * (margines: 0; dopełnienie: 0;). Następnie możemy zdefiniować style dla tych odrzuconych „niestylizowanych” właściwości, mając pewność, że budujemy na stabilnych podstawach obejmujących różne przeglądarki. To przypisanie stylu jest jednocześnie sygnałem o konieczności świadomego ustalenia odpowiednich stylów dla tych elementów.

PROBLEMY Z RESETOWANIEM USTAWIEŃ CSS

Resetowanie CSS było ratunkiem, ale teraz, zwłaszcza w obliczu wzrostu liczby szkieletów, często używa się ich w niezmienionej postaci. Na przykład Eric założył, że inni programiści zaczną tworzyć witryny wokół proponowanych przez niego stylów resetowania, odpowiednio je zastępując, a pierwsza wersja Meyer Reset tymczasowo zawierała tę zasadę:

/* pamiętaj o zdefiniowaniu stylów fokusu! */ :focus (konspekt: ​​0; )

Niestety nie wszyscy faktycznie zdefiniowali style skupienia i Eric usunął to z drugiej wersji.

Używanie resetów sprawia, że ​​czujesz się jak zboczeniec. Zresetowanie domyślnych stylów przeglądarki zmusza Cię do zastanowienia się nad tym, jak powinien być wyświetlany każdy element, co pomaga zapewnić, że elementy zostaną zastosowane w oparciu o semantykę, a nie style domyślne. Ale w przypadku elementów takich jak i i em prawie zawsze istnieje domyślny styl przeglądarki. Inne domyślne style przeglądarki, takie jak niegdyś absurdalnie duży rozmiar tekstu nagłówka, uległy zmianie i są teraz domyślnie całkiem tolerowane. Problemy zaczynają się, gdy ktoś chce przekazać resetowany element HTML tylko z przypisanymi „niestylizowanymi” stylami resetowania.

Dla mnie największym problemem z resetami jest dziedziczenie, które prowadzi do spamu w narzędziach przeglądarki. Próba wyśledzenia problemu CSS z głęboko zagnieżdżonym elementem w kodzie innej osoby nie pomoże:

Reguły resetowania CSS powtarzane z powodu dziedziczenia

NORMALIZUJ.CSS

Nicholas Gallagher i Jonathan Neal przyjęli inne podejście w przypadku Normalize.css, „małego pliku CSS, który zapewnia lepszą spójność domyślnych stylów elementów HTML w różnych przeglądarkach”. Podobnie jak w przypadku resetowania CSS, daje nam to dobry punkt wyjścia dla różnych przeglądarek – co jest głównym powodem stosowania resetowania w pierwszej kolejności – ale te dwa podejścia są filozoficznie różne.

Resetowanie CSS zastępuje style agenta użytkownika i przywraca wiele elementów do ich stanu „bez stylu”, czyli pewnego poziomu, na którym można bezpiecznie budować. Jednak zanim będziemy mogli z nich budować, musimy nadać styl większości elementów. Zamiast tego Normalize.css rozwiązuje jedynie niespójności w stylu agenta użytkownika, wybierając najbardziej odpowiednie ustawienia domyślne, aby zrobić różnicę. Tutaj również otrzymujemy bezpieczną podstawę dla wielu przeglądarek, ale zawierającą znormalizowane style agenta użytkownika jako gotowe do użycia podstawowe elementy składowe. Zasadniczo jest to coś w rodzaju wyidealizowanej wersji domyślnego arkusza stylów CSS 2.1 dla różnych przeglądarek. W obu przypadkach musimy następnie dodać własne dominujące style, aby utworzyć obraz, ale ponieważ domyślne ustawienia przeglądarki w pliku Normalize.css pozostają niezmienione, ogólnie jest mniej stylów do dodania.

Ponieważ zmiany w pliku Normalize.css są bardziej ukierunkowane, nie ma kaskady dziedziczenia przepisanych reguł w narzędziach programistycznych przeglądarki. Oto prosty ul:, zdestyledowany za pomocą Meyer Reset i Normalize.css w wersjach 1 i 2:

„Niestylizowany” element listy nieuporządkowanej

Stosowanie resetu Meyera

Zastosuj Normalize.css v1

Stosowanie Normalize.css v2

Istnieje wyraźna różnica w filozofii, gdy przykład Meyer Reset pojawia się jako kilka linii zwykłego tekstu bez marginesów, wcięć i punktorów, podczas gdy przykłady Normalize.css wyglądają jak style domyślne. Łatwo zauważalna jest także różnica w stylistyce zastosowanej na tej ul.

To jednak nie wszystkie stylizacje zastosowane na ul. Dla porównania oto ten sam zrzut ekranu „bez stylu”, ale z widocznymi stylami agenta użytkownika, w przeglądarkach Firefox 21 i Opera Next 15.

Fajny rodzaj resetu CSS! Stale wykorzystuję go jako dodatkowy „normalizator” stylów.

Normalize.css - Wymusza na przeglądarkach bardziej systematyczne, spójne i zgodne z nowoczesnymi standardami wyświetlanie wszystkich elementów. Dotyczy TYLKO stylów, które wymagają znormalizowania.

/*! normalize.css v8.0.1 | Licencja MIT | github.com/necolas/normalize.css */ /* Dokument =============================================== ============== =========================== */ /** * 1. Popraw wysokość linii we wszystkich przeglądarkach. * 2. Zapobiegaj dostosowaniu rozmiaru czcionki po zmianie orientacji w iOS. */ html (wysokość linii: 1,15; /* 1 */ -webkit-text-size-regulacja: 100% ; /* 2 */ ) /* Sekcje =============================================== =========================== */ /** * Usuń margines we wszystkich przeglądarkach. */ treść (margines: 0 ; ) /** * Renderuj `główny` element konsekwentnie w IE. */ main(wyświetlacz:blok;) /** * Popraw rozmiar czcionki i margines na elementach `h1` w kontekstach `sekcji` i * `artykułu` w przeglądarkach Chrome, Firefox i Safari. */ h1 (rozmiar czcionki: 2em; margines: 0,67em 0;) /* Grupowanie treści ============================================== ============================ */ /** * 1. Dodaj prawidłowy rozmiar pudełka w przeglądarce Firefox. * 2. Pokaż przepełnienie w Edge i IE. */ hr ( box-sizing : content-box; /* 1 */ wysokość : 0 ; /* 1 */ overflow : widoczny; /* 2 */ ) pre ( rodzina czcionek : monospace, monospace; /* 1 */ czcionka -rozmiar: 1em ; /* 2 */ ) /* Semantyka na poziomie tekstu ============================================ =========================================== */ /** * Usuń szare tło aktywnych łączy w IE 10. */ a (kolor tła: przezroczysty; ) /** * 1. Usuń dolną ramkę w przeglądarce Chrome 57- * 2. Dodaj poprawną dekorację tekstu w przeglądarkach Chrome, Edge, IE, Opera i Safari. */ abbr ( obramowanie-dół: brak; /* 1 */ dekoracja tekstu: podkreślenie; /* 2 */ dekoracja tekstu: podkreślenie kropkowane; /* 2 */ ) /** * Dodaj poprawną grubość czcionki w przeglądarkach Chrome, Edge i Safari. */ b , mocny (grubość czcionki: pogrubiona; ) /** * 1. Popraw dziedziczenie i skalowanie rozmiaru czcionki we wszystkich przeglądarkach. * 2. Popraw dziwny rozmiar czcionki „em” we wszystkich przeglądarkach. */ code , kbd , samp (rodzina czcionek: monospace, monospace; /* 1 */ rozmiar czcionki: 1em ; /* 2 */ ) /** * Dodaj prawidłowy rozmiar czcionki we wszystkich przeglądarkach. */ mały (rozmiar czcionki: 80%; ) /** * Zapobiega wpływowi elementów `sub` i `sup` na wysokość linii we * wszystkich przeglądarkach. */ sub , sup (rozmiar czcionki: 75%; wysokość linii: 0; pozycja: względna; wyrównanie do pionu: linia bazowa; ) sub ( dół: -0,25em ; ) sup ( góra : -0,5em ; ) /* Treść osadzona ============================================== ============================ */ /** * Usuń obramowanie obrazów wewnątrz łączy w IE 10. */ img (styl obramowania: brak; ) /* Formularze =============================================== =============== =========================== */ /** * 1. Zmień style czcionek we wszystkich przeglądarkach. * 2. Usuń margines w przeglądarce Firefox i Safari. */ przycisk, wejście, grupa opcji, wybór, obszar tekstowy (rodzina czcionek: dziedziczenie; /* 1 */ rozmiar czcionki: 100% ; /* 1 */ wysokość linii: 1,15; /* 1 */ margines: 0 ; /* 2 */ ) /** * Pokaż przepełnienie w IE. * 1. Pokaż przepełnienie w Edge. */ przycisk , wejście ( /* 1 */ przepełnienie : widoczne; ) /** * Usuń dziedziczenie transformacji tekstu w Edge, Firefox i IE. * 1. Usuń dziedziczenie transformacji tekstu w przeglądarce Firefox. */ przycisk , wybierz ( /* 1 */ transformacja tekstu: brak; ) /** * Poprawiono brak możliwości stylizowania klikalnych typów w iOS i Safari. */ przycisk , , , ( -webkit-appearance : przycisk; ) /** * Usuń wewnętrzne obramowanie i dopełnienie w przeglądarce Firefox. */ przycisk ::-moz-focus-inner , ::-moz-focus-inner , ::-moz-focus-inner , ::-moz-focus-inner ( styl obramowania: brak; dopełnienie: 0 ; ) /** * Przywróć style fokusu nieustawione przez poprzednią regułę. */ przycisk :-moz-focusring, :-moz-focusring, :-moz-focusring, :-moz-focusring (kontur: 1px kropkowany tekst przycisku;) /** * Popraw dopełnienie w przeglądarce Firefox. */ zestaw pól (wypełnienie: 0,35em 0,75em 0,625em ; ) /** * 1. Popraw zawijanie tekstu w Edge i IE. * 2. Popraw dziedziczenie kolorów z elementów `fieldset` w IE. * 3. Usuń dopełnienie, aby programiści nie zostali przyłapani, gdy wyzerują * elementy `fieldset` we wszystkich przeglądarkach. */ legenda (rozmiar pudełka: obramowanie; /* 1 */ kolor: dziedziczenie; /* 2 */ wyświetlacz: tabela; /* 1 */ maksymalna szerokość: 100% ; /* 1 */ dopełnienie: 0 ; / * 3 */ odstęp: normalny; /* 1 */ ) /** * Dodaj prawidłowe wyrównanie w pionie w przeglądarkach Chrome, Firefox i Opera. */ postęp ( wyrównanie pionowe : linia bazowa; ) /** * Usuń domyślny pionowy pasek przewijania w IE 10+. */ obszar tekstowy (przepełnienie: auto; ) /** * 1. Dodaj właściwy rozmiar pudełka w IE 10. * 2. Usuń dopełnienie w IE 10. */, (rozmiar pudełka: obramowanie; /* 1 */ dopełnienie: 0 ; /* 2 */ ) /** * Popraw styl przycisków zwiększania i zmniejszania kursora w przeglądarce Chrome. */::-webkit-inner-spin-button , ::-webkit-outer-spin-button (wysokość: auto; ) /** * 1. Popraw dziwny wygląd w Chrome i Safari. * 2. Popraw styl konturu w przeglądarce Safari. */( -webkit-appearance: pole tekstowe; /* 1 */ przesunięcie-konspektu: -2px ; /* 2 */ ) /** * Usuń wewnętrzne dopełnienie w przeglądarkach Chrome i Safari na macOS. */::-dekoracja-wyszukiwania-webkit (-wygląd-webkit: brak; ) /** * 1. Napraw brak możliwości stylizowania klikalnych typów w iOS i Safari. * 2. Zmień właściwości czcionki na „dziedzicz” w przeglądarce Safari. */::-webkit-file-upload-button ( -webkit-appearance : przycisk; /* 1 */ czcionka: dziedziczenie; /* 2 */ ) /* Interaktywny =============================================== =============== =========================== */ /* * Dodaj poprawny wyświetlacz w Edge, IE 10+ i Firefox. */ szczegóły (wyświetlanie: blok; ) /* * Dodaj poprawny sposób wyświetlania we wszystkich przeglądarkach. */ podsumowanie (wyświetlanie: element-listy; ) /* Różne =============================================== =============== =========================== */ /** * Dodaj poprawny wyświetlacz w IE 10+. */ szablon (wyświetlanie: brak; ) /** * Dodaj poprawny wyświetlacz w IE 10. */( Nie wyświetla się; )

Posiadanie pod ręką odpowiedniego zestawu narzędzi może znacznie przyspieszyć proces tworzenia serwisu lub aplikacji internetowej. W dzisiejszym artykule znajdziesz listę najnowszych i najbardziej przydatnych narzędzi do tworzenia CSS.

Czysty CSS

Pure to zestaw modułów CSS opracowany przez Yahoo, który można wykorzystać jako podstawę dowolnego projektu internetowego. Framework znacznie ułatwia tworzenie CSS, a jeśli jeszcze o nim nie słyszałeś, czas spróbować.

Nawigacja responsywna tylko w CSS

Układy responsywne stają się coraz bardziej popularne, co moim zdaniem jest dobrą rzeczą. Pod linkiem poniżej znajdziesz responsywne menu wykonane w całości w CSS, dostępne do pobrania i ponownego wykorzystania.

Śmieciarz CSS

Podczas opracowywania dużego projektu utrzymanie czystości i zwartości plików CSS może być dość trudne. Ale nie martw się o to, CSS Trashman wykona swoją pracę. To przydatne narzędzie online przeskanuje Twoją witrynę, skompresuje style CSS i na koniec umożliwi pobranie nowej, zoptymalizowanej wersji pliku CSS.

Klej

Zamiast ładować wiele małych obrazów, znacznie lepiej jest użyć jednego dużego obrazu i techniki sprite'ów CSS. Klej to proste narzędzie wiersza poleceń, które łączy kolekcję obrazów w jeden plik. Dzięki temu możesz łatwo używać sprite'ów CSS na swojej stronie internetowej. Bardzo wygodnie.

Bardzo często duże pliki CSS zawierają nieużywane style, które niestety nie są tak łatwe do wykrycia. Helium to oparte na przeglądarce narzędzie JavaScript, które wykrywa nieużywane style z pliku CSS.

Topcoat to bardzo schludna biblioteka klas CSS specjalizująca się w elementach formularzy: przyciskach, polach wyboru, suwakach itp. Najłatwiejszy sposób na udekorowanie Twojej witryny lub aplikacji internetowej w kilka minut.

Fitgrd to solidny fundament do stworzenia własnej, responsywnej strony internetowej. Wszystko jest w Twoich rękach, z wyjątkiem siatki, Fitgrd się tym zajmie, oszczędzając mnóstwo czasu na pisaniu nieistotnego kodu.

Normalize.css jest alternatywą HTML5 dla resetowania CSS. Wymusza to na przeglądarce renderowanie wszystkich elementów w sposób bardziej spójny i zgodny z nowoczesnymi standardami. Normalize.css jest używany przez wiele popularnych witryn, takich jak Twitter Bootstrap, Soundcloud, TweetDeck i wiele innych.

Niedźwiedź CSS

Bear CSS to nie tylko piękna strona internetowa, ale także bardzo przydatne narzędzie. Po prostu utwórz dokument HTML i prześlij go tam. Bear CSS automatycznie wygeneruje plik CSS do pobrania na podstawie używanych elementów HTML. Świetna oszczędność czasu!

Jeśli kiedykolwiek składałeś komercyjne zamówienie na układ, prawdopodobnie spotkałeś się z takim wymogiem, jak kompatybilność między przeglądarkami, czyli aby Twoja strona była wyświetlana możliwie jednakowo we wszystkich przeglądarkach. I tak pojawia się pytanie – co wybrać, zresetować czy znormalizować?

Co jest lepsze reset.css czy normalize.css?

Najpierw dowiedzmy się, co robi każdy z plików:

Resetowanie. css- jak widać po nazwie pliku, resetuje on większość domyślnych stylów przeglądarki (a jest ich naprawdę, wystarczy otworzyć goły HTML).

normalizować. css- plik ten nie tylko ustawia domyślne style tam, gdzie jest to konieczne, ale także naprawia pewne niedociągnięcia starszych przeglądarek (witaj IE).

Jak rozumiesz, porównywanie tych 2 plików nie jest nawet całkowicie poprawne, ponieważ mają one nieco inną „filozofię”. Jaka jest więc różnica i co wybrać?

Jakie są różnice między normalizacją a resetowaniem css

1. W przeciwieństwie do resetowania, po podłączeniu normalize css będziesz mógł wizualnie określić, gdzie znajdują się różne elementy; te same akapity mają zewnętrzne wcięcia. Dlatego używając „zresetowanego arkusza stylów” po prostu zmusisz dużą liczbę elementów do jednego wyglądu.
2. Z reguły 1 wynika, że ​​style musimy pisać od zera, bo... wszystko zresetowaliśmy, co dla mnie osobiście już jest nie przyjmuję tego do wiadomości.
3. Normalize css zawiera poprawki różnych typowych błędów, takich jak wyświetlanie tagów HTML5 lub tych samych formularzy
4. Kiedy pracujesz z narzędziami do debugowania w przeglądarkach, takimi jak Firebug, podłączając reset, otrzymasz ogromny „arkusz” właściwości, co ostatecznie wydłuży Twój czas na pisanie nowych stylów i wyszukiwanie starych
5. W normalize każda pojedyncza reguła jest udokumentowana i możesz łatwo zrozumieć, do czego ona służy, a jeśli masz pewność, że jej nie potrzebujesz, możesz ją łatwo usunąć
6. normalize.css jest domyślnie zawarty w bootstrapie :)

Myślę, że sam to rozumiesz normalizować wygrywa pod każdym względem. Warto też pamiętać o zboczeńcach, którzy używają czegoś w tym stylu:

* (margines: 0; wypełnienie: 0;)

Jak rozumiesz, nie powinieneś tego robić.

Podsumowując, chciałbym powiedzieć, że nie spotkałem jeszcze osoby, która twierdziłaby, że w ogóle ma sens używanie reset.css. Wydaje mi się, że zastosowano go tylko dlatego, że nie wiedzieli o „normalizacji stylów” :)

Istnieje opinia, że ​​warto łączyć style w nagłówku „inline”, przynajmniej dla „pierwszego ekranu” - czyli czegoś, co od razu pokaże osobie, gdy otworzy Twoją witrynę, a to naprawdę bardzo dobra praktyka . Tę rekomendację można znaleźć w szybkości strony Google.

Być może będzie to dla ciebie przydatne - inline normalizuje siatkę CSS i bootstrap🙂 Piszemy to w głowie, potem piszemy też własne style na pierwszy ekran, a Ty zastosujesz się do jednej z rekomendacji + Twoja strona nie będzie się chwiać przy ładowaniu, bo załadowane zostały już najważniejsze style, czyli siatka, normalizacja i „pierwszy ekran”.

Tutaj też wersja bez komentarzy:

Html(rodzina czcionek:bezszeryfowa;-ms-text-size-regulacja:100%;-webkit-text-size-regulacja:100%;) body(margines:0;) artykuł, bok, szczegóły, figcaption, rysunek, stopka, nagłówek, główne, menu, nawigacja, sekcja, podsumowanie(display:block;) audio, canvas, postęp, video(display:inline-block;vertical-align:baseline;) audio:not())(display : brak;wysokość:0;) , szablon(wyświetlanie:brak;) a(kolor tła:przezroczysty;) a:aktywny, a:hover(kontur:0;) abbr(border-bottom:brak;dekoracja tekstu: podkreśl ;dekoracja tekstu:podkreślenie kropkowane;) b, strong(grubość czcionki:dziedzicz;) b, strong(grubość czcionki:pogrubienie;) dfn(styl czcionki:kursywa;) h1(rozmiar czcionki:2em;margines : 0,67em 0;) mark(kolor tła:#ff0;kolor:#000;) small(rozmiar czcionki:80%;) sub, sup(rozmiar czcionki:75%;wysokość linii:0;pozycja: względne ;vertical-align:baseline;) sup(góra:-0,5em;) sub(dół:-0,25em;) img(border:0;) svg:not(:root)(przepełnienie:ukryty;) figure(margines : 1em 40px;) hr(box-sizing:content-box;height:0;overflow:visible;) pre(overflow:auto;) code, kbd, pre, samp(rodzina czcionek:monospace, monospace;rozmiar czcionki : 1em;) przycisk, wejście, grupa opcji, wybierz, obszar tekstowy (czcionka: dziedziczenie; margines: 0;) przycisk (przepełnienie: widoczne;) przycisk, wybierz (transformacja tekstu: brak;) przycisk, wejście HTML, wejście, wejście ( - wygląd-webkit:przycisk;kursor:wskaźnik;) przycisk, wejście HTML(kursor:domyślne;) przycisk::-moz-focus-inner, wejście::-moz-fokus-inner(border:0;padding:0; ) przycisk:-moz-focusring, input:-moz-focusring(kontur: 1px przerywany tekst przycisku;) input(line-height:normal;) input, input(box-size:border-box;padding:0;) input: : -webkit-wewnętrzny-przycisk-spin, input::-webkit-zewnętrzny-spin-button(wysokość:auto;) input(-webkit-appearance:textfield;) input::-webkit-search-cancel-button, input : :-webkit-search-decoration(-webkit-appearance:none;) Fieldset(border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;) legenda(border:0;padding:0 ; ) textarea(overflow:auto;) optgroup(grubość czcionki:pogrubienie;)

// echo get_the_post_thumbnail(get_the_ID(), "powiązana miniatura"); // wyświetlić rozmiar mojej miniatury?>

Aby mieć pewność, że strona będzie równie dobrze wyświetlać się w różnych przeglądarkach, należy popracować nad jej kompatybilnością z różnymi przeglądarkami. Pomaga nam w tym testowanie strony i debugowanie znaczników HTML/CSS. Istnieją jednak narzędzia, które mogą pomóc w ograniczeniu kłopotów związanych ze stylizacją i zapewnić, że podstawowe style będą takie same w różnych przeglądarkach. Jakie to są narzędzia, dlaczego i jak z nich korzystać - rozważymy dalej.

Przeglądarki i style podstawowe

Faktem jest, że każda przeglądarka ma domyślnie pewien zestaw podstawowych stylów, które domyślnie stosuje do strony. A jeśli utworzymy stronę w „gołym” HTML bez projektu i stylów, przeglądarka i tak wyświetli tag

duży rozmiar i odważny styl,

nieco mniejszy rozmiar i tak dalej. Przeglądarka podświetli tekst w tagu kursywa, będzie to podkreślać, i - tłuszcz.

Stanie się tak, ponieważ przeglądarka ma już własne style elementów, które są domyślnie stosowane do otwieranych w niej stron. Faktem jest, że w różnych przeglądarkach zasady te nieznacznie się różnią, w zależności od przeglądarki. Około 10 lat temu różnice te były dość dramatyczne i bardzo zauważalne. Teraz są minimalne, ale nadal istnieją.

Aby usunąć te różnice i sprawić, aby strona domyślnie wyświetlała się tak samo we wszystkich przeglądarkach, użyj specjalnego pliku .css: reset.css lub normalize.css

reset.css – co robi i jak go używać

Pierwszym plikiem, który się pojawił, był reset.css. Ten plik css zawiera listę wszystkich możliwych znaczników HTML i resetuje ich wartość do zera. Oznacza to, że usuwa wszystkie możliwe wcięcia, sprawia, że ​​czcionka jest taka sama we wszystkich tagach, resetując wszystkie style tekstu. Dzięki temu wszystkie nagłówki i akapity są wyświetlane zwykłym tekstem, o tej samej wielkości i bez wcięć. W efekcie we wszystkich przeglądarkach resetowane są domyślne style.

Działa to w ten sposób: najpierw umieszczamy na stronie plik reset.css, a po nim własny plik ze stylami. W rezultacie najpierw resetujemy wszystkie style, a dopiero potem ustawiamy projekt znaczników HTML w style.css. W ten sposób osiągamy, że wszystkie przeglądarki przywrócą swoje domyślne style, a wszystkie znaczniki będą oparte na stylach ustawionych w style.css.

Pobierz plik reset.css

Możesz pobrać plik reset.css na cssreset.com

Możesz też pobrać wersję „Reset CSS” 2.0 Erica Meyera za pomocą poniższego przycisku z mojego bloga:

normalize.css - jak to działa i jaka jest różnica

Po podłączeniu reset.css do strony, wszystkie style muszą zostać zapisane od nowa. I za każdym razem, gdy ta czynność staje się męcząca. Dlatego reset został zastąpiony innym narzędziem - normalizacją. Normailze - jak sama nazwa wskazuje, nie resetuje wszystkich stylów, ale normalizuje je, nadając im jednolity wygląd we wszystkich przeglądarkach. Po jego zastosowaniu podstawowe style wyświetlania nagłówków, rozmiarów czcionek, wcięć... zostają ujednolicone i wyświetlane identycznie we wszystkich przeglądarkach. Dzięki niemu możesz zaoszczędzić pewną ilość czasu, który w przypadku resetu zostałby przeznaczony na pisanie stylów resetu.

Jeśli jeszcze nie korzystałeś z normalize.css, polecam wypróbować go w kolejnym projekcie, a kto wie, może nie będziesz mógł odmówić 😉

Pobierz normalize.css

Możesz pobrać normalize.css z necolas.github.io/normalize.css

Lub pobierz z mojego bloga:

Co jest lepsze resetowanie czy normalizowanie?

Nie ma jasnej odpowiedzi.

Pierwsza zeruje wszystkie style, druga prowadzi do jednego mianownika. Doświadczeni projektanci układów, którzy używają pliku reset.css, zwykle mają własne zestawy stylów, które są dołączane natychmiast po zresetowaniu w celu nadania stylu zawartości. I nie muszą za każdym razem na nowo definiować stylów podstawowych elementów w nowym układzie. Ja też to robię. Czuję się komfortowo i wiem, jakie style domyślnie ustawiam i jak one działają.

normalize jest wygodne, jeśli przestudiujesz jego strukturę, możesz ją modyfikować według własnych upodobań - dostosowując podstawowy wygląd tagów. A praca z nim będzie wygodna także w locie – kiedy trzeba dużo i często pisać.

Każde narzędzie jest dobre, najważniejsze, aby używać go poprawnie 😉