WAT WAS?

1: Einde cufon, welkom @font-face
Cufon was een tijdje geleden nog één van de betere methodes voor het projecteren van alternatieve fonts op het web. @font-face is een CSS3 functie die maar door weinig browsers ondersteund wordt. Dankzij de @font-face generator van fontsquirrel.com kan je het gerust inzetten want zelfs IE5 wordt ondersteund.

2: Eindelijk ‘CSS3 gradients’
Dynamische css gradients zijn een leuke aanwinst in CSS3 maar niet alle browsers ondersteunen het op dezelfde manier. Veelal grijpen we hiervoor nog terug naar images. De community heeft ondertussen echter al een resem tools ontwikkeld waardoor we CSS3 gradients wel kunnen gebruiken. De meest opvallende is ‘Ultimate CSS Gradient Generator‘ van Colorzilla. Met de looks & feel van photoshop tover je er de meest ingewikkelde CSS3 gradients uit. Indien de gradient niet zichtbaar is in IE7 voeg dan zoom:1 toe aan de tag waarop je de gradient gebruikt.

WAT IS?

1: In HTML5 is de DIV tag de nieuwe SPAN
De span tag heeft geen semantische waarde. Het wordt veel gebruikt voor het extra stijlen van inline elementen. Sinds HTML5, en de nieuwe SECTION tag, zal de DIV tag dezelfde rol krijgen als de SPAN tag. Dat komt omdat de DIV tag geen semantische waard heeft, net als de SPAN tag.

2: :hover is problemchild
Touchscreens zoals de ipad kennen geen ‘hover’ status. Veel online functionaliteit gaat hierdoor verloren. Beperk het gebruik van :hover of voorzie een js oplossing. De toekomst van de :hover pseudo-class is onzeker, maar met de komst van touchless screens krijgt de :hover misschien een 2e kans.

WAT ZAL?

1: Marktaandeel browsers binnenkort onbelangrijk
De druk op de browsers om de W3C standaarden toe te passen werkt. IE buigt voor het W3C en er zijn steeds minder hacks nodig om ‘nieuwe’ techologieën op browser toe te passen. Developers hoeven nu voor slechts 2 kanalen te ontwikkelen: w3c valid browsers en IE. De browser engines, en de technologie die ze weergeven, zal in de loop van 2012 volledig gelijkgesteld worden waardoor het marktaandeel van de browser onbelangrijk wordt.

2: Wat is Web 3.0?
Web 3.0 is het moment waarop het web een platform wordt. Het web zal fungeren als 1 gigantisch besturingssysteem. Hierin zal standardisatie zich niet alleen doordrukken naar de html/css code, zoals vandaag, maar ook naar het visuele karakter. Het zal bepalen hoe websites er uitzien en het zal regels maken die voor visuele eenheid zorgen. Web 3.0 is het moment waarop elk apparaat op dezelfde wijze communiceert met een ander apparaat. Een groot monopolie voor dat besturingssysteem maar bewaakt door het W3C en anti-trust regels.

Sliding doors css tutorial

In 2003 kwam A List Apart aanzetten met een, voor die tijd, nieuwe css tutorial om dynamische buttons en tabs te basen genaamd ‘sliding doors’. Het was ook net de tijd dat de CSS revolutie zich volop ontplooide met CSS zengarden als trekpaard. De techniek was revolutionair omdat we toen nog gewoon waren om tabs in tables te basen. We maakten hiervoor een table met 3 cellen naast elkaar. In het midden stopten we een repeat-x achtergrond en in de eerste en laatste cel bevonden zich 2 images met de rounded borders van de tab. Een tab was in 3 stukken gekapt.

Als je nu terugkijkt naar de techniek van ‘sliding doors’ dan zie je dat ze gebasseerd is op het ‘table’ denken van 2003. Een verkapte img aan elkaar geplakt via floats ipv. cellen. De methode sliding doors werkte echter wel goed en sinds 2003 wordt ze nog steeds massaal toegepast.

Waarom een nieuwe techniek?

