XooFoo Community :: Blog http://community.xoofoo.org/modules/actus_webmaster/index.php/b29 Thu, 24 May 2012 01:29:53 +0200 ARTICLE @ XOOPS powered by FeedCreator http://community.xoofoo.org/modules/actus_webmaster/images/logo.png XooFoo Community :: Blog http://community.xoofoo.org/modules/actus_webmaster/ 92 52 XML for blog css4design : des css pour votre design html en community at xoofoo dot org community at xoofoo dot org Webmaster La journée mondiale de l'accessibilité, c'est maintenant ! http://community.xoofoo.org/modules/actus_webmaster/view.article.php/6643



Le GAAD (Global Accessibility Awareness Day) dédie cette journée du 9 mai 2012 à la sensibilisation du plus grand nombre à l’accessibilité des contenus et applications digitales (web, logiciel, application mobile, etc.) pour les personnes en situation de handicap.



Demain, le Web sera plus humain





Merci à Monique Brunel (Webatou) d’avoir partagé cette vidéo.



Articles sur le même sujet




flattr this!


Source: http://feedproxy.google.com/~r/css4design/~3/o0F4jML0Nh8/journee-mondiale-accessibilite-9-mai Bruno Bichet]]> Bruno Bichet Wed, 09 May 2012 19:49:58 +0200 CSS Selectors -- Visualiser les sélecteurs CSS de manière interactive http://community.xoofoo.org/modules/actus_webmaster/view.article.php/6642



CSS Selectors – Si comme moi vous avez parfois des difficultés à distinguer la portée de certains sélecteurs CSS, ce site vous sera très utile. il suffit de sélectionner un sélecteur dans la liste et de regarder les éléments qui sont mis en évidence dans le marquage HTML qui sert d’exemple. Cerise sur le gâteau, la page précise les navigateurs compatibles et affiche la règle CSS en cours.



Exemple pour first-child



La règle CSS



#target p:first-child {font-weight: bold;}



Le marquage HTML



<div id="target">
    <h2>Where the Buggalo Roam</h2>
    <p>Alright, let's mafia things up a bit. Joey, burn down the ship. Clamps, burn down the crew. No! Don't jump! Dr. Zoidberg, that doesn't make sense.</p>
    <div>
        <p>Does anybody else feel jealous and aroused and worried?</p>
    </div>
    <h2>The Mutants Are Revolting</h2>
    <p>But, okay! I just want to talk. It has nothing to do with mating. Fry, that doesn't make sense.</p>
    <h2>Space Pilot 3000</h2>
    <p>Now, now. Perfectly symmetrical violence never solved anything.</p>
</div>

L’unique paragraphe sélectionné se trouve dans la balise div sans identifiant. Les sélecteurs disponibles sont : first-of-type, first-child, descendant, child, nth-child, adjacent sibling, general sibling, first-line, nth-of-type et last-of-type.



Via @dhoko_



Articles sur le même sujet




flattr this!


Source: http://feedproxy.google.com/~r/css4design/~3/_b5mjIzmFAw/css-selectors Bruno Bichet]]> Bruno Bichet Mon, 14 May 2012 11:26:44 +0200 Quel est le coeur de métier de l&#039;intégrateur web ? http://community.xoofoo.org/modules/actus_webmaster/view.article.php/6641



Cet article s’inspire d’un tweet de Sophie Drouvroy ?@cyberbaloo_ qui pose une question apparemment toute simple : Pour vous un intégrateur web est censé savoir faire quoi techniquement ? L’intégrateur web devrait maitriser le couple HTML & CSS et connaitre suffisamment Photoshop pour découper les portions d’images. Il doit également pouvoir travailler au milieu d’un langage côté serveur comme PHP ou client comme Javascript. En effet, il arrive souvent que l’intégrateur intervienne sur des projets déjà en production.



Bien sûr, c’est très réducteur car ce métier est au carrefour de beaucoup d’autres : graphisme, design, ergonomie, accessibilité, développement, référencement (SEO), rédaction, etc. Chaque intégrateur et intégratrice web sera plus ou moins à l’aise avec tout ou partie de ces domaines, en fonction de son background et de ses expériences.



