A trecut ceva vreme de când am pus ultimul articol despre CSS în care Guy Routledge ne povestește despre cum trebuie să folosim diverese reguli CSS sau CSS3. În filmul de mai sus vei învăța cum să folosești nth-child pentru a aplica stiluri CSS numai anumitor elemente-copii dintr-un părinte oarecare.
Dacă ai o listă neordonată, UL și vrei să schimbi at treilea element LI din acea listă vei folosi o regulă de genul:
ul li:nth-child(3) {
/* reguli css aici */
}
Cel mai des vei folosi nth-child la elementele unui meniu sau într-o listă de articole prezentate ca linkuri în sidebar. Vei descoperi că, dacă ai elemente de mai multe tipuri drept child, comanda nth-of-type() te va ajuta mult mai bine. Vezi exemple în filmul de mai sus.
@media queries sunt folosite pentru a defini reguli CSS în funcție de lățimea ecranului în cele mai multe cazuri. Poți targeta imprimanta, TV-ul sau orice tip de ecran.
O comandă de tipul:
@media print {
#header, #footer { display: none; }
}
va ascunde headerul și footerul atunci când printezi o pagină anume.
La fel, dacă vrei să folosești alte stiluri atunci când ecranul este între 720 și 1400px, atunci folosești ceva de genul:
@media screen and (min-width:720px) and (max-width:1400px) {
#header {
width: 720px;
}
}
Exemplul cu width: 720px nu e prea fericit pentru că în design responsiv vrei ca elementele să fie definite în procente și nu cu lățimi fixe, dar prinzi ideea cu @media queries. Mai multe detalii sunt date de către Guy în filmul de mai jos:
Cum obții un slideshow cu FADE effect în care folosești doar CSS3, opacity și @keyframes? Din filmul de mai jos vei vedea cum folosești @keyframes să definești diferite valori ale opacity în așa fel încât într-un slideshow cu 5 imagini, fiecare dintre aceste imagini să fie vizibilă doar 1/5 din timp.
Vei avea un cod HTML în care ai containerul slideshow-ului și slide-urile. Codul CSS va seta position relative și un width anume acelui container iar slide-urile vor fi poziționate absolut la stânga sus.
Practic ele se vor suprapune și doar ultima se va vedea dacă nu folosim apoi reguli CSS ca cea de mai jos pentru a stabili tranziții între imagini.
.slide1 {
animation: fade 20s infinte;
}
@keyframes fade {
0% { opacity: 0; }
10% { opacity: 1; }
20% { opacity: 1; }
30% { opacity: 0; }
100% { opacity: 0; }
}
E un mod ingenios prin care poți avea un FADE slideshow fără a avea nevoie de javascript:
Bonus: ca să vezi cum arată codul prelucrat de către Chrome sau orice alt browser trebuie să te înveți cu Dev Tools, intrumentarul oferit de Chrome, de exemplu, care te ajută să faci troubleshooting la greu.
Cei de la DevToolSecrets au o mulțime de sfaturi legate de Inspect Tool și de modul în care poate fi folosit cel mai bine. Așa am invățat HTML/CSS: mă uitam în DOM prelucrat cu Inspect Tool și mă jucam cu regulile CSS ca să văd ce se întâmplă.
Un lucru important: trebuie să te înveți să fixezi bara cu inspect Tool în a dreapta uneori. Poți face asta dacă mergi peste butonul Dock to Main Window și șții butonul mausului apăsat ca să alegi partea dreaptă. Te va ajuta în viitor.
Un alt lucru de ținut minte: tabul Network are o mulțime de informații care te ajută la troubleshoot atunci când un site nu se încarcă așa cum trebuie. Poți salva informațiile de load în cod HAR (click dreapta în tabul Network și alege Copy as HAR). Apoi folosești un HAR viewer ca ăsta sau ăsta ca să poți verifica informația mai târziu.
HAR = http archive.
Ce alte sfaturi legate de Inspect Tool ai?