Un ghid de referință cu tehnici practice CSS, optimizări tipografice cross-browser și stilizări pentru ecrane mobile.
Lizibilitate tipografică și ligaturi
Activează kerning-ul și ligaturile opționale pentru titluri:
h1, h2, h3 {
text-rendering: optimizeLegibility;
font-feature-settings: "kern" 1, "liga" 1;
}
Efect de text cu degrade (Gradient Text)
Randează degradeuri liniare direct în interiorul glifelor de text:
.gradient-text {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
Contur exterior de text (Text Stroke)
Adaugă o linie de contur caracterelor textului:
.stroked-heading {
-webkit-text-stroke: 1.5px #111;
color: white;
}
Optimizări tactile și WebKit pentru dispozitive mobile
Dezactivează evidențierea la atingere și meniurile la apăsare prelungită:
* {
/* Elimină chenarul de evidențiere la atingere pe mobil */
-webkit-tap-highlight-color: transparent;
/* Dezactivează meniul contextual iOS la apăsare lungă */
-webkit-touch-callout: none;
}
/* Elimină conturul de focus la clic, păstrând navigarea din tastatură */
a:focus:not(:focus-visible) {
outline: none;
}
Derulare lină accelerată hardware
.scroll-container {
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* Derulare cu inerție pe versiuni mai vechi de Safari pe iOS */
overscroll-behavior-y: contain; /* Previne declanșarea involuntară a reîncărcării paginii */
}