background preloader

Les Media Queries CSS3

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

http://www.alsacreations.com/article/lire/930-css3-media-queries.html

Related:  MEDIA QUERIES

Responsive web design : Les autres usages Un site web « adaptatif » Vous l’aurez remarqué, depuis quelques temps, le web ne se consomme plus seulement derrière son écran d’ordinateur mais sur des tas de nouveaux appareils ayant chacun leurs spécificités (Taille de l’écran, résolution, connectivité internet, écran tactile, …). Au début de cette transition, beaucoup se sont lancés dans la création de site internet dédié au mobile afin de permettre aux utilisateurs nomades, d’avoir accès à l’information dans une version souvent très simpliste. Lettrine en CSS3 - CSS3 Il était un temps où les ressources typographiques du HTML étaient limitées. Très limitées. Les pages HTML d'antan ne pouvaient embarquer des polices comme de vulgaires fichiers média. De ce fait, les webmestres devaient se contenter de ce qu’il y avait à bord de la machine de l’internaute —ces fameuses « web safe fonts »—, celles intégrées aux différents OS (à moins d'acrobaties telles que SiFR ou Flir). Mais ces temps sont révolus grâce à CSS et la règle @font-face.

Gridpak - Générateur de grille CSS "responsive" - Épinards & Caramel Gridpak - Générateur de grille CSS "responsive" Par Manu · Etiquette(s) : CSS Technos Web · J'ai peut-être enfin trouvé mon bonheur dans le monde des grilles CSS et du design "responsive" ! Une grille permet de placer facilement les différents éléments de votre mise en page, d'une façon plaisante et qui s'adapte à la largeur de l'écran de vos lecteurs. Une mise en page "responsive" signifie quant à elle que l'on définit différentes grilles selon la largeur du navigateur web.

freetuxtv FreetuxTV est un logiciel qui permet de regarder et enregistrer facilement les chaînes de télévision sous GNU/Linux. Plusieurs groupes de chaînes sont disponibles : FAI Français : Free, SFR, Orange, Alice, Bouygues… Web TV : Arabe, Chinois, Anglais, Français, Allemand, Italien, Japonais, Portugais, Russe, Espagnol Web Radio : Anglais, Français, Allemand

Importer le flux RSS d’un blog dans Facebook Mis à jour le 5 janvier 2016 Si vous disposez d’un blog, vous pouvez trouver utile de le partager avec vos amis Facebook. Justement, l’application Facebook RSS Graffiti vous permet d’importer vos billets dans votre compte en utilisant les flux RSS. Installez tout d’abord RSS Graffiti en vous rendant sur la page de l’application et en cliquant sur le bouton Click HERE to authorize RSS Graffiti. Sur la page suivante, cliquez sur le bouton Autoriser en bas de la page pour valider l’installation. Comment utiliser Chrome pour gérer les media Queries Les sites « Responsive » deviennent incontournables en 2012. Par « Responsive » entendez tout site qui peut facilement s’adapter au contenu en se reposant sur la taille de la fenêtre du navigateur. Dans ce tutoriel, je me contenterai de vous donner quelques articles qui font référence et un moyen de peu à peu explorer la toile avec Chrome tout en intégrant le processus. Quelques liens incontournables

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). Il est donc déconseillé de l'employer pour des images dont le contenu est pertinent (menu par exemple).

Les grilles CSS ou CSS grid et le Responsive Web Design Un professeur m’a dit un jour que chaque mouvement artistique – en musique, en littérature ou dans les beaux arts – pouvait être considéré comme la réponse au mouvement précédent. Les producteurs des années soixante ont produit Bonnie et Clyde et Le Lauréat pour contrer les vieux films hollywoodiens comme La Mélodie du bonheur. Dans Le Paradis perdu, John Milton, pas très subtil, brocarde ses prédécesseurs littéraires en les plaçant dans le décor de l’enfer. La réaction moderniste prit bien des formes, sur pratiquement tous les supports artistiques. En peinture, elle consistait à réduire le superflu pour expérimenter avec les courbes, les formes et la couleur. Les graphistes de l’époque, comme Jan Tschichold, Emil Ruder et Josef Müller-Brockmann, popularisèrent le concept de grille typographique : un système rationnel de colonnes et de lignes, sur lesquelles des modules de contenu peuvent être placés.

Flipcards sur les Bonnes Pratiques du Web Mobile (MWBP) Les images, couleurs et styles mettent le contenu en valeur, mais doivent être utilisés avec précaution car certains terminaux disposent d'écrans à faible contraste ou ne prennent pas en charge tous les formats. Vérifier graphiques & couleurs IMAGES RESIZING:Redimensionner les images à taille intrinsèque sur le serveur. LARGE GRAPHICS:Ne pas utiliser d'images que le terminal ne pourra pas afficher.

nouscontacter Nous contacter Contactez l’Association Docteur Souris pour demander ou soutenir l’installation d’un dispositif Docteur Souris, pour toutes questions concernant notre action et propositions de partenariats. Nos coordonnées Adresses email : Reponsive design : les Media Queries Avant, créer un webdesign, c’était simplement créer l’interface pour les écrans d’ordinateurs. Il y avait plusieurs contraintes, notamment la gestion des différents navigateurs, mais on devait aussi faire avec les différentes résolutions existantes. Aujourd’hui, c’est toujours le cas, mais le problème des résolutions est devenu encore plus important avec l’avènement de la navigation mobile. C’est pourquoi on parle maintenant de responsive design, un terme qui regroupe diverses choses et qui signifie en gros qu’un design peut s’adapter aux différentes tailles d’écran. Et si avant on pouvait facilement s’en sortir avec de simples pourcentages, la petite taille des écrans des terminaux mobiles a cassé cette facilité. Aujourd’hui encore, énormément de sites ne sont pas adaptés à la navigation mobile : il faut non seulement monter et descendre le long de la page (ça c’est normal), mais il faut également aller de gauche à droite si on veut avoir accès à tout.

Related:  CSSCréa Sitestructure de la pageVeille techno