De techniek werkt maar heeft een aantal gebreken. De instapdrempel voor beginners is bv. redelijk hoog. Dat komt vooral doordat beginners nooit in tables hebben gebased. Het kappen van images in 2 delen lijkt hierdoor onlogisch en niet praktisch. Ook is sliding doors niet eenvoudig. Er zijn diverse juiste omstandigheden vereist om tot het gewenste resultaat te komen.
Deze gebreken zijn aangekaart en opgelost door Cover Tags.

Cover Tags

Het principe van Cover Tags is eenvoudig. Eén tag bedekt (covered) een andere tag waarna door positionering een deel van de onderliggende tag terug zichtbaar wordt gemaakt.

We gebruiken hiervoor 2 tags: <a><span>Button tekst</span></a>. De span tag en de a tag hebben beide dezelfde achtergrond image. De span tag wordt 10 pixels naar rechts opgeschoven wat de achtergrond van de a tag 10 pixels zichtbaar maakt.

Elke tag bevat de lange versie van de button. De linkerkant van die image bevindt zich in de a. De rechterkant bevindt zich in de span.

Cover Tags FAQ

Kan ik een live voorbeeld zien?
Ja, we hebben een pagina klaar staan waarin je Cover Tags aan het werk ziet. Copieer de code voor een snelle toepassing in je eigen site.

Wat zijn de voordelen van Cover Tags?
1: Er wordt slechts 1 image gebruikt
2: CSS code is eenvoudig
3: Geen floats
4: Geen complicaties met andere code

Vervangt Cover Tags, sliding doors?
Ja en nee. Ja, zolang we nog niet massaal CSS3 gebruiken. Met CSS3 kunnen we nl. buttons volledig dynamisch opbouwen zonder gebruik van images. Tot die tijd is Cover Tags de aangeraden techniek en vervangt het sliding doors.

Hoe zit het met de browsers?
Cover Tags werkt perfect in alle grote browsers inclusief IE6.

Is Cover Tags iets nieuw?
De techniek is niet nieuw, er zijn zeker al developers en designers die deze techniek gebruiken. De methode is echter nog nooit in kaart gebracht waardoor niemand er gebruik van kon maken. Door de techniek een naam te geven ‘Cover Tags’ zijn we nu in staat om het idee te begrijpen en het te delen met anderen.

Dat een website er in alle browsers nooit identiek hetzelfde kan uitzien is logisch. Pixel perfectie bestaat immers niet. Wat mij de laatste tijd echter opvalt is dat steeds meer klanten die stelling ook delen. Dat was een tijd geleden wel anders. Toen had je 2 redmiddelen: je legt het uit of je lost het op.

Met ‘identiek uitzien’ bedoel ik zaken als rounded borders, padding verschillen, box shadow, positioneringen, marges, etc… . We lijken alsmaar meer vrede te nemen met die kleine maar toch zichtbare verschillen. Zo ondersteund IE geen rounded borders maar toch staat een klant mij toe deze intensief in een basing toe te passen.

En het blijft niet bij 1 klant. Ik stel tegenwoordig een lichte verschuiving vast in het ‘pixel perfect’ denkpatroon dat nog veelal aanwezig is. Zowat 3 op 10 opdrachtgevers vindt het gebruik van rounded borders en andere CSS3 effecten helemaal niet erg. Soms komen ze er zelfs eigenhandig mee aanzetten. Dat gebeurt niet vaak maar toch. Het belangrijkste is dat het gebeurt.

Een lichte verschuiving dus, hoe ervaren jullie dit?

Daarom denk ik dat het basign.nl blog kort, krachtig en unieke content moet bieden omtrent thema’s die eerder nog nooit of niet zo vaak zijn aangesneden. Een kijk op uiteenlopende thema’s rechtstreeks of onrechtstreeks gekoppeld aan ‘basing’.

Omdat ik niet een blog wil onderhouden waar niemand wat aan heeft wou ik graag jullie mening weten. Wat willen jullie zien, waarover moet ik het hebben?

Graag jouw opinie?