background preloader

Mise en page CSS avancée grâce à la propriété display - Alsacréations

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:

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

La théorie des floats « OnFaitDuWeb.com Les éléments flottants ou floats font partie des outils de positionnement les plus utilisés en CSS et pourtant ils sont souvent une source de tracas majeur pour les développeurs web. Le problème du float est celui de la plupart des autres propriétés de positionnement qui « sortent de l’ordinaire », c’est-à-dire qui ne correspondent pas au positionnement par défaut. Parce qu’il applique de nouvelles règles de positionnement, un élément flottant ne peut pas être manipulé de la même façon qu’un positionnement normal si l’on souhaite avoir le résultat désiré. En clair, vous ne pouvez pas exiger d’une cafetière qu’elle vous fasse un café si vous mettez des feuilles de thé dans le filtre sous prétexte que, ben, cette technique a toujours bien marché dans la théière. Avant de parler de float, parlons de flux. La notion de flux est très importante en CSS. On en vient à la définition… Attention, c’est le contenu des éléments qui flotte. … Et aux règles essentielles de fonctionnement d’un float. 1.

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 (.

Les commentaires conditionnels pour Internet Explorer Les commentaires conditionnels sont un mécanisme propre à Internet Explorer Windows, qui permettent d'inclure dans une page (X)HTML, de manière valide, du code qui ne sera lu et interprété que par Internet Explorer, ou par l'une ou l'autre de ses versions. Techniquement, il s'agit de simples commentaires HTML, qui seront compris comme tels par la plupart des navigateurs. Cependant, le contenu de ces commentaires a une syntaxe spéciale, qui permet à Internet Explorer de savoir s'il doit interpréter le contenu du commentaire ou bien l'ignorer. Les commentaires conditionnels sont compris par Internet Explorer depuis la version 5.0 mais sont officiellement abandonnés à partir d'Internet Explorer 10. Syntaxe de base L'exemple le plus simple de commentaire conditionnel est le suivant: Rappel: un commentaire conditionnel ne peut être inséré que dans un document (X)HTML, et ne peut contenir que des instructions (X)HTML et non CSS. Exemple d'utilisation: Viser une version ou un éventail de versions

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

Crazy Egg – Visualize where your visitors click Over 200,000 businesses Convert Better with Crazy Egg, The Original Heatmapping Technology A heatmap is an easy way to understand what users want, care about and do on your site by visually representing their clicks - which are the strongest indicators of visitor motivation and desire. A Crazy Egg heatmap lets you collect more than 88% of the data you would using a traditional eye-tracking process. At a fraction of the price. Because Google Analytics & Site Catalyst Leave Questions Unanswered, Trust Crazy Egg Visualizations to Help You Understand Your Users. Wouldn't you like to fill in the gaps left by analytics… without A/B testing every little assumption… and without breaking the bank on in-lab usability studies? Heat Maps: At a glance, see the hotspots on each page - so you know what to change, preserve or delete "Do our users think they can click greyed out buttons?" Click-Tracking Overlays: Find a hot spot? Scroll Maps: "Where are we losing visitors on our lead gen page?"

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:

Polices standards pour le Web (Web-safe fonts) « OnFaitDuWeb.com Les Web-safe fonts sont des polices de caractère qui sont présentes dans la plupart des systèmes d’exploitation (Windows, Linux, OSX) et qui sont utilisées par les concepteurs Web pour augmenter leur chance d’avoir du contenu Web diffusé selon leur choix de police. En effet, l’objectif de tous les webmestres de ce monde est de concevoir des sites Web qui s’affichent de la même façon (ou presque) peu importe les plate-formes, les navigateurs ou les périphériques des internautes. Pour ce faire, il est nécessaire d’utiliser des web-safe fonts. Les internautes voient seulement les polices qui sont installées sur leur ordinateur. Advenant le cas qu’un internaute n’ait pas une police, son navigateur choisira une police alternative. N’y pensez même pas, il est impossible de forcer les internautes à télécharger et istaller une police! Pour avoir le maximum de contrôle sur l’affichage, il est donc aussi important de déterminé les polices alternatives ainsi que la famille. —CURSIVE—Comic Sans MS

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.

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 ! Les styles CSS appliqués finalement à une page Web ont de multiples origines simultanées : styles utilisateurs et styles par défaut de l'agent utilisateur s'ajoutent aux différentes feuilles de styles éventuellement prévues par l'auteur, pour structurer ses CSS en modules, offrir des styles alternatifs ou styler ses documents pour différents medias. La question-clé est donc le mode de combinaison de ce large éventail de styles possibles. C'est ici qu'interviennent le fonctionnement en cascade propre aux CSS et le calcul de la priorité respective des différents sélecteurs susceptibles de viser le même élément XHTML. Les sources de style possibles Trois séries de styles CSS d'origines différentes sont susceptibles d'être concurrentes ou combinées pour un même élément (X)HTML : Et en dernier ressort

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:

Related: