Webdesigner et intégrateur Web freelance - Jacques MARTINET Un reset “responsive” pour les images. Il est devenu assez fréquent d’employer max-width: 100% pour forcer le rapetissement des images lorsque la taille de fenêtre se réduit. Cependant, cela ne suffit pas toujours et j’ai récemment découvert une combinaison de trois propriétés très efficaces. Le combo ultime ? max-width: 100% -> pour limiter la taille à la largeur du parent,height: auto -> pour conserver le ratio, même si un attribut height est précisé dans le code HTML,width: auto -> pour corriger un bug sur IE8 (eh oui, ils sont partout !) La propriété CSS3 box-sizing, qui a le bon goût d’être compatible dès Internet Explorer 8, permet de modifier le calcul de largeur de boîte et d’y inclure les padding et margin. Cette combinaison est très pratique pour tous les éléments nécessitant width ou max-width: 100% et susceptibles de bénéficier de se voir affubler de padding ou border : les tableaux, les google maps, les slideshows et autres champs de formulaires. PS : sinon, si l’on n’y est pas forcé, width: 100% c’est le mal :P
Alsacréations : Actualités et tutoriels HTML, HTML5, CSS, CSS3, standards du web Des CSS efficaces avec KNACSS tutorial How to understand and use the lightweight CSS framework www.knacss.com … Table of Content : Vidéo : KNACSS basics Open video in fullscreen for better quality KNACSS basics par Alsacreations Video : KNACSS, positioning KNACSS layout par Alsacreations KNACSS the benefits ? KNACSS is a minimalist, responsive and extensible CSS framework to start integrating HTML / CSS, designed by the webagency Alsacreations.fr and used daily in our productions. CSS "reset" common for good start, Brick positioning intuitive, and grids and gutters, Extensible and reusable namings for your projects, Compatible with all browsers (including IE6 and IE7) Intended to be automatically Responsive, Consists of a lightweight CSS file to avoid unnecessary queries and loads. Install There is nothing to install. KNACSS is a collection of ready to use styles and snippets to kick start your project. Take the time to read the documentation before jumping in. As an example, KNACSS uses border-box as a box model. Typography