Zbiór praktycznych technik CSS, ulepszeń typograficznych dla różnych przeglądarek oraz sztuczek dla urządzeń mobilnych.
Czytelność typograficzna i ligatury
Włącza kerning i opcjonalne ligatury dla nagłówków:
h1, h2, h3 {
text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1, "liga" 1;
}
Efekt tekstu z gradientem
Renderowanie liniowych gradientów bezpośrednio wewnątrz glifów tekstu:
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
Obrys tekstu (Text Stroke)
Dodaje zewnętrzny obrys do znaków tekstu:
.stroked-heading {
-webkit-text-stroke: 1.5px #111;
color: white;
}
Optymalizacje dotykowe i WebKit dla urządzeń mobilnych
Wyłączenie domyślnego podświetlenia dotykowego oraz menu kontekstowego przy długim naciśnięciu:
* {
/* Usunięcie ramki podświetlenia dotykowego na urządzeniach mobilnych */
-webkit-tap-highlight-color: transparent;
/* Wyłączenie menu kontekstowego iOS przy długim naciśnięciu */
-webkit-touch-callout: none;
}
/* Usunięcie obrysu fokusu przy kliknięciu z zachowaniem fokusu klawiatury */
a:focus:not(:focus-visible) {
outline: none;
}
Płynne przewijanie bezwładnościowe z akceleracją sprzętową
.scroll-container {
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* Przewijanie bezwładnościowe na starszych wersjach Safari w iOS */
overscroll-behavior-y: contain; /* Zapobieganie łańcuchowemu odświeżaniu strony */
}