Coding Q&A With Chris Coyier: Responsive Sprites And Media Query Efficiency. Advertisement Howdy, folks!
Welcome to more Smashing Magazine CSS Q&A. It works like this: you send in questions you have about CSS, and at least once a month we’ll pick out the best questions and answer them so that everyone can benefit from the exchange. Your question could be about a very specific problem you’re having, or it could even be a question about a philosophical approach. We’ll take all kinds. If you’re interested in exploring more Q&A, there’s a bunch more in my author archive. Resolution Aware Sprites Joshua Bullock asks: Your last round of questions was titled “Box-Sizing And CSS Sprites” which offered some great answers for two separate items, but didn’t take them that one step further for responsive design. Retina displays made a really quick and big jump in resolution. If you are drawing a solid red box on the screen, no problem at all! One solution is to make all your original images bigger. Amélioration progressive : Modernizr et sélecteurs CSS avancés - Alsacréations.
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. Une feuille de styles de base pour le Web mobile - Alsacréations. Parce que faire un site web pour terminal mobile, ce n’est pas fixer sa largeur à 320 pixels ou proposer une version iPhone uniquement, je vous propose un tour d’horizon de quelques solutions offertes par CSS pour adapter une présentation existante aux mobinautes : gérer la largeur, redimensionner les éléments, passer à une seule colonne, gérer les débordements, supprimer le superflu, adapter les liens et les tailles de polices selon l'orientation.
Pour vous faciliter la tâche, voici ci-dessous une feuille de style dédiée au média mobile qui condense diverses bonnes pratiques et astuces. Ces règles peuvent être externalisées dans un fichier CSS séparé, ou incluses directement au sein du document de styles global, déclarées à l’aide d'une règle media query de type @media (max-width: 640px) {...}. L’objectif de cette feuille de styles est avant tout de poser un socle de bases communes que vous pourrez adapter à vos convenances ou besoins personnels. Préambule : fixer le Viewport. How to use Media Queries in JavaScript. Responsive design is one of the most exciting web layout concepts since CSS replaced tables.
The underlying technology uses media queries to determine the viewing device type, width, height, orientation, resolution, aspect ratio, and color depth to serve different stylesheets. In the following example, cssbasic.css is served to all devices. But, if it’s a screen with a horizontal width of 500 pixels or greater, csswide.css is also sent: The possibilities are endless and the technique has recently been exploited by sites such as The Boston Globe, Spark Box and Food Sense.
Change the width of your browser to discover how the layout changes. It’s easy to adapt the design or resize elements in CSS. It’s possible to analyze the viewport size in JavaScript but it’s a little messy: Detecting screen dimension changes is also possible with window.onresize. Even if you successfully detect viewport dimension changes, you must calculate factors such as orientation and aspect ratios yourself.