background preloader

Web Dev

Facebook Twitter

Logos In Pure CSS. jQuery Image Slider. Font Awesome. Viewport dans le Web mobile. Le Viewport désigne schématiquement la surface de la fenêtre du navigateur.

Viewport dans le Web mobile

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. * { box-sizing: border-box } FTW. One of my least favorite parts about layout with CSS is the relationship of width and padding.

* { box-sizing: border-box } FTW

You’re busy defining widths to match your grid or general column proportions, then down the line you start to add in text, which necessitates defining padding for those boxes. And ‘lo and behold, you now are subtracting pixels from your original width so the box doesn’t expand. Ugh. If I say the width is 200px, gosh darn it, it’s gonna be a 200px wide box even if I have 20px of padding.

So as you know, this is NOT how the box model has worked for the past ten years. Anyway, I have a recommendation for your CSS going forward: This gives you the box model you want. Cibler Internet Explorer dans une CSS ? Oui, et sans hack. La méthode commence à être rodée : pour intégrer un design en CSS, on commence par le faire sur un navigateur « moderne », puis on corrige les différents problèmes rencontrés sur Internet Explorer, surtout dans sa version 6, qui commence à sérieusement à s’incruster.

Cibler Internet Explorer dans une CSS ? Oui, et sans hack.

Pour cela, il existe plusieurs solutions. Eviter les embrouilles Avec la pratique, un certain nombre de réflexes se mettent en place, et on anticipe immédiatement les problèmes. Un float:left, avec une marge sur sa gauche ? Un display:inline placé dans la même déclaration permet d’éviter le bug de la double marge. Malheureusement ça ne suffit pas toujours, et il n’y a parfois d’autre solution que de déclarer une propriété spécialement pour IE. Le bon vieux hack Allons-y joyeusement, il faut résoudre un bug sur IE6, et les hacks semblent pratiques et simples à utiliser. IE6 ne comprend pas le sélecteur « > ». C’est pratique. En suivant la même méthode, il faut donc trouver un nouveau bug de sélecteur dans IE7, et revoir la CSS. Can I use...

10 petits conseils en Responsive Design. Initializr. Color Scheme Designer 3. CSS Reset. Blind Text Generator. W3Schools. Font Squirrel. 30 Sélecteurs CSS - CgTuts+ Vous connaissez les sélecteurs de base - id, class et descendant - et vous vous dites que c'est déjà bien suffisant ?

30 Sélecteurs CSS - CgTuts+

Si c'est le cas, sachez que vous vous interdisez d'accéder à un niveau de flexibilité insoupçonné. Même si beaucoup des sélecteurs mentionnés dans cet article appartiennent aux spécificités CSS3 et ne sont donc disponibles que dans les navigateurs modernes, ne passez pas à côté et essayez de les mémoriser. Commençons par les plus évidents, pour les débutants, avant de passer aux sélecteurs plus avancés. L'astérisque cible tous les éléments de la page. Beaucoup de développeurs utilisent cette astuce pour remettre à zéro les margess et les espacements. Le symbole * peut aussi être utilisé avec des sélecteurs d'enfants.

Ceci cible tous les éléments enfants de la div #container. IE6+ Firefox Chrome Safari Opera L'utilisation du symbole dièse comme sélecteur nous permet de cibler un élément par son id. Ceci est un sélecteur de classe. IE7+ Firefox Chrome Safari Opera.