La question de Sophie est en fait plus précise : est-ce que l’intégrateur web doit obligatoirement connaitre Javascript ? Oui, l’intégrateur doit posséder des connaissances suffisantes pour modifier ou adapter du code Javascript ou plus prosaïquement pour rechercher le meilleur plugin jQuery en terme de fonctionnalités, de performances et d’accessibilité.



Qu’est-ce que l’intégration web ?




L'intégrateur web produit généralement des pages web à partir d'indications visuelles ou auditives : maquette plus ou moins détaillée dans un logiciel de traitement d'image, croquis à main levée, directives verbales, etc. Il utilise tout code informatique compatible avec les agents utilisateurs (les navigateurs web). Il créent le plus souvent des composés HTML & CSS pour déterminer le fond et la forme des éléments composant la page. Il peut ajouter de l'interactivité avec les utilisateurs en manipulant le DOM avec ECMAScript.


Source : Définir le métier « intégrateur web » ou « intégratrice web »



Qui fait de l’intégration web ?




Intégrateur web

Au sens strict, c’est celui ou celle qui découpe une maquette Photoshop (ou tout autre logiciel de traitement d’image) pour la transformer en page web à l’aide principalement de HTML et CSS. Il peut utiliser Javascript, le plus souvent sous la forme de plugin jQuery pour les carousels, les menus déroulants, etc


Webdesigner

C’est le graphiste spécialisé dans le web qui fait l’intégration de ses maquettes,


Développeur front-end

C’est le développeur PHP/Javascript qui fait la partie frontale du site en allant piocher les informations à afficher dans une base de données. Il utilise principalement PHP, Javascript, HTML et CSS.


Webmaster

Chargé d’alimenter le site web dont il a la charge, il peut être amené à coder les contenus ou à décliner des pages existantes.


Community manager

Ne rigolez pas. Oui, le community manager peut être amené à faire de l’intégration web.



La question subsidiaire est de savoir à partir de quel moment on devient un développeur qui fait aussi de l’intégration ?



Articles sur le même sujet




flattr this!


Source: http://feedproxy.google.com/~r/css4design/~3/Adl-L7m7XvY/metier-integrateur-web Bruno Bichet]]> Bruno Bichet Thu, 10 May 2012 20:21:08 +0200 Guide de bonnes pratiques HTML & CSS par Google http://community.xoofoo.org/modules/actus_webmaster/view.article.php/6597



Soyez cohérent. C’est la conclusion que nous propose Google dans ce guide des bonnes pratiques de codage à l’usage des développeurs web et autres intégrateurs HTML et CSS. Lorsque vous reprenez du code, il est important de tenir compte du style d’écriture d’origine. Si votre prédécesseur utilise des espaces de part et d’autre des opérateurs arithmétiques, faites de même. Si les commentaires sont encadrés de symboles pour dessiner un bloc, faites de même aussi. Soyez cohérent.



Pour nous aider à choisir une conventions de codage pour les langages HTML et CSS, Google propose une liste de suggestions pour que tous les membres d’un projet partagent le même vocabulaire. L’idée est de se concentrer sur ce que l’on a à dire plutôt que sur comment le dire. Via le blog des nouvelles technologies.



-> Lire Google HTML/CSS Style Guide



Articles sur le même sujet




flattr this!


Source: http://feedproxy.google.com/~r/css4design/~3/nN4eB-kwPLI/guide-de-bonnes-pratiques-html-css-google Bruno Bichet]]> Bruno Bichet Thu, 03 May 2012 15:58:58 +0200 Editeur de dégradés CSS3 à la mode de Photoshop http://community.xoofoo.org/modules/actus_webmaster/view.article.php/6596



ColorZilla, connu pour ses extensions couleur pour Mozilla et Chrome, met à notre disposition Ultimate CSS Gradient Generator. C’est un générateur de dégradés CSS3 en ligne qui reprend grosso modo l’interface utilisateur de Photoshop pour fournir les déclarations CSS pour l’ensemble des préfixes propriétaires -moz-, -webkit-, -o-, -ms-. Pour Internet explorer 6 à 8, l’outil génère la propriété filter ; pour les versions IE9 et au-delà il y a même le commentaire conditionnel à ajouter pour annuler filter et basculer sur la génération du dégradé via SVG en base 64.



