Repères
Profil
Technologie
Thème
Technologie : CSS
Openweb.eu.org > Technologie : CSS
Grands principes de construction moderne de CSS
Nous l’avons souvent abordé, soutenu, défendu : le développement front-end et notamment de CSS est une pièce centrale des sites web et même du Web, et ce phénomène s’accentue de plus en plus, notamment avec les sites en responsive.
Nicolas Hoffmann vous propose à cet effet une série de pas moins de dix articles sur les approches et contraintes modernes qui touchent CSS.
Ce que vous avez toujours voulu savoir sur CSS
Adaptive Images and Responsive Web Design
Cédric Morin makes a ready-to-use solution solving Adaptive Images issue, that fits well with dynamic websites (one more solution, yeah): this solution is not trivial, but is designed to be automated.
Adaptive Images et Responsive Web Design
Cédric Morin étudie une solution prête à l’emploi pour résoudre le casse-tête des Adaptive Images, adaptée aux sites dynamiques (une de plus, oui).
Cette solution est complexe, mais est prévue pour être complètement automatisable (comprenez industrialisable).
Intégration web, les bonnes pratiques
Une fois n’est pas coutume, nous reproduisons ici la préface du livre « Intégration Web, les bonnes pratiques » avec l’accord de l’auteure Corinne Schillinger. Cette préface a été écrite par deux de nos membres, à savoir Élie Sloim et Laurent Denis. Nous ne saurions que trop vous recommander de lire cet excellent ouvrage, ainsi que de savourer toute l’essence et l’évolution du métier de développeur front-end que cette préface relate.
Rétablissons l’outline
Un point extrêmement simple à gérer en matière d’accessibilité mais tellement important pour certaines personnes est souvent oublié, ce point s’appelle… la visibilité du focus clavier. Tanguy Loheac et Nicolas Hoffmann vous invitent à vous en souvenir dans un petit article agrémenté d’une vidéo explicative.
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.
Les commentaires conditionnels : passé, présent et futur
Les commentaires conditionnels ont eu une certaine évolution dans leur pratique, Nicolas Hoffmann vous propose une rapide mise en perspective de ce système autant haï qu’apprécié, et un regard sur l’avenir d’une telle possibilité.
Le contexte de formatage block en CSS
Defining Breakpoints
To set up a responsive strategy on one’s Web design implies an important prior reflection. Responsive Web design is much more than percentage units: it consists in a real rearrangement of the containers, and sometimes of content, according to the device in order to privilege the readability and legibility of the information. With a concrete and standard example, Nicolas Torres teaches you how to set clever responsive breakpoints.
Les CSS désormais supportées par les navigateurs modernes sont l’outil de présentation des pages Web standards.
A la différence des méthodes employées dans les années 90, les CSS permettent une stricte séparation du contenu HTML et des informations de mise en page. Le gain réalisé est considérable :
- gestion simplifiée et économique de la présentation d’un site à l’aide d’une seule feuille de style pour toutes les pages, aisément modifiable ;
- allègement des coûts de développement et de maintenance : il n’est plus nécessaire de mettre en place un système (hasardeux) de discrimination des navigateurs pour servir aux différents navigateurs un document adapté aux technologies propriétaires qui balkanisent le Web ;
- allègement du code-source des pages Web, et donc économie de bande passante : une feuille de style n’est chargée qu’une fois par un navigateur, qui l’applique sans délai si nécessaire aux pages visitées par la suite ;
- possibilité de doter une page de feuilles de style spécifiques selon les medias (navigateurs graphiques, lecteurs d’écran…). Les feuilles de style
print
permettent une impression immédiate d’une page depuis le navigateur, et dispensent d’avoir à créer une version imprimable du documentHTML
; - possibilité de doter une page de présentations alternatives au choix de l’utilisateur ;
- création de layout flexibles, qui s’adaptent aux différentes résolutions d’écran ;
- meilleure accessibilité des pages Web par la disparition des tableaux détournés à des fins de présentation.