Site med 10 kodeeksempler: »Du har måske ikke behov for Javascript«

Moderne browsere giver nye muligheder for at inkludere brugergrænseflade-funktionalitet på HTML-sider uden brug af Javascript.

Una Kravets er brugergrænseflade-udvikler hos Digital Ocean, der leverer cloudbaseret-infrastruktur. Hun står bag hjemmesiden 'You Might Not Need Javascript', som bygger på en anden side, 'You Might Not Need Jquery'.

Kravets' side indeholder ti kodeeksempler på brugergrænseflade-funktionalitet til hjemmesider. Funktionaliteten er, som navnet antyder, lavet uden brug af Javascript. I stedet bygger eksemplerne på HTML- og CSS-kode, som flere moderne browsere understøtter.

»Javascript er storartet, og brug det endelig, men vær samtidig klar over, at du kan bygge mange funktionelle UI-komponenter uden den ekstra afhængighed,« skriver Kravets på sin demo-side med henvisning til Javascript.

Herefter følger 10 brugergrænseflade-eksempler uden brug af Javascript. I forhold til billedpræsentation er der en 'Image Slider' og en 'View Switcher'. Eksemplerne gør, ligesom flere andre demonstrationer på siden, brug af en kombination af HTML og CSS.

Rent HTML

Der er også flere eksempler, som fungerer alene ved HTML og uden CSS - selvfølgeligt forudsat HTML-koden er understøttet af browseren.

Et af de rene HTML-eksempler er en 'Color Picker', her ser koden således ud:

<form>
  <input type="color" />
</form>

Et andet HTML-eksempel er 'File Upload', hvor koden ser således ud:

<form>
  <input type="file" accept="image/*">
  <input type="submit">
</form>

Det er også muligt at lave en form med input-validering på eksempelvis mail. I det eksempel, Una Kravets bringer, ser koden ud som følger:

<form>
  <!-- Case insensitive binary choice -->
  <label for="item1">Would you prefer a banana or a cherry?</label>
  <input id="item1" pattern="[Bb]anana|[Cc]herry">
 
  <!-- Email validation -->
  <label for="item2">What's your e-mail?</label>
  <input id="item2" type="email" name="email">
 
  <!-- Max length validation -->
  <label for="item3">Leave a short message</label>
  <textarea id="item3" name="msg" maxlength="140" rows="5"></textarea>
 
  <!-- Numeric + Symbol pattern as required field -->
  <label for="item4">Phone Number (format: xxxx-xxx-xxxx):</label><br/>
  <input id="item4" type="tel" pattern="^\d{4}-\d{3}-\d{4}$" required >
 
  <button>Submit</button>
</form>

På Reddit-sub-sitet Programming diskuterer brugerne, hvorvidt det nu også er smart at lave brugergrænseflade-funktionalitet i HTML frem for at gøre brug af Javascript.

Blandt andet påpeger nogle, at det jo også kan være værd at understøtte ældre browsere, som ikke kan håndtere HTML-koden, der ligger bag Kravets' eksempler. Og en bruger, der kalder sig 'jl2352', mener, det er bedst, hvis funktionaliteten kan laves med ren CSS.

Tips og korrekturforslag til denne historie sendes til tip@version2.dk
Følg forløbet
Kommentarer (5)
sortSortér kommentarer
  • Ældste først
  • Nyeste først
  • Bedste først
Rune Jensen

Nåh.

"mener, det er bedst, hvis funktionaliteten kan laves med ren CSS."

Funktionalitet... Er det ikke netop javascript...?

Men bortset fra det, to ting. Jeg har faktisk overvejet at lave sådan en "scary maze" tingest udelukkende ved brug af CSS og HTML. For dem, som ikke ved,, hvad "scary maze" er, look it up on youtube.

Jeg har en idé om, man kan gøre det ved at bruge ::before og ::after og så gøre dem linkbare efterhånden som de bliver synlige, så man kan "tegne" det spor man går i, og man kan også "dø" ved at sætte CSS på sidernes A (borderen). Og så bruge z-index. Videoen bør man også kunne preloade med CSS, så den vises, når man gennemfører. Men ja, altså, logistikken i det gjorde, jeg lissom udsatte projektet. Her er dog en udgave af noget lignende af en, som er lidt (bare en anelse) bedre end mig:
http://www.cssplay.co.uk/menu/amazing.html