Les dégradés prédéfinis sont une aubaine pour l’intégrateur web : dans la plupart des cas, il suffira de modifier un des 140 exemples proposés.



Les paramètres modifiables sont :




  • Positionnement des curseurs pour déterminer la longueur, l’opacité et le seuil des couleurs prises en compte,

  • Ajustement des couleurs via des curseurs dynamique pour la teinte, la saturation et la luminosité,

  • L’orientation du dégradé : horizontal, vertical, diagonal (droite-gauche), diagonale (gauche-droite) et radial,



Une fenêtre de prévisualisation permet de voir les changements en direct-live avec une case à cocher pour voir comment Internet Explorer se comporte avec les propriétés qu’il ne prend pas en compte.



Les CSS sont prêt à copier-coller avec en option l’équivalent pour SCSS (Sass) et le choix du mode colorimétrique (HEX, RGB, RGBa, HSL, HSLa).



Exemples SCSS (Sass)




// needs latest Compass, add '@import "compass"' to your scss
background-color: rgb(228,245,252); // Old browsers


@include filter-gradient(#e4f5fc, #2ab0ed, vertical); // IE6-8


// IE9 SVG, needs conditional override of 'filter' to 'none'
$experimental-support-for-svg: true;
@include background-image(linear-gradient(top, rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%));



Exemple CSS




background: rgb(228,245,252); /* Old browsers */


/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U0ZjVmYyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2JmZThmOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzlmZDhlZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMyYWIwZWQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);


background: -moz-linear-gradient(top,  rgba(228,245,252,1) 0%, rgba(191,232,249,1) 50%, rgba(159,216,239,1) 51%, rgba(42,176,237,1) 100%); /* FF3.6+ */


background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(228,245,252,1)), color-stop(50%,rgba(191,232,249,1)), color-stop(51%,rgba(159,216,239,1)), color-stop(100%,rgba(42,176,237,1))); /* Chrome,Safari4+ */


background: -webkit-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Chrome10+,Safari5.1+ */


background: -o-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* Opera 11.10+ */


background: -ms-linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* IE10+ */


background: linear-gradient(top,  rgba(228,245,252,1) 0%,rgba(191,232,249,1) 50%,rgba(159,216,239,1) 51%,rgba(42,176,237,1) 100%); /* W3C */


filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#2ab0ed',GradientType=0 ); /* IE6-8 */



Pour IE9 — IE10



<!--[if gte IE 9]>
  <style type="text/css">
    .gradient {
       filter: none;
    }
  </style>
<![endif]-->



Envie de plus de générateur de CSS ?



-> Rendez-vous sur Le petit journal permanent de CSS3 -- 100+ ressources pour commencer.



PS : Trois message subliminaux se sont glissés dans ce billet



Articles sur le même sujet




flattr this!


Source: http://feedproxy.google.com/~r/css4design/~3/DLF36XMgCqc/editeur-de-degrades-css3-a-la-mode-de-photoshop Bruno Bichet]]> Bruno Bichet Wed, 02 May 2012 19:37:34 +0200 Optimiser les images PNG, JPG, GIF http://community.xoofoo.org/modules/actus_webmaster/view.article.php/6576



Une des clés pour garantir à vos visiteurs une expérience utilisateur fluide et agréable se trouve dans l’optimisation des temps de chargement. A cet égard, les images sont souvent un goulot d’étranglement qui mérite notre attention. Photoshop est souvent utilisé pour la conversion des images aux formats PNG, JPG ou GIF, mais il ne dispose pas du meilleur algorithme de compression. Voici une vingtaine d’outils pour mieux compresser vos images et améliorer les performances de votre site :



Outils en ligne




  • PunyPNG — Réduit le poids des fichiers PNG, JPEG et GIF

  • Smush.it — Compresse les images au format PNG



Logiciels à installer



