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
Une «classe conditionnelle» pour IE 6 et 7 - Alsacréations Les cancres du Web, Internet Explorer 6, 7 et parfois 8, nous mènent souvent la vie dure. Même quand on s’abaisse à leur niveau, il leur arrive de ne pas comprendre, ou d’y mettre de la mauvaise volonté. La solution classique (comprendre: à l’ancienne) est d’utiliser des hacks CSS. Ces derniers sont déconseillés car peu fiables; en effet, on ne sait jamais à l’avance quels seront les navigateurs sur le marché dans deux ou cinq ans, et comment ils comprendront ou pas nos hacks CSS. Nous allons voir dans cet article que l’utilisation habituelle des commentaires conditionnels a quelques inconvénients, et proposer une technique qui combine plusieurs avantages : les classes conditionnelles. Le problème des commentaires conditionnels Les commentaires conditionnels se présentent comme des instructions dotées d’une condition (if) et qui peuvent se placer à n’importe quel endroit du document (X)HTML. Au final, vous jonglerez avec au minimum trois feuilles de styles CSS : Une alternative ?
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. Now I can. EPIC WIN. 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 (.
HasLayout et bugs de rendu dans Internet Explorer 6-7 - Alsacréations Le HasLayout, dont vous avez sans doute entendu parler au détour d'un tutoriel ou sur un forum, est une spécificité du navigateur Internet Explorer pour Windows, qui affecte les versions 5 à 7 incluses. Il s'agit d'un mécanisme interne du moteur de rendu d'Internet Explorer. Le HasLayout intervient dans le positionnement des éléments et plus généralement dans le calcul de l'affichage des pages web. Bref, c'est une question de cuisine interne. Concrètement, qu'est-ce-que c'est? Les explications détaillées sur le HasLayout peuvent être trouvées dans l'article On Having Layout. On retiendra surtout que, pour Internet Explorer, tout élément d'une page HTML peut avoir deux états: soit il a le layout, soit il ne l'a pas. Mais qui a le layout? Un exemple de différence de rendu lié au layout Par défaut, les éléments flottants «dépassent» de leurs blocs parents. <p style="border: solid 2px red;"> Ce paragraphe n'a pas le "layout". On pourrait multiplier les exemples. Conférer le layout à un élément
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
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:
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.
Build a HTML5/CSS3 Website Layout Without Images – Part 1 Ever since all the articles showcasing the new features in HTML5 and CSS3 started appearing around the web, I have had the idea of building a website layout without any images. With all the advancements in HTML5 & CSS3 (compared to previous respectable specs) it wouldn’t be too hard to create a decent-looking website that wouldn’t have to rely on images for the layout elements. Here is the layout that we will be building: The Contents of our Demo Folder In the image above, you can see the contents of the folder containing our finished demo page – as promised: no images. As always, I recommend laying down the entire website’s content in the index.html file before you even think of touching CSS, so let’s jump right into it. HTML5 – Making Your Coding Faster and Your Code Leaner In addition to introducing new semantic elements, HTML5 also makes our code much shorter. Doctype Declaration and The Head Tag Let’s take a look at the doctype declaration and the head section of our HTML page:
Prévoir un site pour toutes les résolutions - Alsacréations La question des dimensions idéales d'un site est souvent posée. Les résolutions d'écran varient généralement de 800x600 pixels à 1280x960 pixels, en passant par 1024x768. Quelle est donc la résolution à privilégier ? Quelle est la dimension idéale pour un site web ? Les sites web étant conçus avec des éléments graphiques (la plupart du temps) non vectoriels, ceux-ci n'adoptent pas le même rendu selon la résolution de l'écran du visiteur, notamment en terme de répartition horizontale. Quelques statistiques (2010) 1% d'utilisateurs en 800x600 20% en 1024x768 75% en résolutions supérieures (sources : W3Schools, W3counter) Premier constat : pour toucher un maximum de visiteurs (toutes résolutions confondues), un site doit être conçu sur une résolution minimale de 1024x768, et être consultable (avec ascenseurs) dans les résolutions inférieures. Tendances actuelles Il existe plusieurs techniques de design qui s'adaptent bien à toutes les résolutions actuelles : Le design fluide
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. 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. No where does this become more apparent than when you’re dealing with form elements and the biggest loser of them all in the battle for a standardized look is the infamous Submit button. 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. The CSS