Am făcut o greșeală teribilă când am scris pe Twitter :empty
și :blank
cu ceva timp in urma. am spus că :empty
nu a fost util și :blank
este mult mai util decât :empty
.

Am gresit!
:empty
este de fapt suficient de bun. Nici nu avem nevoie :blank
!
O introducere rapidă
Bine, mai întâi, ce este :empty
si ce este :blank
?
:empty
este un pseudo-selector. Vă permite să selectați elemente care sunt goale.
/* This is CSS */
:empty { /* do something */}
Elementele goale sunt elemente care nu au nimic în ele. Nu poate avea nici măcar un spațiu alb.
<!-- This is html -->
<!-- Example of an empty element --><div></div>
Totuși, elementele goale pot avea comentarii, atâta timp cât comentariile completează întregul element.
<!-- This is html -->
<!-- Empty elements can have comments --><div><!-- this is a comment --></div>
:blank
este o formă alimentată de :empty
. Vă permite să selectați elemente care au spații albe în ele:
<!-- This is html -->
<!-- Matched with :blank but not with :empty --><div> </div>
Ambii :empty
și :blank
sunt utile dacă este nevoie să:
- Stilează un element gol
- Creați stări goale
Un exemplu
Să presupunem că aveți un <d
iv>. Vei umple doar this
<!-- This is html -->
<!-- Without errors --><div class="error"></div>
<!-- With errors --><div class="error">Whoops! Something went wrong!</div>
Aici, trebuie să aranjați .error
div. Dacă nu folosiți :empty
, trebuie să vă bazați pe o clasă sau un atribut. Acest lucru se simte redundant.
<!-- This is html -->
<!-- With errors --><div class="error" data-state="error">Whoops! Something went wrong!</div>
/* This is CSS */
.error { display: none; background-color: hsl(0, 20%, 50%); padding: 0.5em 0.75em;}
.error[data-state="error"] { display: block;}
Dar dacă folosești :empty
, nu aveți nevoie de clasa sau atributul suplimentar. Puteți stiliza clasa .error direct. Nici nu ai nevoie display: none;
!
/* This is CSS */
.error { background-color: hsl(0, 20%, 50%); padding: 0.5em 0.75em;}
.error:empty { padding: 0;}
Iată un codepen Demo gol Am creat pentru a vă juca cu (încercați să eliminați padding: 0;
din .error:empty
, veți vedea un fundal roșu?).
Să presupunem că doriți să creați o listă de tot. Când utilizatorii dvs. văd lista pentru toate lucrurile pentru prima dată, probabil că vor vedea zero articole pentru toate lucrurile.
Ce arăți când sunt zero todos?
Această stare zero tot este ceea ce numim o stare goală.
Dacă doriți să creați o stare goală pentru lista de lucruri, puteți adăuga un plus <d
iv> după you
r
- . Când faceți acest lucru, puteți utiliza un com
binati
pe de: emp
ty și + (adiacent s
ibling) sau selectorul ~ (frate ulterior) pentru a stiliza starea goală.<!-- This is html -->
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ul><div class="empty-state"></div>
/* This is CSS */
.empty-state { display: none;}
ul:empty + .empty-state { display: block;}
Am învățat cum să folosesc :empty
în acest fel de la Heydon Pickering. Verifică Articolul lui Heydon pe Componente incluzive dacă doriți să vedeți exemplul de listă de lucruri la lucru.
Notă: stările goale sunt importante. Dacă aveți nevoie de ceva convingător, verificați Acest articol pe Invision.
Demontând raționamentul meu
:empty
este adesea suficient în practică. am simțit :empty
nu este suficient de bun din două motive:
- Experiență slabă a dezvoltatorului
- Va trebui să decupez manual spațiile albe cu JavaScript
Primul motiv este valid, dar nu este mare lucru.
Al doilea motiv nu este valid. Am presupus că trebuie să tund spațiile albe, dar nu trebuie.
Te voi plimba prin amândoi.
Să ne întoarcem la exemplul de listă de tot. Să presupunem că am creat o listă de lucruri de făcut și că avem acest marcaj.
<!-- This is html -->
<ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li></ul><div class="empty-state"></div>
Cum ați verifica dacă :empty
Lucram?
Ei bine, aș înlătura fiecare <
li> wi
a c
md + x. Această comandă taie întreaga linie. Când am eliminat toate thre
e
<!-- This is html -->
<ul></ul>
Până acum, veți ști că HTML-ul de mai sus nu se va declanșa :empty
. :empty
funcționează numai atunci când nu există spații albe în element.
A trebuit să îndepărtez spațiile albe pentru :empty
să lucreze, ceea ce înseamnă încă câteva apăsări de taste. Aceasta a fost o corvoadă prin care am sperat că nu va trebui să trec.
Dar, din nou, este o mică problemă pentru un mare beneficiu.
O spun din nou. Nu trebuie să tăiați manual spațiile albe în JavaScript dacă folosești :empty
. Am făcut o presupunere greșită.
Să trecem printr-un exemplu și veți vedea la ce mă refer. Vom folosi exemplul de listă de lucruri tot o dată.
Spuneți că avem acest cod HTML chiar acum:
<!-- This is html -->
<ul> <li>Item 1</li></ul><div class="empty-state"></div>
Pentru ca starea goală să funcționeze, trebuie să eliminăm ultima <
li> item fro
m
- . Dacă utilizați JavaScript simplu, puteți d
o this with
removeChild.// This is JavaScript
const ul = document.querySelector('ul')const li = ul.children[0]
ul.removeChild(li)
Am crezut (eronat) că removeChild
va produce acest HTML:
<!-- This is html -->
<ul></ul>
Dacă produce acest HTML, va trebui să decupez orice spațiu alb rămas în listă (care este JavaScript suplimentar).
// This is JavaScript
const ul = document.querySelector('ul')const li = ul.children[0]
ul.removeChild(li)
if (ul.children.length === 0) { ul.innerHTML = ''}
Așa cum am spus, m-am înșelat. Nu a produs codul HTML de mai sus. În schimb, acesta este ceea ce a produs:
<!-- This is html -->
<ul></ul>
Ceea ce înseamnă că nu am avut nevoie de JavaScript suplimentar pentru a tăia spațiul alb!
Declinare de responsabilitate: Am verificat ieșirea pe Safari, Chrome și Firefox. Totuși, încă nu am verificat Edge. Voi fi foarte recunoscător dacă mă puteți ajuta să testez!
Iată codul pentru acest exemplu:
Vezi stiloul Demo gol cu todolist Am facut (@zellwk) pe CodePen.
:empty
este acceptat pe toate browserele și :blank
are un suport slab pentru browser. Acest lucru vă oferă multe motive pentru utilizare :empty
peste :blank
astăzi!

Sper că suportul pentru browser :blank
se îmbunătățește într-o zi totuși.
Înfășurându-se
:empty
și :blank
vă permite să stilizați elementele goale și să produceți stări goale cu ușurință.
:blank
e mai bine ca :empty
deoarece ne oferă o experiență mai bună pentru dezvoltatori. Dar nu putem folosi :blank
deoarece :blank
nu are suficient suport pentru browser.
:empty
este adesea suficient de bun. O puteți folosi deja. Folosește-l tot ce vrei! ?
Da :empty
du-te și anunță-mă ce crezi!
Mulțumesc pentru lectură. Acest articol v-a ajutat în vreun fel? Daca ai facut, Sper să vă gândiți să îl împărtășiți. Ai putea ajuta pe cineva. Mulțumesc!
Acest articol a fost inițial postat la blogul meu.
Înscrieți-vă pentru buletin informativ dacă doriți mai multe articole care să vă ajute să deveniți un dezvoltator frontend mai bun.
#Când #utilizează #pseudoselectoarele #CSS #empty #și #blank
Când se utilizează pseudo-selectoarele CSS: empty și: blank