ScriptPNG et ScriptJPG sont des logiciels pour Windows 32 bits permettant d’optimiser les fichiers images en utilisant différents niveaux de compression pour réduire la taille des fichiers :




  • ScriptPNG convertit les formats GIF, BMP, JPG, PCX, ou TGA vers le formats PNG.

  • ScriptJPG optimise les fichiers JPG grâce à un algorithme avec ou sans perte en fonction de la qualité d’image que vous voulez.



Autres outils





-> Comparatif entre les différentes solutions. Merci @nhoizey pour le lien o/



Articles sur le même sujet




flattr this!


Source: http://feedproxy.google.com/~r/css4design/~3/epGtSGrIL5I/optimiser-images-png-jpg-gif Bruno Bichet]]> Bruno Bichet Sun, 29 Apr 2012 20:01:32 +0200 Recommandations pour développeurs web front-end http://community.xoofoo.org/modules/actus_webmaster/view.article.php/6575



Front-End Development Guidelines — Ce document regroupe un ensemble de bonnes pratiques et de recommandations pour les développeurs web : accessibilité, Javascript (& jQuery), HTML et CSS (& CSS3). Cerise sur le gâteau, vous aurez en prime des ressources complémentaires pour aller plus loin.  Les liens qui suivent peuvent aider à la standardisation du code. Ils permettent de s’assurer que les fonctionalités CSS3 et HTML5 pourront être utilisées sur un grand nombre de navigateurs.




  • jQuery — Javascript sans grumeau

  • jQuery UI — Est à UX/UI ce que jQuery est à JavaScript

  • Modernizr — Détectez les fonctionnalités, pas le navigaeur !

  • RespondJS — Responsive web design dans les vieux navigateurs.

  • @font-face Generator –  Les polices de caractère pour tous, partout.

  • RaphaelJS — Simplifie le dessin vectoriel dans les navigateurs.

  • HTML5 Boilerplate — L’alpha de vos projects web même si on pourrait encore faire le ménage.

  • Twitter Bootstrap — Prototypez rapidement vos applications web.



Merci à @picodix pour le lien o/



Articles sur le même sujet




flattr this!


Source: http://feedproxy.google.com/~r/css4design/~3/7ZSJE-KmodA/recommandations-developpeurs-web-front-end Bruno Bichet]]> Bruno Bichet Thu, 26 Apr 2012 18:12:07 +0200 Lutte des classes CSS ! http://community.xoofoo.org/modules/actus_webmaster/view.article.php/6555



Les classes CSS sont probablement le meilleur ami de l’intégrateur web, mais peuvent vite devenir un cauchemar si la réflexion ne précède pas l’action. Au-delà des conventions de nommage plus ou moins sémantiques, il existe de nombreuses stratégies pour mettre en place une architecture CSS modulable et évolutive. Un temps décriées au profit des identifiants uniques pour de viles questions de performances, les classes reprennent du poil de la bête. Sans forcément tomber dans la «classite» aiguë, voyons rapidement différentes manières d’organiser nos feuilles de style CSS.



Exemple 1



Exemple de code permettant d’appliquer un style commun aux éléments commençant par .btn- et de décliner des styles spécifiques pour .btn-left ou .btn-right. Larry Botha dans About HTML semantics and front-end architecture.

[class*="btn-"] { } // Styles génériques
.btn-small { }      // Diminuer font-size
.btn-medium { }     // Taille par défaut
.btn-large { }      // Augmenter font-size
.btn-primary { }    // Faire flotter le bouton à gauche
.btn-secondary { }  // Faire flotter le bouton à droite
.btn-left { }       // Ajouter une icône à gauche des boutons
.btn-right { }      // Ajouter une icône à droite des boutons



Exemple 2



On peut aussi s’inspirer du modèle d’architecture de l’exemple précédent en jouant sur les classes multiples :

.btn { }            // Styles génériques pour les boutons
.icon-right { }     // Ajouter une icône à droite de n'importe quel élément
.icon-left { }      // Ajouter une icône à gauche de n'importe quel élément
.btn.icon-right { } // Ajouter une icône à droite du bouton
.btn.icon-left { }  // Ajouter une icône à gauche du bouton



Exemple 3



