window.pipedriveLeadboosterConfig = { base: pipedrive.com', companyId: 11580370, playbookUuid: '22236db1-6d50-40c4-b48f-8b11262155be', version: 2, } ;(function () { var w = window if (w.LeadBooster) { console.warn('LeadBooster on jo olemassa') } else { w.LeadBooster = { q: [], on: function (n, h) { this.q.push({ t: 'o', n: n, h: h }) }, trigger: function (n) { this.q.push({ t: 't', n: n }) }, } } })() 3 Hyödyllistä HTML-tunnistetta, joita et ehkä edes tiennyt olevan olemassa - The Codest
Codest
  • Tietoa meistä
  • Palvelut
    • Ohjelmistokehitys
      • Frontend-kehitys
      • Backend-kehitys
    • Staff Augmentation
      • Frontend-kehittäjät
      • Backend-kehittäjät
      • Tietoinsinöörit
      • Pilvi-insinöörit
      • QA insinöörit
      • Muut
    • Se neuvoa-antava
      • Tilintarkastus & konsultointi
  • Toimialat
    • Fintech & pankkitoiminta
    • E-commerce
    • Adtech
    • Terveysteknologia
    • Valmistus
    • Logistiikka
    • Autoteollisuus
    • IOT
  • Arvo
    • TOIMITUSJOHTAJA
    • CTO
    • Toimituspäällikkö
  • Tiimimme
  • Tapaustutkimukset
  • Tiedä miten
    • Blogi
    • Tapaamiset
    • Webinaarit
    • Resurssit
Työurat Ota yhteyttä
  • Tietoa meistä
  • Palvelut
    • Ohjelmistokehitys
      • Frontend-kehitys
      • Backend-kehitys
    • Staff Augmentation
      • Frontend-kehittäjät
      • Backend-kehittäjät
      • Tietoinsinöörit
      • Pilvi-insinöörit
      • QA insinöörit
      • Muut
    • Se neuvoa-antava
      • Tilintarkastus & konsultointi
  • Arvo
    • TOIMITUSJOHTAJA
    • CTO
    • Toimituspäällikkö
  • Tiimimme
  • Tapaustutkimukset
  • Tiedä miten
    • Blogi
    • Tapaamiset
    • Webinaarit
    • Resurssit
Työurat Ota yhteyttä
Takaisin nuoli PALAA TAAKSE
2022-10-04
Ohjelmistokehitys

3 Hyödyllistä HTML-tunnistetta, joita et ehkä edes tiennyt olevan olemassa

Codest

Jacek Ludzik

Tuotesuunnittelija

Nykyään esteettömyys (A11y) on ratkaisevan tärkeää kaikissa vaiheissa, kun rakennetaan räätälöityjä ohjelmistotuotteita. Se alkaa UX/UI-suunnittelusta ja ulottuu edistyneemmille tasoille, kun ominaisuuksia rakennetaan koodissa. Se tarjoaa paljon etuja DX:n lisäämiseksi työskenteleville kehittäjille, mutta ennen kaikkea loppukäyttäjille. Yksi näistä HTML:n a11y-osista ovat semanttiset tunnisteet, ja sitä haluaisin käsitellä tässä.

Front-end-kehittäjien on tunnettava tarkkaan seuraavat asiat HTML-tunnisteet koska tämä on niiden luonnollinen ympäristö päivittäin. Lyön vetoa, että kaikki teistä tietävät joitakin perustunnisteita, kuten

,
,
ja niin edelleen. Mutta tiesitkö esimerkiksi, että voit ehdottaa sanataukohetkeä käyttämällä vain HTML, ilman CSS:ää?

WBR

Oletetaan, että työstät verkkosivustoa tai sovellusta saksalaiselle asiakkaalle. Kuten tiedät, saksankieliset sanat voivat olla todella pitkiä. Sinulla on siis suunnitelma ja tekstisisältö, joka sinun on toistettava saksaksi. koodi ja tämän sisällön on murtauduttava hyvin erityisinä hetkinä. Tässä tulee tunnisteen avulla.

Geburtstagskuchen

Juuri noin! Näin yksinkertaisella tagilla voit muokata tekstin sisältöä haluamallasi tavalla.

Mutta entä selaintuki? Rehellisesti sanottuna se on melko hyvä. Useimmat selaimet ymmärtävät tämän tunnisteen, mutta Androidin Operalla ja iOS:n Safarilla voi olla ongelmia.

wbr-yhteensopivuustaulukko

MITTARI

Kuvittele, että olet rakentamassa levytallennuksen hallinnan sovellusta. Sinun on jotenkin näytettävä käyttöliittymässä, kuinka paljon tallennustilaa on vielä käytettävissä, ja haluat tehdä siitä mahdollisimman helppokäyttöisen. Tämä on täydellinen käyttötapaus sovellukselle tag. Se antaa sinulle vain arvon määritellyn alueen sisällä. Toinen hieno asia tässä tagissa ovat sen attribuutit:

  • low → kun virta-arvo on alhaisempi kuin asetettu alhainen arvo, mittarin palkki muuttuu punaiseksi;
  • optimaalinen → kun nykyiset arvot ovat korkeammat kuin optimaalinen ominaisuusarvo, mittarin palkki muuttuu vihreäksi;
  • korkea → kun korkea arvo on pienempi kuin maksimiarvo ja suurempi kuin optimiarvo, mittarin palkki on oranssi. Muussa tapauksessa se on vihreä.

Saatat tuntea myös samanlaisen tunnisteen, joka on edistys. Mitä eroa näillä on oikeastaan? Progress-tunnistetta tulisi käyttää käynnissä oleviin tehtäviin. Toisin sanoen, käytä edistymis-tagia, kun käsittelet tiettyä tehtävää. Mittari-tunnistetta tulisi käyttää osoittamaan levyn tai muistin käyttöä. Toinen ero on se, että IE ei tue mittaritunnistetta, ja se on itse asiassa tämän tunnisteen ainoa haittapuoli.

mittarin yhteensopivuusmittari

DEL ja INS

Oletko koskaan miettinyt, miten rakentaa helposti saatavilla oleva indikaattori sisällön poistetuista ja lisätyistä osista (diff GitHubissa tai sähköposti-ilmoitukset Jirasta, kun tiketti on päivitetty)? Sinun tarvitsee vain kietoa poistettuun sisältöön merkintätag. Esimerkiksi: <del><p>Vain poistettu sisältö</p></del>. Jos haluat näyttää vain lisätyn osan sisällöstä, voit käyttää komentoa tagia täsmälleen samalla tavalla. Tämä tunniste tarjoaa myös kaksi ominaisuutta:

  • cite → resurssin uri, joka selittää, miksi tämä osa on lisätty;
  • datetime → tiedot ja muutoksen ajankohta.
ins-yhteensopivuustaulukko

On tietysti paljon hyödyllisempiäkin tagit HTML:ssä . Suosittelen lämpimästi käyttämään niitä kaikkia, kun se on mahdollista ja tarkoituksenmukaista. Asiakkaasi ja sovelluksen käyttäjät kiittävät sinua tällaisesta lähestymistavasta. Ole kuitenkin varovainen, sillä jotkin tunnisteet saattavat olla vanhentuneita. Voit aina varmistaa, että harvinaisempi tagi, jota haluat käyttää, on edelleen voimassa ja että sillä on hyvä tuki osoitteessa MDN-dokumentaatio.

Aiheeseen liittyvät artikkelit

Ohjelmistokehitys

Lisätietoja Ruby on Rails with Pub/Sub -laitteesta

Pub/Sub voi tuoda monia etuja projektille - se voi tehdä koodista siistiä, irrottaa palvelut toisistaan ja tehdä niistä helposti skaalautuvia. Lue lisää Pub/Subista seuraavasta artikkelista....

Codest
Michal Pawlak Vanhempi Ruby-kehittäjä
Ohjelmistokehitys

Javascript-työkalut toiminnassa

Tutustu joihinkin JavaScript-työkaluihin, joilla voit parantaa ohjelmointipeliäsi. Lue lisää ESLintistä, Prettieristä ja Huskysta!

Codest
Reda Salmi React Kehittäjä
Ohjelmistokehitys

Sisäisten vs. ulkoisten kehittäjien palkkaaminen

Palkkaaminen sisäisesti vai ulkoisesti? Se on äärimmäinen dilemma! Lue seuraavasta artikkelista, mitä etuja on ulkoistamisen tai sisäisen tiimin rakentamisen välillä.

Codest
Grzegorz Rozmus Java-yksikön johtaja
Ohjelmistokehitys

9 virhettä, joita kannattaa välttää Java-ohjelmoinnissa

Mitä virheitä tulisi välttää Java-ohjelmoinnissa? Seuraavassa kappaleessa vastaamme tähän kysymykseen.

Codest
Rafal Sawicki Java-kehittäjä

Tilaa tietopankkimme ja pysy ajan tasalla IT-alan asiantuntemuksesta.

    Tietoa meistä

    The Codest - Kansainvälinen ohjelmistokehitysyritys, jolla on teknologiakeskuksia Puolassa.

    Yhdistynyt kuningaskunta - pääkonttori

    • Toimisto 303B, 182-184 High Street North E6 2JA
      Lontoo, Englanti

    Puola - Paikalliset teknologiakeskukset

    • Fabryczna Office Park, Aleja
      Pokoju 18, 31-564 Krakova
    • Brain Embassy, Konstruktorska
      11, 02-673 Varsova, Puola

      Codest

    • Etusivu
    • Tietoa meistä
    • Palvelut
    • Tapaustutkimukset
    • Tiedä miten
    • Työurat
    • Sanakirja

      Palvelut

    • Se neuvoa-antava
    • Ohjelmistokehitys
    • Backend-kehitys
    • Frontend-kehitys
    • Staff Augmentation
    • Backend-kehittäjät
    • Pilvi-insinöörit
    • Tietoinsinöörit
    • Muut
    • QA insinöörit

      Resurssit

    • Faktoja ja myyttejä yhteistyöstä ulkoisen ohjelmistokehityskumppanin kanssa
    • Yhdysvalloista Eurooppaan: Miksi amerikkalaiset startup-yritykset päättävät muuttaa Eurooppaan?
    • Tech Offshore -kehityskeskusten vertailu: Tech Offshore Eurooppa (Puola), ASEAN (Filippiinit), Euraasia (Turkki).
    • Mitkä ovat teknologiajohtajien ja tietohallintojohtajien tärkeimmät haasteet?
    • Codest
    • Codest
    • Codest
    • Privacy policy
    • Verkkosivuston käyttöehdot

    Tekijänoikeus © 2025 by The Codest. Kaikki oikeudet pidätetään.

    fiFinnish
    en_USEnglish de_DEGerman sv_SESwedish da_DKDanish nb_NONorwegian fr_FRFrench pl_PLPolish arArabic it_ITItalian jaJapanese ko_KRKorean es_ESSpanish nl_NLDutch etEstonian elGreek fiFinnish