det andet er, de listede eksempler i artiklen kan udvides med i hvert fald to, som er eller (forhåbentlig bliver) standard.

Det ene er position:sticky. Prøv at scrolle ned på version2's side. på et tidspunkt, "sticker" headeren til toppen, og alt nedenunder scroller. Det er skide smart. Så kan man have en menu i toppen, uanset hvor langt ned man scroller, men scroller man helt op, så får man også toppen af headeren. Virker KUN i firefox, fordi FF bare kan det dér, altså... så her har V2 "snydt" en smule og brugt JS for at få det til at virke i lidt mere tilbagestående browsere.

Den anden kan diskuteres, om det rent faktisk bør være en HTML-standard, da det sådan set er funktionalitet, men ikke desto mindre, så vil den gøre det en del lettere at lave f.eks. FAQ-sider. Det hedder <details> og <summary>, og hvad man lave med det (udover nævnte FAQ) er, man kan lave små noter, som man kan skjule eller vise med et click. Det var hvad jeg før brugte et lille javascript til.

  • 0
  • 0
Christian Nobel

Uagtet hvad man ellers synes om JavaScript, så er det ikke et mål i sig selv at undgå det, da det er måden der kan tilføres funktionalitet til en browser - men ret skal være ret, det skriver Una Kravets så også i indledningen.

JavaScript er et programmeringssprog, hvorved man kan opnå funktionalitet og dynamik, der kan ændres efter situation og behov.

Style Sheet er, nå ja style sheet, og som udgangspunkt statisk (hvorfor det nogen gange kan være hensigtsmæssigt at skifte style vha. JavaScript).

Det kan i øvrigt være smart at konsultere caniuse.com (som der også refereres til) før man kaster sig ud i for mange tosserier - type=color understøttes f.eks ikke af Safari på iOS, hvilket nok kan pisse ret mange af.

Herudover kan man sagtens lave en color picker vha. select, uden at gøre brug af JavaScript.

Og input type="file" er rædselsfuld, da det ikke kan styles - det ses ret tydeligt i hendes eksempel, hvor en almindelig knap og filvælgeren har hver sit design.

Men ok, inputvalideringen ser ud til at kunne bruges på alle browsere, og er straight forward at bruge.


Og så mit sædvanlige rant - Firefox understøtter stadig ikke en meget væsentlig type, nemlig date, og der er ikke udsigt til at det nogensinde vil ske.

  • 0
  • 0
Rune Jensen

Style Sheet er, nå ja style sheet, og som udgangspunkt statisk

Jeg opdagede en sjov ting i går, nemlig pointer-events. Hvis man sætter pointer-event til none, så går ingen events igennem (til style sheeted - det kan stadig gå igennem til et javascript).

Men det kan bruges til at holde events tilbage under en CSS animation, hvilket var hvad jeg gjorde. Dvs. at f.eks links, som blev vist i et vindue, som blev "pushed" ud til siden ved et touch - der vil det touch ikke påvirke eventuelle links, som kommer "forbi" fingeren imens animationen varer. Og så sættes pointer-event til auto når animationen er færdig, så man kan klikke på links igen.

Jeg bragte det frem, fordi jeg vil helt klart anse det for en funktion (derfor i princippet noget, som skal laves med JS), men at sætte den funktion i CSS, det er altså smart. Så kan jeg stadig kode min hjemmeside uden javascript.

Og så mit sædvanlige rant - Firefox understøtter stadig ikke en meget væsentlig type, nemlig date, og der er ikke udsigt til at det nogensinde vil ske.

Firefox er desværre heller ikke pr. automatik over GPUen ved animationer. Det gør, at siden kan se ret "fnidret" ud ved animationer.

Chrome er afsindig hurtig, men den har også "painting" når man trækker et vindue sammen (i Linux). Så kan man "male" med vinduet sideværs. Simpelthen SÅ irriterende...

  • 0
  • 0
Log ind eller Opret konto for at kommentere