CSS

Przeglądarka określa, jakie style wyświetlić na elemencie, w zależności od specyficzności reguł CSS. Zakładamy, że przeglądarka już określiła reguły pasujące do danego elementu. Wśród pasujących reguł, specyficzność, cztery wartości oddzielone przecinkami, a, b, c, d, są obliczane dla każdej reguły na podstawie następujących kryteriów:

1. a oznacza, czy używane są style śródliniowe. Jeśli deklaracja właściwości jest stylem śródliniowym na elemencie, a wynosi 1, w przeciwnym razie 0.
2. b to liczba selektorów ID.
3. c to liczba klas, atrybutów i selektorów pseudoklas.
4. d to liczba tagów i selektorów pseudo-elementów.

Wynikowa specyficzność nie jest wynikiem, ale macierzą wartości, które można porównywać kolumna po kolumnie. Porównując selektory w celu określenia, który ma najwyższą specyficzność, patrzy się od lewej do prawej i porównuje najwyższą wartość w każdej kolumnie. Zatem wartość w kolumnie b zastąpi wartości w kolumnach c i d, niezależnie od tego, jakie by one nie były. W związku z tym, specyficzność 0,1,0,0 byłaby większa niż 0,0,10,10.

W przypadku równej specyficzności: liczy się najnowsza reguła. Jeśli dwukrotnie napisałeś tę samą regułę w swoim arkuszu stylów (niezależnie od tego, czy jest to styl wewnętrzny, czy zewnętrzny), to niższa reguła w twoim arkuszu stylów jest bliżej elementu do stylizacji, jest ona uważana za bardziej specyficzną i dlatego zostanie zastosowana.

Napisałbym reguły CSS o niskiej specyficzności, aby w razie potrzeby można je było łatwo nadpisać. Podczas pisania kodu biblioteki komponentów interfejsu użytkownika CSS ważne jest, aby miały one niską specyficzność, aby użytkownicy biblioteki mogli je nadpisywać bez używania zbyt skomplikowanych reguł CSS tylko w celu zwiększenia specyficzności lub uciekania się do !important.

• Resetowanie - Resetowanie ma na celu usunięcie wszystkich domyślnych stylów przeglądarki z elementów. Na przykład, marginy, paddingi, font-sizey wszystkich elementów są resetowane do tej samej wartości. Będziesz musiał ponownie zadeklarować style dla typowych elementów typograficznych.
• Normalizowanie - Normalizowanie zachowuje przydatne domyślne style, zamiast usuwać stylizację wszystkiego. Koryguje również błędy dla typowych zależności przeglądarek.

Wybrałbym resetowanie, gdy mam bardzo spersonalizowany lub niekonwencjonalny projekt witryny, tak że muszę dużo stylizować samodzielnie i nie potrzebuję zachowania żadnych domyślnych stylów.

Float to właściwość pozycjonowania CSS. Elementy pływające pozostają częścią przepływu strony i będą wpływać na pozycjonowanie innych elementów (np. tekst będzie opływał elementy pływające), w przeciwieństwie do elementów z position: absolute, które są usuwane z przepływu strony.

Właściwość CSS clear może być używana do pozycjonowania poniżej elementów pływających left/right/both.

Jeśli element nadrzędny zawiera tylko elementy pływające, jego wysokość zostanie zredukowana do zera. Można to naprawić, usuwając float po elementach pływających w kontenerze, ale przed jego zamknięciem.

Hack .clearfix wykorzystuje sprytny pseudo selektor CSS (::after) do usuwania floatów. Zamiast ustawiać przepełnienie na elemencie nadrzędnym, stosuje się do niego dodatkową klasę clearfix. Następnie stosuje się ten CSS:

