background preloader

Modernizr Download Builder

Modernizr Download Builder

Les transitions CSS3 | Les outils Css Quatre propriétés CSS3 sont utilisées pour faire des transitions css. Les propriétés de transitions se mettent toujours dans le sélecteur qui contient les propriétés css de fin de transition. transition-property La propriété css transition-property permet de définir la ou les propriétes css qui seront prises dans la transition.transition-property: border-bottom-color, border-bottom-width; transition-duration transition-duration permet de définir la ou les durées css de la transition de chaque propriété css qui sera prise dans la transition. transition-delay transition-delay permet de définir le ou les temps de latence avant le déclanchement de chaque transition. transition-timing-function transition-timing-function permet de définir la manière dont progresse la transition entre deux états d'une propriété css. Pour la transition de type cubic-bezier, il est possible de mettre des valeurs négative et supérieur à 1 pour le deuxième et quatrième champ.

Il était une fois… Modernizr | Blog Arolla Un jour la princesse interpella le grand chambellan : « Grand chambellan venez par ici, j’ai à vous exposer un de mes soucis. Voyez-vous pour mon site j’ai une envie bien définie. J’aimerais que la homepage soit personnalisée en fonction de la dernière recherche effectuée ; mais voilà je suis désappointée par la retrocompatibilité… Auriez-vous une idée pour me sauver ? - Évidemment ma princesse, j’ai la réponse à vos soucis : le browser storage va combler vos envies. - Grand chambellan vous êtes merveilleux, mais que faites-vous des navigateurs qui sont vieux ? - Là aussi point de panique, Modernizr et Yepnope sont pour cela des outils très pratiques. - Grand chambellan vous êtes épatant, dites m’en plus je suis impatiente. » Et le grand chambellan alors expliqua : 1. Modernizr permet de faire abstraction du user-agent en se basant sur la détection des fonctionnalités propres au HTML5 et CSS3. 2. Modernizr en lui-même permet uniquement de faire de la détection de fonctionnalité. 1. 2.

Initializr - Start an HTML5 Boilerplate project in 15 seconds! Free Code Snippets for CSS3 Animation Online tutorials are useful but not always plentiful when it comes to really detailed animation effects. But if you already know enough about coding then it’s easy to dissect someone else’s example to recreate your own. CSS3 animation is still a new topic hot off the presses with fresh source code examples delivered by your friendly neighborhood code repository. I scoured through Google putting together 30 examples of brilliant CSS3 animation effects. The code snippets are free and open source to copy into any work personal or commercial. Each sample is hosted live on CodePen with access to all resources and a live demo. Sailboat Animation Weather Icons Less Loaders Popup Window Cube Animation Circle Illusion Loader Tumblr Like/Unlike Minimal Throbbers CSS3 Animated Effects Map Marker Cloudy Spiral MacBook Air Concentric Spheres Cubes in CSS3 Slidedown UI Animated Switch Moving Gears Green Beaker Progress Bars PayPal Animation CSS3 Loader Animated Wifi Symbol CSS3 Buttons Animated Checkbox Camera Icon Rabbit

Modernizr Modernizr est une bibliothèque JavaScript conçue pour détecter des fonctionnalités spécifiques de HTML et CSS dans les navigateurs. Puisqu'il est inutile d'embarquer un fichier complet de détection dans tous les sites web, un script sur mesure peut être construit en piochant parmi les fonctionnalités détectables. Il sera par exemple possible de savoir si le navigateur supporte les transformations CSS 3D, la vidéo HTML5, Canvas ou SVG, et de prévoir une alternative le cas échéant. Son usage est très simple, il suffit de copier-coller les quelques lignes générées dans le code source de la page, ou bien dans un fichier externe, puis d'exploiter l'objet Modernizr et ses propriétés (par exemple Modernizr.canvas, Modernizr.fontface, Modernizr.geolocation etc), initialisées aux valeurs booléennes true ou false.

Les Media Queries CSS3 La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web. Les plateformes exotiques sont concernées en premier lieu : navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc. Approche historique Avec CSS2 et HTML4, il était déjà possible de spécifier un média de destination pour l'application d'une ou plusieurs feuilles de style. <! screen Écrans handheld print Impression

Amélioration progressive : Modernizr et sélecteurs CSS avancés A l'inverse du concept de dégradation gracieuse, le principe d’amélioration progressive ("progressive enhancement" en anglais) est une stratégie de conception web en couches successives, qui permet à chacun d’accéder au contenu et aux fonctionnalités de base d’une page web en utilisant n’importe quel navigateur, tout en offrant une version améliorée aux utilisateurs disposant de navigateurs plus récents ou plus évolués. En pratique et dans le domaine des styles CSS, cela se traduit par une mise en forme initiale commune à l'ensemble des logiciels de navigation, puis un "bonus" pour agrémenter ceux qui ne supportent pas encore CSS3 ou mal CSS2.1. Cela permet d’opter occasionnellement pour une technologie récente telle que CSS3 pour certaines décorations d’éléments de page (coins arrondis, ombrages, semi-transparence, transitions progressives…) qui pourraient consister en des « bonus » mérités pour les navigateurs récents. Modernizr : le bazooka JavaScript :root pour IE9 et supérieurs

Google+ Badge - Google+ Platform Page Badge Tag The Google+ badge allows visitors to engage with your brand directly from the badge itself. The minimum code required to render a Google+ badge on your website is one JavaScript include and a badge tag. You can also use an HTML5-valid badge tag by setting the class attribute to g-page, and prefixing any badge attributes with data-. Example badge sizes Tag attributes for the pages badge These parameters control settings for each badge. Direct Connect Google+ Direct Connect helps visitors find your Google+ page and add it to their circles from directly within Google Search. You can also connect your site by simply linking to your Google+ page anywhere on the page using a standard <a> element and include the rel="publisher" attribute on the link.

A beginner/designers guide to using Modernizr to solve cross-browser challenges 1514Days 1514 days since this post was last revised. Specific details are likely out of date. This piece is intended to help users who are comfortable with HTML and CSS but not so confident using JavaScript. I’ll (hopefully) demonstrate how you can use the incredible open-source Modernizr JavaScript library to solve cross-browser design challenges and conditionally load assets (CSS or JS files) based on a number of tests. If you’re looking for some more advanced documentation on Modernizr, there are a few great tutorials out there. Before we start we’ll need two things: the latest jQuery and the latest Modernizr. Introduction If you build websites, you’ve probably heard of Modernizr. What Modernizr does: By default, Modernizr ‘feature tests’ the browser. Modernizr: “Oh, hi browser. Browser: “I got a head full of cache but other than that I’m good. Modernizr: “OK, fine. Browser: “Features?” Modernizr: “Yes, you know, can you show my text shadows?” Browser: “Please! Modernizr: “Box shadows?”

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 ? 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 ! Il ne faut pas confondre indexation et positionnement. En résumé : vous ne devriez PAS avoir besoin d'un fichier sitemap pour faire indexer vos pages. <?

Related: