As I recently offered Windows 7 to one on my machine, it was the oportunity to install and test Internet Explorer 9.
After all the hypes surrounding this release I was a bit disappointed to see this "modern" browser still not supporting some basic CSS3 propoerties.
List of unsupported CSS3 properties:
Les "reseaux sociaux" sur internet ne me passionnent pas, je les trouve meme quelquefois nefastes. Mais comme cela fait un bon bout de temps que Twitter fait son buzz, je me suis quand meme cree un compte.
Twitter envoie enormement de messages dont la plupard ne font que polluer la toile. Ainsi mon compte twitter est assigne a broadcaster le niveau de pollution au yellow dust present dans l'air de Seoul.
Suivez Yellowdust sur Twitter et votre compte sera spamme toutes les heures par une nouvelle alerte vous informant sur le niveau de micro-particules et leur dangerosite sur la megalopole Seoulite.
<td>City Hall, Seoul, Korea</td>
<div>City Hall, Seoul, Korea</div>
<adress>City Hall, Seoul, Korea</adress>
<address>
<abbr class="geo" title="51.498;-45.5642">
City Hall, Seoul, South Korea
</abbr>
</address>
<address>
<abbr class="geo" title="51.498;-45.5642">
<span class="adr">
<span class="extended-address">City Hall</span>,
<span class="locality">Seoul</span>,
<span class="country-name" title="Republique Of Korea">South Korea</span>
</span>
</abbr>
</address>
<div class="hentry hreview">
<div class="vevent entry-content item">
<address class="vcard">
<abbr class="fn author" title="Alan Park">I</abbr>
</address>
<a rel="bookmark" href="http://example.com/statuses/555/">am</a>
<abbr class="updated" title="2008-02-17T15:30Z">now</abbr> at the
<abbr class="rating" title="5">top</abbr>
<span class="description">
<a class="summary url entry-title" rel="bookmark tag" href="http://barcamp.org/SemanticCamp">SemanticCamp</a>
<span class="vcard location">
<span class="fn org">City Hall</span>
<span class="adr">
<span class="locality">Seoul</span>
<abbr class="country-name" title="Republic Of Korea">South Korea</abbr>
(<span class="geo">
<span class="latitude">51.498</span>,
<span class="longitude">-0.179</span>
</span>)
</span>
</span>
</span>
</div>
<td>City Hall, Seoul, Korea</TD>
<td><img src="images/city_hall_address.jpg"></td>
<td><img src="http://
cafe.naver.com/20081202/94523723285/img/city_all_address.jpg">
</td>
<div>
<img src="http://
cafe.naver.com/20081202/945723285/img/city_hall_address.jpg"
alt="City Hall, Seoul, Korea" />
</div>
Nowadays, choosing a typeface for your website is like choosing between strawberry, vanilla or chocolate... not so much choice, there is very few fonts that everybody have. CSS 3.0 will bring a solution:
@font-face
{
font-family: Aladdin;
src: url('/aladdin.ttf') format('truetype');
}
aside[title=font-face] { font-family: Aladdin; font-size:16px; }
Unfortunatly, this feature will be difficult to use in Asia: we can't imagine the user will have to load a 7Mo font file each time he needs to reload the page.
It already works under Safari 4, Opera 10 and Firefox 3.5:
This is a Quick test of one of the most interesting feature of CSS 3.0: blocks with multiple backgrounds, applications are endless.
The code:
figure[title=multibackground]
{
display:block;
width:215px;
height:170px;
background: url(/images/top.png) top left no-repeat,
url(/images/bottom.png) bottom left no-repeat,
url(/images/middle.png) left repeat-y;
}
For this moment, you can see the result only under webkit (Safari and Chrome), but it's inside the pipe of next Firefox version
The Result:
La messe semble dite entre HTML 5 et XHTML 2.0, l' internet des prochaines annees sera ecrit en HTML 5. Cependant, ce n' est que fin 2010 au mieux que la specification sera adoptee en tant que recommendation du W3C et d' ici la son utilisation devra donc rester experimentale.
Mais etant donnee que les discutions concernant le balisage semblent deja avoir trouve un concensus, j' ai decide de le mettre en oeuvre des aujourd'hui sur ce blog.
L'avenement du web semantique devra petit a petit pousser tout ce qui n'est pas "contenu" en dehors de la balise body.
Ces tags sont des marquages uniquement destinees a etre stylees ou ciblees et ne donne aucune indication sur le type de contenu. Ils sont une INTRUSION de la pagination a l'interieur du HTML et cassent le principe qu'un bon document doit voir sa mise en page totalement dissociee de son contenu.
Ces tags doivent donc etre deprecies.
le HTML 5 propose plein de nouvelles balises: video, audio, header, footer, article, nav, aside, figure, legend ... qui permettent de se passer totalement des <div> et des <span>
Le but etant de donner une indication semantique sur le type de contenu avant meme de les etendres avec de l'RDFa.
Sur Purple Web, les billets sont des <article>, les images sont des <figure> la navigation utilise <nav> et chaque page est une <section>.
Android et Iphone ne sont peut-etre pas l' avenir du web, mais ils font partie de la nouvelle generation de produits qui en indiquent la direction.
La democratisation des terminaux mobiles etant recente, elle presente l' avantage de proposer des navigateurs modernes (Safari, Chrome).
Consequence: le web mobile supporte deja les futurs standards.
Dans ce contexte, Google viens de lancer ce mois-ci une version mobile de Gmail utilisant HTML5.
Un balisage "HTML5" du contenu, au dela de ses avantages en terme de lisiblite et referencement permet aussi au developpeur web de se forger un "mindset" plus moderne. Grace a une variete de tags plus large, il devient meme possible de se passer totalement des id et des class. Tel l'exercice propose par Jens Meiert, en plus d'eliminer les balises de mise en page, nous pouvons donc aussi en eliminer les attributs qui leur sont associes... Le HTML devient plus compact et donc plus proche de la definition d'un "HTML Right".
Ce blog, n'utilisera donc ni div ni span, ni id ni class.
IE8, Google Chrome, Safari 4, Firefox 3... Il est desormais plus simple d'inviter tous les nouveaux visiteurs utilisant IE6 a mettre a jour leur systeme plutot que d'encombrer le code avec des dizaines de hacks visant a supporter un navigateur qui fait desormais partie des antiquites.
Reste le probleme du support par IE7. En attendant la generalisation de IE8, celui-ci peut etre contourne en incluant dans chaque page un petit script javascript qui va remplacer les elements non supportes par des div ou des span.
Une chose quie me derange de plus en plus est de devoir placer ces trackers de toutes sortes avant la fermeture de la balise <body> et de polluer ainsi la fin du Contenu. De la meme maniere qu'il est possible de placer des scripts en debut de document dans la balise <head> juste avant debut du contenu, il devrait logiquement etre possible d' en placer juste apres dans une balise <foot>... ou bien <feet>...
Purple Web has been made to experiment the pleasure of Web Design and Web development. The website is full html5, no div, no span, no class and no id. Purple Web doesn't work under IE6 and IE7.
Every single line of code is "hand typed" browser, I dont use any backoffice yet, it might comes later.