Le Web c’est pas en 72 dpi, coco! Pour fêter ma présence sur ce blog — youloulou, foule en liesse! — je vous propose de dézinguer un mythe du petit monde de l’informatique et du graphisme. Ce mythe dans sa plus simple expression: Le print c’est en 300 dpi, et pis le web c’est en 72 dpi. Et donc, ça c’est faux. Densité des pixels d’un écran: à vos calculettes! Petit exercice pratique: nous allons calculer ensemble la densité de pixels d’un écran. Sur cet écran, 1 mm correspond à un peu moins de 4 pixels.On aura un résultat différent sur d’autres écrans. Pour notre exercice, prenons par exemple l’écran de mon iMac (insérez ici un troll de votre choix). Sa diagonale est de 20 pouces (à peu près, c’est probablement une valeur arrondie).Sa définition native est de 1680 pixels en largeur, et 1050 en hauteur. Pour savoir quelle est la densité de pixels de mon écran, je peux diviser la longueur de la diagonale en pixels par cette même longueur en pouces, et j’obtiendrai un résultat en pixels par pouce. Chaque écran est différent
Ce que vous avez toujours voulu savoir sur CSS Aujourd’hui, c’est un fait: tout le monde connaît et utilise CSS. Et c’est tant mieux! Cependant, bien que le langage en lui-même soit plutôt simple, certains aspects peuvent sembler encore obscurs. Cet article fait suite à une présentation que j'ai donnée lors de la Kiwi Party 2013, puis lors des MSTechDays 2014. CSS, c’est simple «Le langage CSS, c’est très simple». Ne vous cachez pas, je vous vois… On s'est tous déjà dit: <td>CSS Sucks</td>! La cascade CSS Le C de CSS signifie Cascading (cascade en français), ça tout le monde le sait. les feuilles Author: les devs webles feuilles User: les utilisateursles feuilles UA: les styles navigateurs (modifiés éventuellement par les réglages des utilisateurs) La cascade CSS applique alors un poids à chaque déclaration en suivant cet ordre: récupération de toutes les déclarations CSS pour le média cibletri des déclarations suivant cet ordre UAUserAuthorAuthor ! On remarque que les styles utilisateurs ! Spécificité des sélecteurs Les valeurs CSS
lorempixel - placeholder images for every case Tombez pour SMACSS | @nicoespeon Petit tour d'horizon sur ces guidelines qui feront de vous un bûcheron du CSS, un vrai. Timber ! SMACSS est un ensemble de conseils et de lignes de conduite élaborés par Jonathan Snoovvk et dont le but est de vous permettre d’organiser votre CSS de manière claire et intelligente. Le premier principe réside dans la catégorisation : on distingue et regroupe les règles CSS par affinité logique afin de structurer son code (base, layout, module, state, theme). Le second principe relève de la convention de nommage : ne pas utiliser des ID quand une classe fait très bien l’affaire, nommer les classes de manière à faire ressortir la logique qui s’y cache, … Le troisième principe consiste à découpler le HTML du CSS : garder chaque module indépendant du contexte HTML dans lequel il se trouve, utiliser les sélecteurs d’enfants à bon escient, … Avec ces 3 principes, SMACSS vous permet de poser des bases solides pour un CSS de qualité, made in Canada ! Principe et intérêts Les 3 grands principes de SMACSS
HTML Templates News or Magazine This template puts a focus on bold images, perfect for a magazine style site with eye catching content. Your stories are easy to find with large feature blocks. See Demo Real Estate or Travel Big thumbnails with a space for captions and descriptions along with an informative header make this the perfect template for real estate or hotel booking. See Demo Ecommerce Homepage Building an online store? See Demo Agency Bring your work to the forefront with this sleek template that's perfect for agencies or freelancers. See Demo Blog w/ Sidebar Large images, an easy to navigate layout, and versatile sidebar will help you get your blog up and running. See Demo Blog Single Column This sleek, minimal approach can help your blog stand out by putting content front and center. See Demo Portfolio Show off your work and highlight what you do with this grid style thumbnail layout. See Demo Product Page Highlight your new product and educate potential customers with this classic template. See Demo
Conventions CSS • Conseils et bonnes pratiques Accueil → La plupart du temps, j'utilise simplement des classes délimités par des traits d'union (ex. .foo-bar, pas .foo_bar ou .FooBar), mais dans certaines circonstances, j'utilise la notation BEM (Block, Élément, Modifieur). BEM est une méthode pour nommer et classifier vos sélecteurs CSS de façon à les rendre beaucoup plus strict, transparent et informatif. La convention de nommage suit ce modèle : .block {}.block__element {}.block--modifieur {} .block représente le niveau supérieur d'une abstraction ou d'un composant. .block__element représente un descendant de .bloc puisqu'il contribue à former .bloc dans son ensemble. .block--modifieur représente un état ou une version différente de .block. Une analogie du fonctionnement de la méthode BEM : .personne {}.personne--femme {} .personne__main {} .personne__main--gauche {} .personne__main--droite {} Ici, nous pouvons voir que l'objet de base que nous décrivons est une personne, et qu'un autre type de personne pourrait être une femme.
Les sprites CSS Le temps des onmouseover, des images préchargées via JavaScript et des autres joyeusetés héritées des grandes périodes de tag soup est, comme le temps des Elfes de la Terre du Milieu, définitivement révolu : faire des effets de rollover sur des images est tout à fait possible en utilisant uniquement les CSS. La technique consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Celles-ci seront ensuite appelées dans la feuille de style, et la fenêtre d'affichage sur l'une ou l'autre image sera définie en CSS grâce à la propriété background-position. Attention : la technique exposée dans ce tutoriel est à manier avec précaution car elle peut engendrer des problèmes d'accessibilité (typiquement lorsque les images ne sont pas actives). Les avantages des sprites CSS sont multiples : Des sites à fort trafic (Youtube, Google, Facebook, Amazon, ...) exploitent cette technique sur des pages que vous consultez tous les jours : Inconvénients
Bonnes pratiques en CSS : BEM et OOCSS Des années durant, j'ai intégré des sites Web et développé des applications JavaScript sans ressentir le besoin d'une méthodologie pour nommer les classes CSS. Puis, les projets grossissant, le code CSS est devenu douloureux… L'épineux sujet du nommage en CSS est loin d'être fermé. Depuis le début de la décennie, plusieurs auteurs majeurs ont partagé leurs recherches. Ils ont apporté un regard nouveau et sont allés à contrecourant, en rupture avec ce qui faisait jusqu'alors consensus. Sommaire Je me suis d'abord tourné vers OOCSS (Object Oriented CSS), un ensemble de bonnes pratiques initiées par Nicole Sullivan (Stubbornella). Le concept de OOCSS est de repérer des « objets CSS », c'est-à-dire des « patterns visuels » qui se répètent, et de définir ainsi des classes réutilisables. OOCSS met en avant deux principes : Le principe de séparation de la structure et de l'apparence ; Le principe de séparation du conteneur et du contenu. Mais OOCSS correspondait imparfaitement à mon besoin. Aïe.
Conseils sur les fichiers sitemaps et le référencement (SEO) Voici tout ce qu'il faut savoir sur le fameux fichier sitemap et son impact sur le référencement. Ce tuto explique les risques d'une mauvaise compréhension de l'utilité du sitemap et donne de nombreux conseils. Article mis à jour le 22/06/2015, publié initialement le 07/06/2014 Un fichier sitemap pour Google, utile au SEO ? Ce dossier fournit des explications et des conseils pour exploiter les fichiers sitemaps XML ou TXT pour votre référencement naturel Qu'est-ce que le fichier sitemap ? J'écris "fichier sitemap" pour ne pas confondre avec le plan de site, cette page web destinée aux internautes, leur permettant de se situer dans le site et de comprendre la logique de son arborescence. Un fichier sitemap est un fichier listant des URL du site que l'on souhaite faire crawler (et donc aussi indexer). Exemple de fichier sitemap XML (sur elysee.fr). Intérêt des sitemaps Un fichier sitemap favorise-t-il le référencement ? La réponse rapide est NON ! Oui, c'est à peu près mon point de vue. <?
Specificity - SitePoint Specificity is a mechanism within the CSS cascade that aids conflict resolution. The concept of specificity states that when two or more declarations that apply to the same element, and set the same property, have the same importance and origin, the declaration with the most specific selector will take precedence. Consider this example: The above example style sheet contains four style rules that have a selector that matches p elements. The simple answer is that the more specific selector’s declaration will take precedence. Here’s a simplified description of the process by which the specificity of the selectors of two or more declarations is compared: If one declaration is from a style attribute, rather than a rule with a selector (an inline style), it has the highest specificity. If two or more selectors have the same specificity, then, according to the rules of the CSS cascade, the latter specified rule takes precedence. <p style="color:red;">Red Text</p> We now have our result.
Comprendre le Viewport dans le Web mobile Le Viewport désigne schématiquement la surface de la fenêtre du navigateur. Cependant, la notion de viewport sur un appareil mobile est différente de celle sur un écran de bureau : sur mobile, le navigateur ne dispose pas de "fenêtre" réelle, ni de barres de défilement car tout est prévu pour naviguer de manière tactile. Comprendre la notion de viewport est absolument indispensable dans un projet d'intégration de site web pour tablettes et smartphones, ou dans un esprit d'adaptation "Responsive Web Design". Les différentes surfaces d'un mobile Afin de mieux cerner et exploiter le concept de viewport sur terminaux nomades, il nous faut commencer par maîtriser deux notions de base : la surface réelle et la surface en "pixels CSS" des mobiles. La surface physique C'est le nombre physique de pixels qui composent la matrice de l'écran, telle que le constructeur le décrit dans les caractéristiques, en gros la "résolution" (en vérité le terme juste est "définition"). Niveau de zoom initial
50+ Beautiful CSS3 Buttons with Effects & Tutorials - freshDesignweb Same effect can be used on navigation bars, buttons etc., and these look great in every major browser except Internet Explorer 8 and below as they do not support the gradients and box shadows. Please take a look at the source code to understand more about them. Enjoying wonderful new CSS3 properties we can create some amazingly elegant and stylish buttons styles without the smell of an image and have perfectly adequate fall back styles for older browsers. You may like to create your buttons directly in CSS, or you may like to head to your layout tool of choice, but it is important to consider how your button design lives in context . Those css css3 button that I always think about when i design buttons. You may like this post: Beautiful Free Flat Social Media Icons Sets CSS3 Hexagon Buttons CSS3 Hexagon Buttons created with pure CSS3 and also used javaScript for flexibility. demo download / more info series of simple CSS buttons A series of simple CSS buttons. download / more info
Initiation au positionnement en CSS (Partie 1) Pour éviter l'usage inconsidéré des tableaux de mise en page, l'utilisation correcte de chaque élément (balises div, p, h1, ul, li, etc.) ainsi que leur positionnement en CSS est dorénavant indispensable. Les éditeurs HTML visuels n'utilisent qu'une infime partie des possibilités des balises (faussement nommées "calques" en général), ce qui les rend souvent peu compatibles et peu pratiques. Cet article en deux parties explique comment positionner les éléments en CSS de façon optimale. Résumé et pense-bête. Tous les éléments (balises) HTML peuvent être positionnés, décorés, dimensionnés, ... grâce aux styles CSS. Les balises de bloc et les balises en-ligne Ce chapitre sur la structure des balises est primordial, vous devez auparavant avoir consulté le tutoriel sur les bloc/en-ligne. Voici un résumé pour les lecteurs pressés les éléments de rendu "bloc" se placent toujours l'un en dessous de l'autre par défaut (comme un retour chariot). Ancêtre, Parents, Enfants, Frères Le Flux