Osez HTML5 et CSS3 ! - Alsacréations Un site perso en fil rouge Pour étayer cet article, nous allons nous servir d'un fil rouge : mon site personnel Goetter.fr dont l'intégration a été réalisée en plusieurs étapes, et destiné à servir de passerelle entre mes différentes activités. Puisqu'il s'agit d'un site sans grande portée médiatique ni contraintes, j'ai pu en profiter pour tester HTML5 et moult règles CSS2 et CSS3 (border-radius, rgba, inline-block, transitions, rotations, @font-face, text-shadow, opacity, :before/:after et autres joyeusetés...). Voyons en détails le cheminement et les écueils de cette intégration... Les Grands Anciens Rappel historique Avant de nous lancer dans le vif du sujet, rappelons certains points essentiels. Fort heureusement, cela n'empêche pas les navigateurs récents de se lancer dans l'aventure en proposant des implémentations de propriétés considérées comme "sûres". A l'heure actuelle, quasiment tous les navigateurs modernes reconnaissent les propriétés CSS3 ou HTML5 employées dans cet article.
Les fonctionnalités CSS3 avec Internet Explorer L’utilisation du CSS3 est probablement une des tendances les plus fortes actuellement dans la conception web, permettant ainsi d’implémenter des solutions à des sites web en éliminant l’utilisation de certaines images ou de code JavaScript. Malheureusement, il n’est pas surprenant de voir qu’Internet Explorer, même dans la version 8 du fureteur, ne supporte toujours pas la majorité des nouvelles fonctionnalités qu’offre le CSS3. Vous trouverez, dans le billet suivant, des solutions afin de rendre plusieurs des nouvelles fonctionnalités compatibles avec les différentes versions d’Internet Explorer (6,7 et 8). «Le billet suivant est une traduction d’un article paru sur le site web de SmashingMagazine.com écrit par Louis Lazaris». Opacité/Transparence Même si la propriété d’opacité CSS3 n’est pas compatible dans IE, nous pouvons utiliser un paramètre appelé filter afin d’arriver au même résultat. La syntaxe Démonstration Les Inconvénients Coins ronds (border-radius) N.B. La Syntaxe La syntaxe CSS3:
WebKit Radial Gradients (Circle gradient) « Jukka-Pekka Keisala WebKit in January 2011 released new gradient syntax that is closer to w3c recommendation and Mozilla implementation. The new syntax has four gradient functions: linear-gradient() radial-gradient() repeating-linear-gradient() repeating-radial-gradient() Using CSS gradients in a background lets you display smooth transitions between two or more specified colors; this lets you avoid using images for these effects, thereby reducing download time and bandwidth usage. A gradient specified using circles is called a . -webkit-radial-gradient(circle, white, black); -webkit-radial-gradient(center, 20px 20px, white, black); -webkit-repeating-radial-gradient(left, red 10%, green 20%, blue 30%); -webkit-repeating-radial-gradient(black, black 5px, white 5px, white 10px); -webkit-repeating-linear-gradient(top left, red, red 5px, white 5px, white 10px); -webkit-repeating-linear-gradient(-5px -5px, circle, #bfeeff, #bfeeff 15px, #fff 15px, #fff 30px, #bfeeff 30px, #bfeeff 40px); References
Maîtriser l'impression CSS Proposer une version imprimable reposant uniquement sur une feuille de style pour le media print appliquée à la page affichée par le navigateur offre plusieurs avantages immédiats : Il n’est plus nécessaire de générer côté serveur une version HTML spécifiquement destinée à l’impression ; La feuille de style pour le média print est généralement rapide à créer, dès lors que les styles pour l’affichage sont réservés à ce dernier par la précision du media screen ; Les possibilités sont variées (toutes les propriétés de positionnement, de bordures, de typographie, etc. sont disponibles) ; Les résultats par défaut sont corrects pour un effort somme toute raisonnable. On rencontre cependant deux sortes de difficultés : certaines parties du contenu affiché peuvent finalement ne pas être imprimées, certaines propriétés des CSS print peuvent ne pas avoir d’effet, selon les navigateurs. Les problèmes d’impression peuvent être classés en deux catégories : Ce qui dépend de la configuration du navigateur
Mise en page CSS avancée grâce à la propriété display - Alsacréations L'abandon par de plus en plus d'intégrateurs de l'utilisation de tableaux pour l'élaboration de mises en page a indiscutablement apporté de nombreux avantages, mais également son lot d'inconvénients. Parmi ceux-ci, un majeur: le centrage vertical simple et automatisé du contenu d'un objet. Les habitudes de plusieurs années de développement par tables ont laissé des traces, des habitudes ancrées de manière indélébile qui ne sont pas systématiquement préjudiciables; c'est entre autres le cas du recours à la propriété vertical-align. Fort de ce constat, et vu la puissance qu'offre les cellules de tableaux en terme d'alignement vertical de leurs contenus, la spécification CSS admet logiquement l'attribution de ce comportement à tout élément qui en nécessiterait. Prenons un exemple simple de disposition d'un texte scindé en trois paragraphes que l'on souhaite agencer en drapeau: Logiquement, ma structure HTML sera des plus simplistes:
Créer des boutons images avec les CSS et l’élément button Le bouton est un élement indissociable des formulaires et peut également servir à rendre un lien plus visible. Créer une interface ergonomique ou compréhensible avec des boutons de type Submit est souvent un tâche ardue pour le webdesigner. En effet l'affichage des boutons connait un problème d'uniformité selon le navigateur et les systèmes d'exploitation (ci-dessous les différentes formes d'un bouton suivant les configurations utilisateurs). Nous allons voir comment créer un bouton qui ne change pas selon les configurations utilisateurs. Voici 3 méthodes: 1ere Méthode : CSS + l'élément input La 1ere méthode utilise les CSS sur un élément input : Voici le code qui permet de créer ce bouton Puis en insérant la classe btnImg au bouton submit Cette solution est facile à mettre en place mais je vois 2 inconvénients: les moteurs de recherche lise le texte et non les images. 2eme Méthode : CSS + l'élément button D'autres Méthodes existent
Rediscovering the Button Element Introduction Creating a consistent interface for your users is a constant struggle for every application designer. Building consistency on the web is especially tough because the visual rendering differences across browsers and operating systems are wildly different and almost arbitrary in what can and cannot be done. As is, the input with the type=”submit” is either too ugly (Firefox), a little buggy (Internet Explorer) or completely inflexible (Safari). Inputs vs Buttons So, here’s your standard submit button markup: And it looks like this across the three brothers: Meh. <button type="submit">Submit</button> And it looks like this : These buttons work and behave in exactly the same way as our counterparts above. <button type="submit"><img src="" alt="" /> Submit</button> Which looks like this : Nice. Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. The Results
Google's 174 web fonts in one convenient downloadable tarball for your Photoshopping enjoyment - Axon Flux // A Ruby on Rails Blog Google’s Font Directory and API for web fonts could have a transformative effect on how we read the web. The only problem is, Google has made it very difficult to download all of the actual font files.Web designers must be free to experiment with these new fonts, to sketch, comp and get to know these typefaces in browser and non-browser applications. This is why I’m providing this archive. You can use it in web pages, but until I found this, I couldn't design with it. I found the packaging still vaguely annoying since each ttf file was in a separate directory, so I ran this on the command line (cd to the untarballed directory first): mkdir all; find . Then I had all the ttf files in one directory at the root (.