Yhteenveto viimeaikaisista asiakirjoista

Lähdesolmu: 1586057

Ei ole jokapäiväistä, että HTML-otsikot ovat aiheena de jour, mutta tallennettujen linkkien kansioon kerääntyy artikkeleita aiheesta äskettäin yhdistetty asiakirjan ääriviivaalgoritmin poistaminen WHATWG Living Standardissa.

Ensinnäkin sinun pitäisi tietää, että algoritmia ei ole koskaan ollut olemassa. Tietysti se oli spesifikaatiossa. Ja toki, spesifikaatioissa oli varoitus sen käytöstä. Mutta mikään selain ei ole koskaan ottanut sitä käyttöön, kuten Bruce Lawson muistutti meitä. Olemme eläneet tasaisessa dokumenttirakenteessa koko ajan.

Tämä on hyvin vanhoja uutisia. Adrian Roselli on kirjoittanut dokumentin ääriviivojen myytistä koska 2013. Mutta se on hänen vuoden 2016 postauksensa nimeltään "Ei ole asiakirjan ääriviivaalgoritmia" joka selittää sen kattavasti, ja sitä on päivitetty säännöllisesti ylimääräisillä kontekstihippuilla keskusteluista ja kamppailuista, jotka saivat meidät tänne. Tämä on todellakin saagan paras aikajana. Amelia Bellamy-Royds on myös syventyi dilemman juuriin aiemmin täällä CSS-Tricksissä.

Mieleeni siirtyy heti kaikkeen työhön, joka on tehty osiointia tukevan asiakirjan ääriviivaalgoritmin tekemiseen. Sen poistaminen teknisistä tiedoista on varmasti oikea kehotus, mutta se ei poista siihen tehtyjä rajuja ponnisteluja, vaikka se on nyt haudattu johonkin versiohistoriaan. Ajattelen myös kaikkia hyvää tarkoittavia ihmisiä, jotka ovat kirjoittaneet algoritmista virheellisesti ajan myötä (mukaan lukien tällä sivustolla!) odottaen, että se oli aivan nurkan takana. Meillä on lähes seitsemän vuoden henkistä ja teknistä velkaa, joka on kertynyt toiminnan puutteelta.

Katsoessaan ohi "uutisen", jonka mukaan algoritmia ei virallisesti enää ole, Bruce valittaa, ettei ole olemassa yleistä <h> elementti tai vastaava, joka voidaan jakaa oikean otsikkotason tuottamiseksi. Olen samaa mieltä. joilla on <h1> elementti oleellisesti olemassa paljastettuna <title> on rajoittava, varsinkin kun sivut rakentuvat harvoin yhden artikkelin ympärille, jolla on yksi ylätason otsikko. Huomaan usein tupsahtavan joka kerta, kun teen jotain korttikomponenttia käyttäessäni <h3> saattaa olla teknisesti oikein, mutta tuntuu epäkunnossa. Ja se on ennen kuin edes puhumme tyylinäkökohdista, joissa alemman otsikkotason on nyt näytettävä selvästi korkeammalta otsikkotasolta.

Otsikkotason hallinnasta puhuttaessa Steve Faulknerilla (joka on kirjoittanut PR:n, joka poimi algoritmin teknisistä tiedoista) on erittäin käytännöllinen yleiskuvaus käytöstä <hgroup> elementti käsitellä otsikkomalleja, jotka sisältävät alaotsikoita, tekstityksiä, vaihtoehtoisia otsikoita, snd tunnuslauseita. Olen varma, että olet nähnyt tällaisia ​​merkintöjä luonnossa:

<h1>Disappointingly Average</h1>
<h2>The Autobiography of Geoff Graham</h2>
<h3>by Geoff Graham</h3>

Se ei päde tasaisella asiakirjan ääriviivalla, joka perustuu otsikkotasoihin. Jokainen näistä otsikoista edustaa osaa, joka muodostaa tietohierarkian:

Disappointingly Average
└── The Autobiography of Geoff Graham
    └── by Geoff Graham

Sen sijaan haluamme a ryhmä otsikoista. Viittaa <hgroup> elementti:

Kun sisäkkäinen a <hgroup> elementti, <p> elementin sisältö edustaa alaotsikkoa, vaihtoehtoista otsikkoa tai tunnuslausetta, jotka eivät sisälly asiakirjan luonnokseen.

Joten saamme tämän rakenteen:

<hgroup>
  <h1>Disappointingly Average</h1>
  <p>The Autobiography of Geoff Graham</p>
  <p>by Geoff Graham</p>
</hgroup>

<hgroup> is role=generic tällä hetkellä, mutta Steve viittaa ehdotukseen joka voisi kartoittaa sen role=group. Jos näin tapahtuu, esteettömyyspuu antaa avustavan tekniikan antaa semanttisemman merkityksen näille kappaleille tekstityksenä ja tunnuslausena, jota ne ovat. Kuulostaa helpolta, mutta Steve huomaa haasteita, jotka ovat tiellä. Hän myös esittelee, kuinka tällainen malli voitaisiin toteuttaa nykyään ARIA-attribuuttien avulla.

Niin kauan kuin pyöristetään asioita, Matthias Ott julkaisi muutamia vinkkejä jäsennellyn ääriviivan luominen otsikoineen. Katso lopusta upea luettelo työkaluista, joilla voit tarkistaa otsikon ääriviivat.

Aikaleima:

Lisää aiheesta CSS-temppuja