.clearfix::after {
  content: ' ';
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

Alternatywnie, nadaj właściwość overflow: auto lub overflow: hidden elementowi nadrzędnemu, co ustanowi nowy kontekst formatowania bloku wewnątrz elementów potomnych i rozszerzy się, aby je zawierać.

Właściwość z-index w CSS kontroluje pionową kolejność nakładania się elementów, które się pokrywają. z-index dotyczy tylko elementów, które mają wartość position inną niż static.

Bez żadnej wartości z-index elementy układają się w kolejności, w jakiej pojawiają się w DOM (najniższy na tym samym poziomie hierarchii pojawia się na wierzchu). Elementy z pozycjonowaniem innym niż statyczne (i ich dzieci) zawsze będą pojawiać się na wierzchu elementów z domyślnym statycznym pozycjonowaniem, niezależnie od hierarchii HTML.

Kontekst układania to element, który zawiera zestaw warstw. W ramach lokalnego kontekstu układania, wartości z-index jego dzieci są ustawiane względem tego elementu, a nie względem korzenia dokumentu. Warstwy poza tym kontekstem – tzn. elementy rodzeństwa lokalnego kontekstu układania – nie mogą znajdować się między warstwami w nim. Jeśli element B znajduje się na wierzchu elementu A, element potomny elementu A, element C, nigdy nie może być wyżej niż element B, nawet jeśli element C ma wyższą wartość z-index niż element B.

Każdy kontekst układania jest samodzielny – po ułożeniu zawartości elementu, cały element jest brany pod uwagę w kolejności układania nadrzędnego kontekstu układania. Kilka właściwości CSS wyzwala nowy kontekst układania, takie jak opacity mniejsze niż 1, filter inne niż none i transform inne niż none.

_Uwaga: Dokładnie to, co kwalifikuje element do stworzenia kontekstu układania, jest wymienione w tym długim zestawie [reguł].

Block Formatting Context (BFC) jest częścią wizualnego renderowania CSS strony internetowej, w którym układane są bloki. Floats, elementy absolutnie pozycjonowane, inline-blocks, table-cells, table-captions oraz elementy z overflow innym niż visible (z wyjątkiem sytuacji, gdy ta wartość została propagowana do viewportu) ustanawiają nowe konteksty formatowania bloku.

Umiejętność ustanowienia kontekstu formatowania bloku jest ważna, ponieważ w przeciwnym razie element zawierający nie będzie [zawierał pływających elementów potomnych]. Jest to podobne do zwijania marginesów, ale bardziej podstępne, ponieważ całe bloki będą się zapadać w dziwny sposób.

BFC to ramka HTML, która spełnia co najmniej jeden z poniższych warunków:

• Wartość float nie jest none.
• Wartość position nie jest ani static, ani relative.
• Wartość display to table-cell, table-caption, inline-block, flex, inline-flex, grid lub inline-grid.
• Wartość overflow nie jest visible.

W BFC lewa zewnętrzna krawędź każdego bloku styka się z lewą krawędzią bloku zawierającego (dla formatowania od prawej do lewej, stykają się prawe krawędzie).

Pionowe marginesy między sąsiednimi blokami w BFC zwijają się. Więcej na temat [zwijania marginesów].

• Metoda pustego div - <div style="clear:both;"></div>.
• Metoda Clearfix - Odnosi się do klasy .clearfix powyżej.
• Metoda overflow: auto lub overflow: hidden - Element nadrzędny ustanowi nowy kontekst formatowania bloku i rozszerzy się, aby zawierać swoje pływające elementy potomne.

W dużych projektach napisałbym klasę narzędziową .clearfix i używałbym jej tam, gdzie jest mi potrzebna. overflow: hidden może obcinać elementy potomne, jeśli są wyższe niż element nadrzędny i nie jest to zbyt idealne rozwiązanie.

CSS sprites łączą wiele obrazów w jeden większy obraz. Jest to powszechnie stosowana technika dla ikon (używa jej Gmail). Jak ją zaimplementować:

1. Użyj generatora sprajtów, który pakuje wiele obrazów w jeden i generuje dla niego odpowiedni CSS.
2. Każdy obraz miałby odpowiadającą mu klasę CSS z zdefiniowanymi właściwościami background-image, background-position i background-size.
3. Aby użyć tego obrazu, dodaj odpowiednią klasę do swojego elementu.

Zalety:

• Zmniejszenie liczby żądań HTTP dla wielu obrazów (wymagane jest tylko jedno żądanie na arkusz sprajtów). Jednak z HTTP2 ładowanie wielu obrazów nie stanowi już takiego problemu.
• Wcześniejsze pobieranie zasobów, które nie zostaną pobrane, dopóki nie będą potrzebne, np. obrazy, które pojawiają się tylko w stanach pseudoklas :hover. Nie będzie widocznego migotania.

• Po zidentyfikowaniu problemu i przeglądarki, która go powoduje, użyj oddzielnego arkusza stylów, który ładuje się tylko, gdy używana jest ta konkretna przeglądarka. Ta technika wymaga jednak renderowania po stronie serwera.
• Użyj bibliotek takich jak Bootstrap, które już obsługują te problemy ze stylami.
• Użyj autoprefixer, aby automatycznie dodawać prefiksy dostawców do swojego kodu.
• Użyj Reset CSS lub Normalize.css.
• Jeśli używasz Postcss (lub podobnej biblioteki transpilującej), mogą istnieć wtyczki, które pozwalają na użycie nowoczesnej składni CSS (a nawet propozycji W3C), które przekształcą te sekcje kodu w odpowiedni bezpieczny kod, który będzie działał w wybranych celach.

• Graceful degradation - Praktyka budowania aplikacji dla nowoczesnych przeglądarek przy jednoczesnym zapewnieniu jej funkcjonalności w starszych przeglądarkach.
• Progressive enhancement - Praktyka budowania aplikacji z podstawowym poziomem doświadczenia użytkownika, ale dodawania ulepszeń funkcjonalnych, gdy przeglądarka to obsługuje.
• Użyj [caniuse.com], aby sprawdzić obsługę funkcji.
• Autoprefixer do automatycznego wstawiania prefiksów dostawców.
• Wykrywanie funkcji za pomocą [Modernizr].
• Użyj zapytań o funkcje CSS [@support]

Te techniki są związane z dostępnością (a11y).

• width: 0; height: 0. Spraw, aby element w ogóle nie zajmował miejsca na ekranie, co powoduje jego niewyświetlanie.
• position: absolute; left: -99999px. Umieść go poza ekranem.
• text-indent: -9999px. Działa to tylko na tekście w elementach block. Jest to powszechnie stosowana i znana sztuczka, ale ma [pewne wady], takie jak powodowanie problemów z wydajnością, więc możesz rozważyć użycie zamiast tego text-indent: 100%.
• Meta tagi. Na przykład za pomocą Schema.org, RDF i JSON-LD.
• WAI-ARIA. Specyfikacja techniczna W3C, która określa, jak zwiększyć dostępność stron internetowych.

Nawet jeśli WAI-ARIA jest idealnym rozwiązaniem, wybrałbym podejście z pozycjonowaniem absolute, ponieważ ma najmniej wad, działa dla większości elementów i jest łatwą techniką.

Zanim Flex stał się popularny (około 2014 roku), system siatki oparty na float był najbardziej niezawodny, ponieważ nadal miał największe wsparcie przeglądarek spośród alternatywnych systemów (flex, grid). Bootstrap używał podejścia float aż do Bootstrapa 4, który przeszedł na podejście oparte na flex. W chwili pisania (2020) flex jest zalecanym podejściem do budowania systemów siatki i ma [przyzwoite wsparcie przeglądarek].

Dla bardziej odważnych, mogą zapoznać się z [CSS Grid Layout], który wykorzystuje nową, błyszczącą właściwość grid; jest jeszcze lepszy niż flex do budowania układów siatkowych i będzie de facto sposobem na to w przyszłości.

Tak. Przykładem byłoby przekształcenie ułożonej nawigacji typu 'pill' w nawigację 'tab' z stałym dolnym położeniem poza pewnym punktem przełamania (breakpoint).

Tak, istnieje kilka sposobów kolorowania kształtów (w tym określanie atrybutów na obiekcie) przy użyciu CSS inline, osadzonej sekcji CSS lub zewnętrznego pliku CSS. Większość SVG, które znajdziesz w sieci, używa CSS inline, ale każdy typ ma swoje zalety i wady.

Podstawowe kolorowanie można wykonać, ustawiając dwa atrybuty na węźle: fill i stroke. fill ustawia kolor wewnątrz obiektu, a stroke ustawia kolor linii narysowanej wokół obiektu. Możesz używać tych samych schematów nazewnictwa kolorów CSS, których używasz w HTML, niezależnie od tego, czy są to nazwy kolorów (czyli red), wartości RGB (czyli rgb(255,0,0)), wartości Hex, wartości RGBA itp.

<rect
  x="10"
  y="10"
  width="100"
  height="100"
  stroke="blue"
  fill="purple"
  fill-opacity="0.5"
  stroke-opacity="0.8" />

Powyższy fill="purple" jest przykładem atrybutu prezentacyjnego. Co ciekawe, w przeciwieństwie do stylów inline, takich jak style="fill: purple", które również są atrybutami, atrybuty prezentacyjne mogą być [nadpisane przez style CSS] zdefiniowane w arkuszu stylów. Tak więc, jeśli zrobiłeś coś takiego jak svg { fill: blue; }, nadpisałoby to fioletowe wypełnienie, które zdefiniowaliśmy.

Tak, istnieją cztery typy właściwości @media (w tym screen):

• all - dla wszystkich typów urządzeń medialnych
• print - dla drukarek
• speech - dla czytników ekranu, które „czytają” stronę na głos
• screen - dla ekranów komputerów, tabletów, smartfonów itp.

Oto przykład użycia typu mediów print:

@media print {
  body {
    color: black;
  }
}

Po pierwsze, zrozum, że przeglądarki dopasowują selektory od prawej strony (selektor kluczowy) do lewej. Przeglądarki filtrują elementy w DOM zgodnie z selektorem kluczowym i przechodzą w górę po elementach nadrzędnych, aby określić dopasowania. Im krótsza długość łańcucha selektorów, tym szybciej przeglądarka może określić, czy dany element pasuje do selektora. Dlatego unikaj selektorów kluczowych, które są tagami i selektorami uniwersalnymi. Pasują one do dużej liczby elementów, a przeglądarki będą musiały wykonać więcej pracy, aby określić, czy elementy nadrzędne również pasują.

Metodologia [BEM (Block Element Modifier)] zaleca, aby wszystko miało jedną klasę, a tam, gdzie potrzebna jest hierarchia, jest ona również włączana do nazwy klasy, co w naturalny sposób sprawia, że selektor jest wydajny i łatwy do nadpisania.

Pamiętaj, które właściwości CSS [wyzwalają] reflow, repaint i compositing. Unikaj pisania stylów, które zmieniają układ (wyzwalają reflow), jeśli to możliwe.

Zalety:

• CSS jest łatwiejszy w utrzymaniu.
• Łatwe pisanie zagnieżdżonych selektorów.
• Zmienne do spójnego tematyzowania. Można współdzielić pliki motywów między różnymi projektami.
• Miksy do generowania powtarzającego się CSS.
• Funkcje Sass, takie jak pętle, listy i mapy, mogą ułatwić konfigurację i uczynić ją mniej szczegółową.
• Dzielenie kodu na wiele plików. Pliki CSS również można dzielić, ale będzie to wymagało żądania HTTP do pobrania każdego pliku CSS.

Wady:

• Wymaga narzędzi do preprocesowania. Czas ponownej kompilacji może być długi.
• Nie piszesz obecnie i potencjalnie użytecznego CSS. Na przykład, używając czegoś takiego jak [postcss-loader] z [webpack], możesz pisać potencjalnie przyszłościowo kompatybilny CSS, co pozwala na używanie rzeczy takich jak zmienne CSS zamiast zmiennych Sass. W ten sposób uczysz się nowych umiejętności, które mogą się opłacić, jeśli/gdy zostaną ustandaryzowane.

Lubię:

• Głównie zalety wymienione powyżej.
• Mniej kodu pisanego w JavaScript, co dobrze współgra z Node.

Nie lubię:

• Używam Sass za pośrednictwem node-sass, który jest bindingiem dla LibSass napisanym w C++. Muszę go często rekompilować podczas przełączania między wersjami node'a.
• W Less nazwy zmiennych są poprzedzone znakiem @, co może być mylone z natywnymi słowami kluczowymi CSS, takimi jak @media, @import i reguła @font-face.

Użyj @font-face i zdefiniuj font-family dla różnych font-weightów.

Ta część jest związana z powyższym tematem dotyczącym pisania wydajnego CSS. Przeglądarki dopasowują selektory od prawej strony (selektor kluczowy) do lewej. Przeglądarki filtrują elementy w DOM zgodnie z selektorem kluczowym i przechodzą w górę po elementach nadrzędnych, aby określić dopasowania. Im krótsza długość łańcucha selektorów, tym szybciej przeglądarka może określić, czy dany element pasuje do selektora.

Na przykład z selektorem p span, przeglądarki najpierw znajdują wszystkie elementy <span> i przechodzą w górę po ich rodzicach aż do korzenia, aby znaleźć element <p>. Dla konkretnego <span>, gdy tylko znajdzie <p>, wie, że <span> pasuje i może zakończyć dopasowywanie.

Pseudo-element CSS to słowo kluczowe dodane do selektora, które pozwala stylizować określoną część wybranych elementów. Mogą być używane do dekoracji (:first-line, :first-letter) lub dodawania elementów do znaczników (w połączeniu z content: ...) bez konieczności modyfikowania znaczników (:before, :after).

• :first-line i :first-letter mogą być używane do dekorowania tekstu.
• Używane w hacku .clearfix, jak pokazano powyżej, aby dodać element o zerowej przestrzeni z clear: both.
• Trójkątne strzałki w dymkach narzędzi używają :before i :after. Sprzyja to separacji problemów, ponieważ trójkąt jest uważany za część stylizacji, a nie naprawdę DOM.

Model pudełkowy CSS opisuje prostokątne pudełka, które są generowane dla elementów w drzewie dokumentu i układane zgodnie z wizualnym modelem formatowania. Każde pudełko ma obszar zawartości (np. tekst, obraz itp.) oraz opcjonalne otaczające obszary padding, border i margin.

Model pudełkowy CSS jest odpowiedzialny za obliczanie:

• Ile miejsca zajmuje element blokowy.
• Czy granice i/lub marginesy nakładają się, czy też zwijają.
• Wymiary pudełka.

Model pudełkowy ma następujące zasady:

• Wymiary elementu blokowego są obliczane przez width, height, padding, borders i margins.
• Jeśli nie określono height, element blokowy będzie tak wysoki, jak zawartość, którą zawiera, plus padding (chyba że są pływaki, patrz poniżej).
• Jeśli nie określono width, element blokowy niepływający rozszerzy się, aby dopasować szerokość swojego elementu nadrzędnego minus padding.
• height elementu jest obliczane przez height zawartości.
• width elementu jest obliczane przez width zawartości.
• Domyślnie paddingi i bordery nie są częścią width i height elementu.

• Domyślnie elementy mają zastosowany box-sizing: content-box, i uwzględniany jest tylko rozmiar zawartości.
• box-sizing: border-box zmienia sposób obliczania width i height elementów, border i padding są również uwzględniane w obliczeniach.
• height elementu jest teraz obliczane przez height zawartości + pionowy padding + pionowa szerokość border.
• width elementu jest teraz obliczane przez width zawartości + poziomy padding + pozioma szerokość border.
• Uwzględnienie paddingów i borderów jako części naszego modelu pudełkowego lepiej współgra z tym, jak projektanci faktycznie wyobrażają sobie treść w siatkach.

• none, block, inline, inline-block, flex, grid, table, table-row, table-cell, list-item.

| display | Opis | | :-- | :-- | | none | Nie wyświetla elementu (element nie wpływa już na układ dokumentu). Wszystkie elementy potomne również nie są już wyświetlane. Dokument jest renderowany tak, jakby element nie istniał w drzewie dokumentu | | block | Element zajmuje całą linię w kierunku bloku (co jest zazwyczaj poziome) | | inline | Elementy mogą być układane obok siebie | | inline-block | Podobny do inline, ale pozwala na niektóre właściwości block, takie jak ustawianie width i height | | table | Zachowuje się jak element <table> | | table-row | Zachowuje się jak element <tr> | | table-cell | Zachowuje się jak element <td> | | list-item | Zachowuje się jak element <li>, co pozwala mu definiować list-style-type i list-style-position |

Dla pewności dorzucę porównanie z block.

| | block | inline-block | inline | | --- | --- | --- | --- | | Rozmiar | Wypełnia szerokość swojego kontenera nadrzędnego. | Zależy od zawartości. | Zależy od zawartości. | | Pozycjonowanie | Rozpoczyna się w nowej linii i nie toleruje żadnych elementów HTML obok siebie (chyba że dodasz float) | Płynie wraz z inną zawartością i pozwala na inne elementy obok siebie. | Płynie wraz z inną zawartością i pozwala na inne elementy obok siebie. | | Możliwość określenia width i height | Tak | Tak | Nie. Zostanie zignorowane, jeśli zostanie ustawione. | | Możliwość wyrównania za pomocą vertical-align | Nie | Tak | Tak | | Marginesy i wypełnienia | Wszystkie strony szanowane. | Wszystkie strony szanowane. | Tylko strony poziome szanowane. Strony pionowe, jeśli określone, nie wpływają na układ. Zajmowana przestrzeń pionowa zależy od line-height, chociaż border i padding wizualnie pojawiają się wokół zawartości. | | Float | - | - | Staje się jak element block, w którym można ustawiać pionowe marginesy i wypełnienia. |

Element pozycjonowany to element, którego obliczona właściwość position to relative, absolute, fixed lub sticky.

• static - Domyślna pozycja; element będzie płynął w stronę tak, jak zwykle. Właściwości top, right, bottom, left i z-index nie mają zastosowania.
• relative - Pozycja elementu jest dostosowywana względem samego siebie, bez zmiany układu (i w ten sposób pozostawia lukę na element tam, gdzie by się znajdował, gdyby nie był pozycjonowany).
• absolute - Element jest usuwany z przepływu strony i pozycjonowany w określonej pozycji względem najbliższego pozycjonowanego przodka, jeśli taki istnieje, lub w przeciwnym razie względem początkowego bloku zawierającego. Absolutnie pozycjonowane bloki mogą mieć marginesy, i nie zwijają się z żadnymi innymi marginesami. Te elementy nie wpływają na pozycję innych elementów.
• fixed - Element jest usuwany z przepływu strony i pozycjonowany w określonej pozycji względem obszaru widoku i nie przesuwa się podczas przewijania.
• sticky - Pozycjonowanie 'sticky' to hybryda pozycjonowania względnego i stałego. Element jest traktowany jako relative pozycjonowany, dopóki nie przekroczy określonego progu, w którym to momencie jest traktowany jako fixed pozycjonowany.

• Bootstrap - Powolny cykl wydawniczy. Bootstrap 4 był w fazie alfa przez prawie 2 lata. Dodaj komponent przycisku spinnera, ponieważ jest szeroko używany.
• Semantic UI - Struktura kodu źródłowego sprawia, że dostosowywanie motywu jest niezwykle trudne do zrozumienia. Jego niekonwencjonalny system tematyczny jest koszmarem do dostosowywania. Ścieżka konfiguracji zakodowana na stałe w bibliotece dostawcy. Nie jest dobrze zaprojektowany do nadpisywania zmiennych, w przeciwieństwie do Bootstrapa.
• Bulma - Wiele niesemantycznych i zbędnych klas oraz znaczników. Brak kompatybilności wstecznej. Aktualizacja wersji subtelnie psuje aplikację.

Tak. Flexbox jest głównie przeznaczony do układów jednowymiarowych, podczas gdy Grid jest przeznaczony do układów dwuwymiarowych.

Flexbox rozwiązuje wiele typowych problemów w CSS, takich jak pionowe centrowanie elementów w kontenerze, sticky footer itp. Bootstrap i Bulma są oparte na Flexbox, i jest to prawdopodobnie zalecany sposób tworzenia układów w dzisiejszych czasach. Próbowałem Flexbox wcześniej, ale napotkałem problemy z niekompatybilnością przeglądarek (Safari) w użyciu flex-grow, i musiałem przepisać swój kod używając inline-blocks i matematyki do obliczania szerokości w procentach, nie było to przyjemne doświadczenie.

Grid jest zdecydowanie najbardziej intuicyjnym podejściem do tworzenia układów opartych na siatce (i lepiej, żeby tak było!), ale obsługa przeglądarek nie jest obecnie szeroka.

Należy pamiętać, że te dwa podejścia nie wykluczają się wzajemnie.

Uczynienie strony responsywnej oznacza, że niektóre elementy będą reagować, dostosowując swój rozmiar lub inną funkcjonalność do rozmiaru ekranu urządzenia, zazwyczaj szerokości viewportu, za pomocą zapytań medialnych CSS, na przykład zmniejszając rozmiar czcionki na mniejszych urządzeniach.

@media (min-width: 601px) {
  .my-class {
    font-size: 24px;
  }
}

@media (max-width: 600px) {
  .my-class {
    font-size: 12px;
  }
}

Strategia mobile-first również jest responsywna, jednak zakłada, że powinniśmy domyślnie definiować wszystkie style dla urządzeń mobilnych, a dopiero później dodawać specyficzne reguły responsywne dla innych urządzeń. Kontynuując poprzedni przykład:

.my-class {
  font-size: 12px;
}

@media (min-width: 600px) {
  .my-class {
    font-size: 24px;
  }
}

Strategia mobile-first ma 2 główne zalety:

• Jest bardziej wydajna na urządzeniach mobilnych, ponieważ wszystkie zastosowane dla nich reguły nie muszą być walidowane względem żadnych zapytań medialnych.
• Zmusza do pisania czystszego kodu w odniesieniu do responsywnych reguł CSS.

Zarówno projektowanie responsywne, jak i adaptacyjne mają na celu optymalizację doświadczeń użytkownika na różnych urządzeniach, dostosowując się do różnych rozmiarów obszarów widoku, rozdzielczości, kontekstów użytkowania, mechanizmów sterowania itd.

Projektowanie responsywne opiera się na zasadzie elastyczności – jedna płynna strona internetowa, która może dobrze wyglądać na każdym urządzeniu. Strony responsywne wykorzystują zapytania medialne, elastyczne siatki i responsywne obrazy, aby stworzyć doświadczenie użytkownika, które elastycznie się zmienia w zależności od wielu czynników. Podobnie jak jedna piłka rosnąca lub kurcząca się, aby przejść przez kilka różnych obręczy.

Projektowanie adaptacyjne jest bardziej podobne do współczesnej definicji progresywnego ulepszania. Zamiast jednego elastycznego projektu, projekt adaptacyjny wykrywa urządzenie i inne funkcje, a następnie dostarcza odpowiednią funkcję i układ w oparciu o zdefiniowany zestaw rozmiarów obszarów widoku i inne charakterystyki. Strona wykrywa typ używanego urządzenia i dostarcza wstępnie ustawiony układ dla tego urządzenia. Zamiast jednej piłki przechodzącej przez kilka obręczy o różnych rozmiarach, miałbyś kilka różnych piłek do użycia w zależności od rozmiaru obręczy.

Obie te metody mają pewne problemy, które należy wziąć pod uwagę:

• Projektowanie responsywne może być dość trudne, ponieważ w zasadzie używasz jednego, choć responsywnego układu, aby pasował do wszystkich sytuacji. Jednym z takich wyzwań jest ustawienie punktów przerwania zapytań medialnych. Czy używasz znormalizowanych wartości punktów przerwania? Czy też używasz punktów przerwania, które mają sens dla twojego konkretnego układu? Co jeśli ten układ się zmieni?
• Projektowanie adaptacyjne generalnie wymaga sniffingu user agentów, wykrywania DPI itp., z których wszystkie mogą okazać się zawodne.

Retina to tylko termin marketingowy odnoszący się do ekranów o wysokiej rozdzielczości ze współczynnikiem pikseli większym niż 1. Kluczową rzeczą jest to, że użycie współczynnika pikseli oznacza, że te wyświetlacze emulują ekran o niższej rozdzielczości, aby wyświetlać elementy o tym samym rozmiarze. Obecnie wszystkie urządzenia mobilne uważamy za ekrany Retina de facto.

Przeglądarki domyślnie renderują elementy DOM zgodnie z rozdzielczością urządzenia, z wyjątkiem obrazów.

Aby mieć wyraźne, dobrze wyglądające grafiki, które najlepiej wykorzystują wyświetlacze Retina, musimy używać obrazów o wysokiej rozdzielczości, gdy tylko jest to możliwe. Jednak używanie zawsze obrazów o najwyższej rozdzielczości będzie miało wpływ na wydajność, ponieważ więcej bajtów będzie musiało zostać przesłanych przez sieć.

Aby przezwyciężyć ten problem, możemy użyć responsywnych obrazów, zgodnie ze specyfikacją HTML5. Wymaga to udostępnienia przeglądarce plików obrazów w różnych rozdzielczościach i pozwolenia jej na podjęcie decyzji, który obraz jest najlepszy, używając atrybutu HTML srcset i opcjonalnie sizes, na przykład:

<div responsive-background-image>
  <img
    src="/images/test-1600.jpg"
    sizes="
      (min-width: 768px) 50vw,
      (min-width: 1024px) 66vw,
      100vw"
    srcset="
      /images/test-400.jpg   400w,
      /images/test-800.jpg   800w,
      /images/test-1200.jpg 1200w
    " />
</div>

Warto zauważyć, że przeglądarki, które nie obsługują srcset z HTML5 (np. IE11), zignorują go i użyją zamiast tego src. Jeśli naprawdę potrzebujemy obsługi IE11 i chcemy zapewnić tę funkcję ze względów wydajnościowych, możemy użyć polyfilla JavaScript, np.

Do ikon wybrałbym również SVG i czcionki ikon, jeśli to możliwe, ponieważ renderują się one bardzo wyraźnie niezależnie od rozdzielczości.

translate() jest wartością właściwości CSS transform. Zmiana transform lub opacity nie wyzwala ponownego rozkładu lub ponownego malowania przeglądarki, ale wyzwala kompozycje; natomiast zmiana pozycjonowania absolutnego wyzwala reflow. transform powoduje, że przeglądarka tworzy warstwę GPU dla elementu, ale zmiana właściwości pozycjonowania absolutnego wykorzystuje CPU. Stąd translate() jest bardziej wydajny i skutkuje krótszymi czasami malowania, co zapewnia płynniejsze animacje.

Podczas używania translate(), element nadal zajmuje swoją oryginalną przestrzeń (coś w rodzaju position: relative), w przeciwieństwie do zmiany pozycjonowania absolutnego.