Collections de polices «standard» pour le Web Cette page permet de tester la présence de différentes polices de caractères listées. Si une police est absente, le navigateur utilisera à la place une police de style opposé: sans-serif pour les serif et inversement; serif pour les monospace. Collections de polices testées Test des polices Notez que la citation dans le texte d’exemple utlise deux espaces fines insécables (entité HTML  ), après les guillemets ouvrant et avant les guillemets fermant. Référence du texte de démonstration: Philippe Jaccottet, Ce peu de bruits, Gallimard, 2008, p. 50.
Build a Street Fighter Demo with CSS Animations and JavaScript I recently learned a cool technique from Simurai about how to animate PNG sprites with the CSS3 animations' steps() property. The main idea in this technique is to "recreate" some kind of animated GIF but with the tiles of a PNG sprite. As with everyone I know, I played to Street Fighter in my childhood and when I saw this ... guess what popped in my head? If the pen doesn't render above, click here to see it in action. Let's Create the First CSS Move We'll start with the punch (see in the sprite bellow it's the third one). Then we need to set up a DIV for Ken which will receive our punch move (and all our other future moves): Let's assume vendor prefixes are implicitly working. What we just did is apply an animation (punch) to a class name (.punch) which basically animates background-position from 0px to -280px (on x axis). Finally we need a way to add/remove the .punch class name on DIV.ken when another key is pressed. Take it to the Next Level with SASS What's Next? About Julien Knebel
Methodology Usually the website development process is based on the assumption that design and technical requirements will not change. A designer, a front-end developer and a programmer work each in their field, often without interfering each other: A designer creates a site design in the form of design layout Front-end developer create static HTML/CSS pages based on the design layout Programmer creates templates from these static pages and then writes some JavaScript Such an approach works well only in the case if the website design remains the same all the time of his life and the changes only add more content. But usually that is not happening. If the website source code is not following the defined structure, if its development is not based on fixes rules, it gradually becomes more and more difficult to maintain. The conditions of the methodology emergence BEM-methodology was developed at Yandex while workig on a large number of web services, and is aimed to achieve following:
Book - Scalable and Modular Architecture for CSS I have long lost count of how many web sites I’ve built. You would think after having built a few hundred of them I would have discovered the “one true way” of doing it. I don’t think there is one true way. What I have discovered are techniques that can keep CSS more organized and more structured, leading to code that is easier to build and easier to maintain. I have been analyzing my process (and the process of those around me) and figuring out how best to structure code for projects on a larger scale. SMACSS (pronounced “smacks”) is more style guide than rigid framework. Inspiration In trying to learn more about what does and doesn't work in maintaining larger projects, I looked at how others were trying to solve similar problems. What’s in here? My thoughts have been compartmentalized around a number of topics related to CSS architecture. Now get started and dive in!
Object Oriented CSS · stubbornella/oocss Wiki