5 saker du inte visste att du kunde göra med html

Sep 11, 2025
Hur

Låt oss möta det, webbutveckling kan lätt bli en röra. HTML, CSS och Javascript Har alla utvecklats från ödmjuka ursprung under många år, och är i stort sett likvärdigt när det gäller hur du ska använda dem. Som ett resultat är det alltför lätt att bygga en otillgänglig röra. Att följa standarder och utnyttja de senaste förbättringarna i specifikationerna garanterar inte god kod, men det kan säkert hjälpa till.

I vilken typ av programutveckling är modulariteten kung när det gäller att bygga underhållsbart kod. Som ett resultat vill du hålla ett ögon på webbkomponenter. Browser support är inte bra, men om du tar dig lite polyfiller , du kan komma före kurvan och börja utnyttja anpassade element för att strukturera din kod direkt. Denna stil av utveckling är framtiden, så det är värt att bli bekant med det nu.

Keep code streamlined for clearer understanding

Håll koden effektiviserad för tydligare förståelse

HTML5 själv introducerade ett antal nya element (och deprecated flera) för att bidra till att uppmuntra goda kodningspraxis. Du kan ha hört talas om semantisk markup, som avser användningen av HTML5s beskrivande element som & lt; artikel & gt; och & lt; Figur & GT; för att ange vilken typ av innehåll de innehåller.

Detta kan verkligen hjälpa till med renligheten i din kod, eftersom HTML-elementen omedelbart kommer att identifiera, vilka delar representerar menyraden, dina innehållsdelar, sidfoten och så vidare.

Det hjälper också om du utnyttjar de senaste JavaScript-standarderna. Javascript kan också bli rörigt, men det har blivit mycket lättare att arbeta med de senaste åren. ES6-syntaxen stöds allmänt i webbläsare, och funktioner som pilfunktioner och klasser kan göra ditt liv mycket enklare - men många utvecklare är antingen obekanta med eller försiktiga med att använda dem.

Fortsatt temat Modul Development, stöder JavaScript nu modulbelastning, vilket kan hjälpa dig att hantera dina beroenden rent.

01. Erkänna och syntetisera tal

The sound of things to come

Ljudet av saker att komma (Bildkredit: Foto av jason rosewell på unsplash)

Dessa skulle en gång ha varit komplexa funktioner som kräver specialiserad programvara, men de byggs nu direkt i webbläsare. Web Tal API har komponenter som stöder text-till-tal och tal-till-text. Den senare av dessa kommer antingen att använda en onlinetjänst (Chrome använder Google Cloud Speech API) eller enhetens infödd taligenkänningstjänst. Förvänta dig att se detta används i stor utsträckning på mobila enheter i framtiden.

02. Visa en färgplockare

Choosing the right colour

Välja rätt färg (Bildkredit: Foto av Scott Webb på Unsplash)

Trivial som det kan låta, det här är ett utmärkt exempel på hur HTML5 förenklar vanliga uppgifter som tidigare skulle ha krävt anpassad kodning av en ganska komplex UI-komponent. & lt; Input Type = "Färg" & GT; Kommer att visa en visuell färgplockare när du klickar, med en färgplockare som är infödd till enheten. Detta kan vara särskilt användbart med HTML-duk. Det stöds allmänt med undantag för Safari på mobilen.

03. Recolour webbläsaren UI

Colour themes for browsers

Färgteman för webbläsare (Bildkredit: Foto av marko blažević på unsplash)

Detta kan erbjuda en trevlig estetisk touch på mobila plattformar. & lt; meta namn = "tema-färg" innehåll = "# ffffff" / & gt; är utformad för att instruera webbläsaren att återställa verktygsfältet när du tittar på din webbplats. Tyvärr är det lite icke-standardiserat, så medan "Tema-färg" Fungerar med Chrome, Firefox och Opera, på IOS Du behöver "Apple-Mobile-Web-App-Status-Bar-Style" (fungerar bara i fullskärmsläge).

04. Olika bilder för olika skärmar

Specifying the image and the resolution

Ange bilden och upplösningen (Bildkredit: Foto av tran mau tri tam på unsplash)

Förhoppningsvis implementerar du redan responsiv design, i vilket fall dina bilder kommer att ändras för att passa visningsporten. Det här är inte perfekt, eftersom du kommer att tvinga användaren att ladda ner den största versionen av bilden och downsampling den. Ange HTML5 & lt; bild & gt; Element, vilket gör att du kan ange olika bilder som ska visas beroende på skärmupplösningen som webbplatsen ses på.

05. Vibrera din telefon

Shakin' all over

Shakin 'överallt (Bildkredit: Foto av Gilles Lambert på Unsplash)

Den entydiga namnet Vibration API exponerar en enda funktion, vibrera (), vilket gör exakt vad det står på enheter som stöder det. Funktionen tar en lista som beskriver ett vibrationsmönster som sitt argument. Det kommer att fungera på Chrome, Firefox och Opera, även om du är otur på kant eller safari. Det rapporteras att vissa annonser använder detta för att locka användarens uppmärksamhet, så juryn är ute om det är faktiskt en bra idé.

Denna artikel uppträdde ursprungligen i Webbdesigner Utgåva 266. Köp det här .

Relaterade artiklar:

  • De 10 bästa HTML5-malldesignerna
  • 20 HTML-mallar för att ge ditt webbdesign projekt en headstart
  • Spik din HTML med detta fuskblad

Hur - Mest populära artiklar

Hur man vänder ett lager i Photoshop: En komplett guide

Hur Sep 11, 2025

Ser du dubbelt? Den här bilden har vänds och blandats med originalet (Bildkredit: Framtida) Denna handl..

Hur man tar en skärmdump på en Mac

Hur Sep 11, 2025

(Bildkredit: Creative Bloq) Om du vill fånga en hel skärm, ett fönster eller bara en vald del av skrivbordet, har ..

Photoshop Färgbyte: 2 verktyg du behöver veta

Hur Sep 11, 2025

HOPPA TILL: Färgbytesverktyget COLOR RANGE-kommandot ..

Hur man förbättrar din karaktärskonst

Hur Sep 11, 2025

När du har till uppgift att skapa en karaktär design Från början, tänk på den här personens personlighet. S..

Belyser ditt 3D-arbete med kupoljus

Hur Sep 11, 2025

Användningen av kupoljus har varit en av de största framstegen i CGI-skapelsen under det senaste decenniet. Badar en scen från..

Hur man ritar med affinitetsfoto för iPad

Hur Sep 11, 2025

Affinitetsfoto för iPad är en bra bildredigering , men hur kostar Serifs app när det gäller att sk..

Skapa kvalitet Digitala kopior av din konst

Hur Sep 11, 2025

Konst handlar inte bara om att skapa, det handlar också om att dela. När du har gjort ett vackert arbete är du stolt över, det är bara naturligt att du vill att andra ska se det också. ..

Hur man kombinerar målarens akvarelluppsättningar

Hur Sep 11, 2025

Corelmålare Erbjuder en bankett med akvarellverktyg. Det har digitala, riktiga och akvarellverktygskategorier, var o..

Kategorier