Guy Routledge ne duce iar prin tărâmul neguros al CSS3 și HTML5 de unde putem învăța cum să ne folosim de pseudoclasa :required și de mici trucuri pentru a face validarea formularelor fără să folosim javascript. Am văzut că în ultimii ani s-a pus accentul pe mutarea unor efecte/acțiuni din lumea javascript în cea a CSS3/HTML5.
Înaine aveai nevoie de javascript să faci ceva animații sau tranziții, acum faci asta cu @keyframes și animation iar validarea o făceai cu onkeypress sau prin orice alte metode doreai, dar HTML5 te ajută în acest caz.
Pentru a avea un formular ca în filmul de mai sus trebuie să ai fiecare label după input și ambele trebuie puse într-un div. Vei plasa label în stranga cu float: left și input în dreapta cu float: right.
Exemplu:
< div>
< input id="name" type="text" required>
< label for="name">Your name< /label>
< /div>
Pentru a indica faptul că un câmp este obligatoriu vom afișa * la dreapta fiecărui label corespunzător câmpului obligatoriu. Vei vedea că folosim selectorul sibling ~ care are rolul de a căuta elemente care sunt de acealași nivel cu primul specificat. În cazul nostru label este sibling pentru input.
input:required ~ label:after {
content: „*”;
color: #cc3f85;
}
#cc3f85 – o nuanță de roșu.
Pentru a indica faptul că un câmp este optional vom adăuga (optional) după fiecare asemenea label:
input:optional ~ label:after {
content: „(optional)”;
color: #ccc;
}
#ccc – o nuanță de gri. Fiecare elemente HTML poate avea un :before și un :after, așa că ai libertate mare de joacă aici.
Sau, dacă vrem să arătăm că un câmp nu este completat corespunzător ne vom folosi de codul de mai jos ca să afișăm o umbră roșie:
input:not([type=’submit’):focus:invalid {
box-shadow: 0 0 10px red;
}
Pentru un câmp completat bine avem umbră verde:
input:not([type=’submit’):focus:valid {
box-shadow: 0 0 10px green;
}
Dacă vrem să afișăm un mesaj legat de validare, atunci putem avea ceva în genul:
input:not([type=’submit’):focus:invalid ~label:after {
content: „Not good”;
color: #cc3f85;
}
Adică, dacă suntem în câmp și nu este completat cum trebuie, atunci label va afișa, după acest element, „Not Good”.
Codurile CSS de mai sus sunt mai greu de înțeles dacă nu știi să te folosești de selectori avansați din CSS.
Pe scurt: prin CSS poți targeta orice element și, mai mult, poți targeta elemente pe baza atributelor lor. Mai mult, poți targeta elemente pe baza unor valori ale atributelor lor. Flexibilitatea este enormă!
De exemplu, dacă vreau ca toate linkurire outbound, care duc de pe blogul meu spre alt site, să fie colorate în roșu, atunci folosesc codul de mai jos:
a:not([href*=’manuelcheta.com’]) {
color: #cc3f85;
}
Aducându-ne aminte de anumiți selectori vom citi codul de mai sus așa: toate linkurile care, în atributul lor href, nu conțin „manuelcheta.com” să fie colorate în roșu.
Așadar, din codul de mai sus avem așa:
– not() – bun de folosit pentru a obține reversul unei selecții anume
– * semnifică: ceea ce conține stringul specificat, adică se uită după manuelcheta.com în href, indiferent unde este poziționat. Ai mai putea folosi ^ pentru a specifica un atribut care începe cu un string anume
– [href*=’manuelcheta.com’] – targetarea atributelor se face folosindu-ne de paranteze drepte [] în interiorul cărora specificăm fie atributul, fie atributul și o valoare căutată, moment în care avem acem semn egal =.
Alte exemple de selectori avansați:
– toate linkurile care au atributul rel
a[rel] { }
– anumite div-uri care au clase ce încep cu „box”:
div[class^=’box’] { }
– imagini care au title gol:
img[title=”] { }
– linkurile active:
a[class=’Active’] { }
Exemplele pot continua, dar sper că ai prins ideea.
Cu selectori avansați și cu cele învățate în seria CSS de la A la Z poți face un cod foarte interesant.
Ce mai poți face în CSS:
– O multitudine de forme, printre care și inimă sau pac-man
– Efect Glitch – bine, aici se intră în sassy, dar ca idee
Resurse:
– CSS de la A la Z – Guy Routledge
– Selectori CSS avansați
– CSS Guidelines
– Convenții de cod javascript, când chiar nu ai scăpare