Repères
Profil
Technologie
Thème
Thème : Mise en page
Openweb.eu.org > Thème : Mise en page
Think outside of the box
“Think outside of the box”: here is an enigmatic title!
However, it is one of our greatest challenges as CSS developers: abstracting us from our environment and even from our own senses that can… set up some vicious traps.
« Penser en dehors de la boîte »
« Penser en dehors de la boîte » – think outside of the box en anglais : voici un titre énigmatique ! Il porte pourtant notre plus grand défi en tant que développeurs de CSS : nous abstraire de notre environnement et même de nos propres sens qui peuvent nous tendre… des pièges parfois vicieux.
Responsive Webdesign – présent et futur de l’adaptation mobile
La problématique du responsive est bien plus complexe que ce qu’on peut lire sur certains blogs qui essaient de nous faire croire qu’il suffit aujourd’hui, pour optimiser un site pour mobile, d’ajouter 2 Media Queries pour l’iPhone et l’iPad et redimensionner toutes les images. Le Responsive Web Design est une technique toute jeune, loin d’être parfaite et en constante évolution. Beaucoup de choses sont aujourd’hui possible, mais hélas il reste encore pas mal de chemin à parcourir dans le domaine.
Le modèle tabulaire en CSS
Le modèle de construction tabulaire (HTML et CSS) compte sans aucun doute parmi les plus fascinants qui soient, après avoir été d’abord adulé puis banni vigoureusement par les intégrateurs de tous poils.
En 1998, les spécifications CSS2 étendent les historiques valeurs de la propriété display
et proposent depuis belle lurette des possibilités de rendus et positionnements « tabulaires » sans pour autant interférer dans la sémantique et le bon usage des éléments HTML.
Passons immédiatement à table et découvrons en détail le monde mal connu du Modèle Tabulaire en CSS…
CSS3 Flexbox Layout module
Parmi les nouveaux modules apportés par CSS3 se trouve « CSS Flexible Box Layout », qui peut être traduit par « modèle de boîte flexible ».
Raphaël Goetter nous explique les principes et les possibilités de ce module qui risque fortement de révolutionner nos pratiques en termes de positionnement CSS.
Sprites CSS : performance et maintenabilité
L’optimisation des performances des sites implique de diminuer le nombre de requêtes HTTP. Pour ce faire, il est possible de regrouper les images utilisées dans les CSS, cette technique s’appelle les sprites CSS.
Adapter un site pour les Smartphones
Avec la démocratisation des Smartphones, il devient nécessaire de penser en concevant un site à sa version sur petit écran... voyons donc quelles peuvent être les approches pour adapter un site sur ce nouveau support et en quoi les standards peuvent grandement faciliter cette adaptation.
Maîtriser l’impression CSS
Les feuilles de style destinées à l’impression (CSS print
) sont un moyen économique de proposer une version imprimable de vos documents en ligne, mais elles ne produisent pas toujours le résultat escompté. Voici un inventaire des soucis les plus fréquents, accompagné de quelques conseils qui vous permettront de mieux gérer ces difficultés.
Compatibilité multi-navigateurs des polices de caractères
Quelles sont les unités et les valeurs à utiliser pour dimensionner la taille des caractères de façon homogène sur le plus grand nombre possible de navigateurs Web ? Aurélien Levy a mené une campagne de tests pour donner une réponse à ce problème récurrent pour les développeurs de sites web.
Cascade CSS et priorité des sélecteurs
CSS signifie « feuilles de styles en cascade »... Mais au fait, la cascade, qu’est-ce que c’est, à quoi ça sert, comment cela fonctionne ? Plongez avec nous dans la cascade sans risque de noyade !
La mise en page de site a considérablement évolué ces dernières années. Pour le développeur Web qui a appris le métier à la fin des années 90, le changement est rude. Il est bien loin, le temps des sites optimisés pour IE en 800x600.
Avec l’avènement des standards, l’arrivée de nombreux navigateurs alternatifs, le support de XHTML et des CSS dans les nouvelles versions de MSIE, la nécessité de faire des sites accessibles, la trop fréquente réduction des coûts qui a suivi la fin de la nouvelle économie, tout cela contribue à l’utilisation croissante de XHTML et de CSS.
L’utilisation de tableaux pour la mise en page est abandonnée car trop coûteuse en maintenance, et donne des sites difficilement accessibles. Les feuilles de style et leurs possibilités de positionnement s’imposent, avec l’avantage d’une maintenance simplifiée.
A l’attention des développeurs expérimentés, qui utilisent déjà les CSS pour styler du texte, notre contributeur Laurent Denis nous gratifie d’une série d’articles sur le positionnement CSS
, qui pourra aussi rendre service aux débutants, dès lors qu’ils ont compris les bases des CSS
.
Mais comment passer à XHTML sans trop perdre de temps ? OpenWeb a pensé à vous proposer un tutoriel qui devrait vous prendre moins d’une heure pour apprendre la base du web moderne. Pour les développeurs web de la première heure, un autre article leur est dédié, se focalisant sur les différences entre HTML et XHTML
.
Le modèle de tableaux étant différent de celui des CSS, un certain nombre d’auteurs Web se sont demandé comment centrer un bloc dans une page. Les membres d’OpenWeb sont eux aussi passés par là et livrent tous leurs secrets sur ce sujet épineux.
Pour le gourou qui croit déjà tout connaître d’XHTML et de CSS, Nous avons préparé avec amour un article sur l’Overflow avec un fond fixe qui secoue les neurones à en décoller la pulpe du fond.
Avec de telles lectures, produire du contenu conforme aux spécifications ne devrait être qu’une simple formalité, non ?