Kotisivu » Coding » 10 uutta HTML 5.1 -ominaisuutta ja niiden käyttöä IRL

    10 uutta HTML 5.1 -ominaisuutta ja niiden käyttöä IRL

    HTML-määrittely sai a suuri kunnostus pari viikkoa sitten, kun W3C julkaisi sen uusi HTML 5.1 -suositus marraskuussa 2016. Viimeisessä blogiviestissä W3C kutsui uuden merkittävän julkaisun kultakanta, koska HTML 5.1 tarjoaa meille uusia tapoja käyttää HTML: ää luomaan joustavampia web-kokemuksia.

    Tässä artikkelissa tarkastellaan sen uusia ominaisuuksia, joita voit käyttää koskettamatta JavaScriptia, JavaScript-taustan parannukset ovat kuitenkin merkittäviä, kuten näet sen virallinen muutosloki.

    Huomaa, että tällä hetkellä kaikki selaimet eivät tue kaikkia näitä ominaisuuksia, joten älä unohda tarkista selaimen tuki ennen kuin käytät niitä tuotannossa. Jos olet kiinnostunut HTML-standardin edelleen kehittäminen, voit tarkistaa myös HTML 5.2: n työluonnoksen.

    1. Määrittele useita kuvaresursseja reagoivaan suunnitteluun

    HTML 5.1: ssä voit käyttää tunniste yhdessä srcset määrite reagoiva kuva mahdollista. tunniste edustaa kuvasäiliö jonka avulla kehittäjät voivat ilmoittaa erilaiset kuvaresurssit mukautumaan UAnäkymän koko, näytön pikselitiheys, näytön tyyppi ja muut käytettävät parametrit. \ t herkkä muotoilu.

    tunniste itse ei näytä mitään, se toimii vain kontekstia useille kuvaresursseille. Sinun täytyy ilmoittaa oletuskuva-resurssi arvoksi src ominaisuus tunniste ja vaihtoehtoisia kuvaresursseja mene sisään srcset . \ t ja elementtejä.

    Koodin esimerkki:

    2. Näytä tai piilota lisätietoja

    Kanssa

    ja tunnisteita lisää laajennettuja tietoja sisältöosaan. Lisätiedot ei ole oletuksena, mutta jos käyttäjät ovat kiinnostuneita, ne on mahdollisuus katsoa. Sinun pitäisi koodissasi aseta tunniste sisällä
    . Jälkeen tunniste lisää lisätiedot haluat piilottaa.

    Koodin esimerkki:

     
     
    Virheviesti
     
     Emme voineet lopettaa tämän videon lataamista. 
     
    Tiedoston nimi:
    yourfile.mp4
     
    Tiedoston koko:
    100 Mt
     
    Kesto:
    00:05:27

    Näin koodin esimerkki näyttää Firefox 50.0.2: ssä:

    3. Lisää toiminnot selaimen kontekstivalikkoon

    Kanssa elementti ja sen type = "yhteydessä" määrite, voit lisää mukautettuja toimintoja että kontekstivalikosta. Sinun täytyy määrittää kuin lapsen elementti

    tag. id n elementin on oltava niillä on sama arvo kuin contextmenu ominaisuus sen elementin, johon haluamme lisätä kontekstivalikon (joka on

    tunniste voi on kolme eri tyyppiä, "Valintaruutu", "komento" (johon sinun täytyy lisätä toiminto JavaScriptin avulla), ja radio. On mahdollista lisätä useampi kuin yksi valikkokohta kontekstivalikkoon, mutta selaimen tuki tämä ominaisuus on ole kovin hyvä. Chrome 54 ei tue sitä, ja Firefox 50 sallii vain yhden ylimääräisen kontekstivalikon. Alla näet, miten koodin esimerkki toimii Firefox 50: ssä.

    4. Pesäotsikot ja alatunnisteet

    HTML 5.1 mahdollistaa pesäotsikot ja alatunnisteet jos jokainen taso on sisältyvät jaksotuksen sisältöön. Alla oleva huomautus on kuvakaappaus W3C-dokumenteista ja neuvoo kehittäjiä oikeanlaiseen otsikko- ja alatunnisteen kiinnittämiseen.

    Tämä ominaisuus voi olla hyödyllinen, jos haluat lisätä kehitetty otsikot semanttisiin leikkauselementteihin, kuten

    ja
    . Alla oleva koodiesimerkki luo yläpalkin sisälle sivupalkin