Autre manière d’application d’un style générique à un élément .item déclinable selon le contexte. Rapide et pratique, cette solution présente tout de même l’inconvénient de ne pas être totalement scalable si vous décider de créer un nouveau contexte tel que #header .item {}

.item {}             // styles génétiques pour item
#cart .item { }     // styles spécifiques pour item dans le contexte du panier
#category .item { } // styles spécifiques pour item dans le contexte des catégories
#product .item { }  // styles spécifiques pour item dans le contexte des produits

Pour rendre ce dernier exemple plus scalable et plus performant (en évitant d’obliger le navigateur de boucler sur trop de sélecteurs), on pourrait utiliser :
.item { }
.item-cart {  }
.item-category { }
.item-product { }

L’approche des classes multiples est moins performante mais permet de modulariser votre feuille de style de manière plus fine. A condition toutefois d’en avoir vraiment besoin. En effet, leur utilisation se traduit forcément par une intrusion accrue des classes CSS dans le code HTML et nécessite plus de règles dans la feuille de style, ce qui peut manquer de… classe !
.item { }
.cart { }
.category { }
.product { }
.item.cart {  }
.item.category { }
.item.product { }



Pour aller plus loin





Articles sur le même sujet




flattr this!


Source: http://feedproxy.google.com/~r/css4design/~3/XQm3cFCrwBY/lutte-des-classes-css Bruno Bichet]]> Bruno Bichet Wed, 25 Apr 2012 13:37:11 +0200 Tutoriels pour apprendre HTML & CSS http://community.xoofoo.org/modules/actus_webmaster/view.article.php/6524



Il existe de très nombreuses ressources pour apprendre les langages du web HTML & CSS. Bien sûr, les spécifications du W3C en la matière sont un passage indispensable, mais il ne faut pas oublier qu’il existe des tutoriels plus… didactiques. Ceux que je vous présente vous prendront par la main pour que le plongeon dans le grand bain de l’intégration web ne se transforme pas en «plat» douloureux.



Learn HTML & CSS présente 10 leçons proposées par @shayhowe pour débuter avec HTML & CSS et développer votre premier site web :




  1. Terminologie, syntaxe et introduction — Avant de commencer ce voyage dans HTML & CSS il est important de bien comprendre les termes utilisés.

  2. Eléments et sémantique — Passage en revue des balises HTML et la sémantique qui leur est associée.

  3. Modèle de boite et positionnement — Comment gérer la taille des éléments (largeur, hauteur, marges internes et externes, bordures) et comment les positionner (positionnement flottant, absolu, fixé).

  4. Typographie — Mettre en gras, en italique, en exergue, utiliser les polices de caractère. Bref, tout ce qu’il faut savoir sur la gestion du texte pour rendre vos compositions plus belles et plus lisibles.

  5. Fonds et dégradés — Les fonds sont un élément important pour attirer l’attention des visiteurs. Apprenez comment mettre une image en background ou un dégradé avec CSS3.

  6. Listes (ordonnées, non-ordonnées et définition) — Les listes font partie de notre vie quotidienne : recettes, choses à faire, instructions, etc.

  7. Images, audio et vidéo — Apprenez à gérer l’affichage des médias sur le web avec les dernières technologies et les fallbacks qui vont bien. Le point également sur les éléments figure et figcaption.

  8. Formulaires — Les bases concernant les formulaires, les bonnes pratiques, des exemples.

  9. Données tabulaires (tableaux) — La gestion des tableaux peut s’avérer complexe. Cette page fait le point sur chaque élément à connaitre.

  10. Bonnes pratiques de développement et ressources — Les bonnes pratique de développement avec HTML & CSS : balisage sémantique et valide, bonne utilisation des attributs (notamment title et alt), séparation du fond et de la forme, les commentaires, les préfixes vendeurs, le regroupement et l’alignement des déclarations, etc.



Un bien joli site très didactique qui donne, pour chaque rubrique, l’ensemble des éléments et des attributs à prendre en compte avec de nombreux exemples pratiques. Un must-read (et oui, toutes ces bonnes choses sont écrites en anglais). Via @pomeh



