HTML6: Mikä se on ja milloin se saapuu?

Milloin voimme odottaa HTML6:ta? WHATWG – standardointielin, joka ajaa HTML-määrittelyn muutoksia – on päättänyt ottaa käyttöön ”elävän asiakirjan” lähestymistavan standardointiin. Tämä tarkoittaa sitä, että se, mitä kutsumme HTML6:ksi, ei todennäköisesti tule olemaan suuri päivitys, vaan se koostuu pikemminkin pienemmistä muutoksista, joita tehdään määrittelyyn useammin.

HTML-määrityksiä kuitenkin tarkistetaan ja parannetaan koko ajan. Selainvalmistajat ovat aina kiireisiä toteuttamaan viimeisimpiä ominaisuuksia julkaistavaksi laajempaan maailmaan, mikä tarkoittaa, että saamme aina uusia asioita kokeiltavaksemme (ehkäpä samalla kun kokeilemme yhtä parhaista verkkosivujen rakentajista). Tielläsi on muutoksia, jotka kannattaa huomioida – lue lisää ja tutustu kahteen pelimuutokseen.

Täällä ollessasi saatat haluta tutustua myös aloittelijan oppaaseen HTML-tunnisteista tai selata valikoimaamme parhaista HTML-rajapinnoista. Lisäksi, jos haluat parantaa prosessiasi entisestään, varmista, että web-hosting-palvelusi sopii sinulle täydellisesti ja että kaikki mediasi on turvallisesti varmuuskopioitu parhaaseen pilvitallennusvaihtoehtoon.

Natiivit modaalit

Yksi selaimiin tiensä tekevä muutos on <dialogi>-elementti. Se toimii natiivina vastineena JavaScript-pohjaisille modaalisille ikkunoille, jotka ovat yleinen suunnittelumalli monilla sivustoilla.

<dialog open> <p>This is a HTML-powered dialog box.</p></dialog>

Se voidaan avata ja sulkea vaihtamalla open-attribuuttia. Oletusarvoisesti se näkyy leijuen sen yläpuolella, mihin se on sijoitettu sivulla. Sen openModal-metodin kutsuminen JavaScriptin kautta käyttää tällöin tutumpaa modaalin kaltaista käyttöliittymää.

Oletusarvoisesti tausta muuttuu harmaaksi, eikä sen alla oleva sisältö ole enää vuorovaikutteista.

<dialog> <form method="dialog"> <input type="submit" value="Yes" /> <input type="submit" value="No" /> </form></dialog>

Modaalisen dialogin sisällä olevilla lomakkeilla voi olla metodiattribuutti dialog, joka lähettää arvon ja välittää arvon takaisin itse dialogiobjektille. Tämä tekee <dialogista> loistavan työkalun toimintojen vahvistamiseen tai muuhun pieneen vuorovaikutukseen.

Elementti on standardoitu, ja tällä hetkellä vain Chromen ja Samsungin Internet-selaimilla on täysi tuki. Ne, joissa sitä ei ole, näyttävät edelleen dialogin sisällön, mutta se sijoitetaan sen sijaan sivun sisälle.

Smarter-valikot

Joidenkin verkkosovellusten avulla käyttäjät voivat suorittaa toimintoryhmiä käyttöliittymässään. Nämä vaikuttaisivat nykyiseen sivuun jossakin muodossa, kuten lisäämällä kohteen luetteloon.

Varemmin nämä merkittiin <ul> – järjestämättömänä luettelona toimista, joita käyttäjä voisi tehdä. Vaikka <ul> on tarkoitettu näyttökohteiden luetteloon, se ei sovellu parhaiten vuorovaikutteisiin elementteihin.

<menu type="toolbar"> <li><button>Cut</button></li> <li><button>Copy</button></li> <li><button>Paste</button></li></menu>

Valikko sisältää joukon toimintoja, jotka käynnistettäisiin niiden sisällä olevilla <painike>-elementeillä. Muuten <valikko>-elementti ei käyttäydy eri tavalla kuin tavallinen elementtilista. Kun selainten omaksuminen paranee, se voi auttaa avustavia teknologioita löytämään nämä interaktiiviset elementit helpommin.

Määrittelyyn tulee jatkuvasti monia pienempiä muutoksia, jotka tekevät tiensä selaimiin. Pidä silmällä kunkin selaimen päivityssivuja ja tutustu WHATWG:n elävään standardiin.

Tämä tieto ilmestyi alun perin Web Designer -lehdessä. Tutustu kaikkiin Web Designer -artikkeleihin CB:ssä.

• 8 HTML-tunnistetta, joita sinun on käytettävä (ja 5 vältettävää)
• Miten yhtenäistät UX:ääsi eri alustoilla
• 16 upeaa parallax-skrollausta sisältävää verkkosivustoa