Un Petit Conseil: N'oublie pas la Balise Viewport Meta - Envato Tuts+ Web Design Article. Je me souviens de mon voyage inaugural en web design responsive: j'ai utilisé une grille classique, j'étais aux prises avec la mise en page flexible, et j'ai abordé les Media Queries pour la première fois.
Le changement de la taille de la fenêtre du navigateur donnait un resultat satisfaisant de mon design qui répondait à son cadre. Ensuite, j'ai testé sur un portable. Ça n'a pas marché - je voyais la version miniature du design pour le plein écran. La solution, il s'est trouvé, était simple... Note: Ce tutoriel était publié la première fois en fevrier 2012, mais il est souvent cité comme référence dans autres tutoriaux ( et les choses ont changé ), donc j'ai estimé que la mise à jour était justifié. Même si tu ne continues pas à lire, emporte un petit conseil de cet article: si tu crées le design flexible, utilise la balise Viewport Meta dans le <head>. La meta viewport et @viewport pour les mobiles. Width.
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. Les sélecteurs, pseudo-classes et pseudo-éléments du langage CSS (3) Les sélecteurs en CSS3. Chrome, Safari, Opera, Firefox 4, Internet Explorer 9.
Media Queries for Standard Devices. Keyframe Animation Syntax. Basic Declaration & Usage For the sake of brevity the rest of the code on this page will not use any prefixes, but real world usage should use all the vendor prefixes from above Multiple steps If an animation has the same starting and ending properties, one way to do that is to comma-separate the 0% and 100% values: Or, you could always tell the animation to run twice (or any even number of times) and tell the direction to alternate.
Calling keyframe animation with separate properties Animation Shorthand Just space-separate all the individual values. Animation: test 1s 2s 3 alternate backwards Combine transform and animation Multiple animations You can comma-separate the values to declare multiple animations on a selector. Steps() The steps() function controls exactly how many keyframes will render in the animation timeframe. If you use steps(10) in your animation, it will make sure only 10 keyframes happen in the allotted time. The math works out nicely there. Browser Support More Resources. Liste de Media Queries. 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.
Guide de survie du positionnement CSS. Cet article s'adresse à ceux qui ont déjà quelques notions de positionnement CSS, mais qui se demandent s'ils l'utilisent correctement, ou qui galèrent pour mettre en pratique leurs connaissances encore trop bancales.
Comment s'y retrouver dans le machin tentaculaire qu'est le positionnement CSS? C'est un sujet à la fois complet (tant mieux) et complexe (ouille). Pour bien l'appréhender, il faut prendre en compte: les possibilités de CSS 2.1 pour l'affichage et le positionnement des éléments (et à l'avenir de CSS 3); celles qui sont implémentées dans les navigateurs (et donc pas les autres, sauf pour préparer l'avenir); les contraintes de mise en page et d'adaptation aux contenus (le contenu, ça va ça vient… et ça vous surprend toujours d'une manière ou d'une autre); les contraintes du média screen (on ne fait pas tout et n'importe quoi avec les hauteurs et largeurs, le centrage, etc.); les bugs éventuels des navigateurs (ou de certains navigateurs).
Centrer un bloc div, guide complet. Nous avons tous rencontré le problème du centrage de div en CSS.
Steve Pear fait le tour de la question et propose des solutions pour tous les cas de figure. Par Steve Pear Tout développeur a eu un jour des problèmes pour centrer un bloc div… Centrer le contenu d'une div est assez simple, il suffit de donner à la propriété text-align la valeur center, mais lorsqu'on parle de centrer la div elle-même les choses deviennent plus délicates, et quand il s'agit de centrer une div verticalement vous entrez dans un monde de douleur CSS. L'objectif de cet article est de montrer comment, avec quelques astuces CSS, on peut centrer n'importe quelle div, horizontalement, verticalement ou les deux à la fois, à l'intérieur d'une page ou d'une div. Auditer votre CSS. Auditer votre CSS vous aide à organiser votre code, à le rendre plus lisible, à éliminer les répétitions, mais aussi à améliorer les performances de votre site.
Par Susan Robertson. Par Susan Robertson. CSS Media Queries for All Devices and Browsers.