CSS Débutant — Si vous êtes plus à l’aise avec le français, je vous invite à consulter le site de @PascaleLC où vous pourrez cultiver les standards du web :




  1. Premiers pas en CSS — Pour appréhender progressivement et facilement les feuilles de style et les rudiments du HTML

  2. Tutoriels CSS — Techniques pour réaliser des boutons, des formulaires, des menus, etc.

  3. CSS3 – Créer des ombres, arrondir les coins, ou encore adapter ses pages aussi bien aux grands écrans qu’aux smartphones.

  4. Boite à outils — Besoin d’un générateur de CSS ou de bouton, d’outils de développement ou d ‘une liste de discussion peuplée de gens compétents et sympas ? C’est là que ça se passe.



CSS : l’Art & la Science — Encore en français — et suggéré par LeonsaysHi –, ce tutoriel empreint de poésie et d’humour aborde avec intelligence les neuf points suivants :




  1. Un tango se danse à deux — HTML & CSS, attributs, sémantique, flux

  2. Le pinceau CSS — Syntaxe, sélecteurs, héritage

  3. Au plaisir des yeux — Color, font, text, word

  4. L’abîme — Background, sprite

  5. La dimension de nos espérances — Height, width, margin, padding, border

  6. Au vent favorable — Float, clear

  7. La prise, l’empire du désir — Position : relative, absolute, fixed, static

  8. Pratiques de base — Le petit bassin

  9. Bonnes pratiques — Le grand bassin



Articles sur le même sujet




flattr this!


Source: http://feedproxy.google.com/~r/css4design/~3/HAKk9AY4ZRQ/tutoriels-apprendre-html-css Bruno Bichet]]> Bruno Bichet Wed, 18 Apr 2012 20:21:02 +0200 EM Calculator : simplifiez vos calculs en em http://community.xoofoo.org/modules/actus_webmaster/view.article.php/6494



Une pratique courante pour déterminer les tailles de caractère consiste à utiliser une valeur de 62.5% sur le body pour obtenir une taille de base de 10px et d’utiliser un coefficient multiplicateurs en em pour simplifier les calculs à venir. Dans ce contexte, 1.2em est égale à 12px et 2.4em à 24px, etc. Selon l’article Font sizing with rem could be avoided, c’est une fausse bonne idée : des calculs fastidieux nous sont épargnés, certes, mais nous devrons spécifier les nouvelles tailles à chaque fois. On ne peut raisonnablement pas utiliser une taille par défaut de 10px pour le texte si on veut être lu.



EM Calculator



Si vous voulez utiliser une taille par défaut de 14px pour le texte, il vaut mieux appliquer une taille de 0.875em sur le body et sortir la calculette pour les autres tailles. Si vous avez la flemme d’utiliser votre calculatrice, EM Calculator est fait pour vous.



EM Calculator est un outil créé en JavaScript par Piotr Petrus pour convertir des px en em pour simplifier l’usage des em.


EM Calculator est un service simple et efficace pour déterminer l'équivalent em d'une taille exprimée en px.



Une des pierres d’achoppement des em's est qu’il faut remettre un coup de font-size: 1em; lorsque les balises sont imbriquées. Pour pallier cet inconvénient, EM Calculator permet de choisir sur quels niveaux de profondeur le calcul doit s’effectuer. Bien sûr, certains diront que l’unité rem est faite pour cela, mais l’utilisation de EM Calculator n’est tout de même pas si rédhibitoire.



Les plus



Comme vous pouvez le constater sur l’illustration ci-dessus, il est possible de choisir entre un élément frère (sibling) ou enfant (child). Parmi les options, nous pouvons modifier la taille par défaut de l’agent utilisateur (en général 16px). Cerise sur le gâteau, on peut sauvegarder plusieurs sessions de travail.



Le moins



Il ne semble pas possible d’exporter les CSS.



Articles sur le même sujet




flattr this!


Source: http://feedproxy.google.com/~r/css4design/~3/yCXNSdY-1FM/em-calculator-simplifiez-vos-calculs-en-em Bruno Bichet]]> Bruno Bichet Sun, 15 Apr 2012 16:38:04 +0200