Când se utilizează pseudo-selectoarele CSS: empty și: blank

/* This is CSS */

:empty { /* do something */}

<!-- This is html -->

<!-- Example of an empty element --><div></div>

<!-- This is html -->

<!-- Empty elements can have comments --><div><!-- this is a comment --></div>

<!-- This is html -->

<!-- Matched with :blank but not with :empty --><div> </div>

cu conținut atunci când apare o eroare.

<!-- 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 <div> după your

. Când faceți acest lucru, puteți utiliza un combinatipe de: empty și + (adiacent sibling) 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:

1. Experiență slabă a dezvoltatorului
2. 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> wia cmd + x. Această comandă taie întreaga linie. Când am eliminat toate three

• , voi termina cu acest marcaj:

  <!-- 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 from

  . Dacă utilizați JavaScript simplu, puteți do 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.