background preloader

Css

Facebook Twitter

How to Build a Semi-Circle Donut Chart With CSS. Controlling CSS Animations and Transitions with JavaScript. The following is a guest post by Zach Saucier.

Controlling CSS Animations and Transitions with JavaScript

Zach wrote to me telling me that, as a frequenter on coding forums like Stack Overflow, he sees the questions come up all the time about controlling CSS animations with JavaScript, and proved it with a bunch of links. I've had this on my list to write about for way too long, so I was happy to let Zach dig into it and write up this comprehensive tutorial. Web designers sometimes believe that animating in CSS is more difficult than animating in JavaScript. While CSS animation does have some limitations, most of the time it's more capable than we give it credit for! Not to mention, typically more performant. Coupled with a touch of JavaScript, CSS animations and transitions are able to accomplish hardware-accelerated animations and interactions more efficiently than most JavaScript libraries. Let's jump straight in! Quick Note: Animations and Transitions are Different In this article we will cover each of them separately.

Comment éviter la propagation des événements. Comment contrôler la propagation des évenements avec la fonction stopPropagation() et return false Objectif Lorsque vous déclarez un évènement celui ci est propagé à l’ensemble des éléments correspondants aux critères de sélection ; ainsi si on déclare un évènements click sur $("#id") seule la balise ayant l’identifiant "id" sera concernée.

Comment éviter la propagation des événements

Tandis que si on déclare $("li"), toutes les balises de type <li> seront affectées par l’évènement. Si les balises sont imbriquées comme ceci ul > li > ul > li (cas typique d’un menu arborescent), le script va s’exécuter sur tous les éléments de type <li> imbriqués, c’est ce qu’on nomme la propagation d’évènement. Dans certains cas cette propagation peut se révéler gênante. Comprendre de quoi on parle Voici un exemple pour mieux appréhender ce comportement de propagation.

Psd-css3

Plongée au coeur de l'OOCSS. OOCSS - qu'est-ce-que c'est, pourquoi c'est bien et comment ça marche.

Plongée au coeur de l'OOCSS

"C'est comme j'te dis tu fais du CSS et tu te base sur le contexte ! Non mais all'OOCSS ! J'sais pas vous m'recevez ? " - Margina Remattia, OOCSS Evangelist Considérons un projet web qui débute : une start-up lambda qui se rêve de développer LA web-application incontournable du web de demain. Seulement voilà, si l'ensemble de l'application bénéficiera sûrement des avantages de quelques frameworks, jeter un coup d'oeil du côté de la feuille de style donnera probablement quelque chose dans ce goût là (avec ou sans pré-processeur) : Or ce code va poser un certain nombre de problèmes avec le temps :- **Manque de flexibilité**, il ne peut s'appliquer qu'aux éléments contenus dans le formulaire portant l'identifiant `#generateur-formulaire`. L'**Object Oriented CSS (OOCSS)** vient apporter sa solution à tous ces problèmes.

L'OOCSS repose sur 2 grands principes : 1. 2. C'est encore plus vrai pour les modules. OOCSS expliqué avec Monsieur Patate. L’Object-Oriented CSS ou OOCSS (CSSOO en français pour « CSS Orienté Objet »), est un concept présenté par la canadienne Nicole Sullivan, consultante front-end spécialisée dans les standards du web, l’architecture et la performance des sites à fort trafic.

OOCSS expliqué avec Monsieur Patate

Introduit il y a pourtant plusieurs années, l’engouement suscité par le projet s’est révélé assez peu représentatif de ses ambitions (notamment au sein de la communauté francophone). Une approche via framework, indigeste pour les intégrateurs débutants, un concept « orienté objet » emprunté à la programmation, déroutant pour les développeurs. Mais également une méthodologie jugée inutile pour les petits projets et complexe à implémenter dans le process de production web.

Voilà à mon avis ce qui a permis aux sceptiques de dénigrer l’OOCSS. Nous verrons plus tard si ces arguments sont fondés ou non. Google HTML/CSS Style Guide. Strictly keep structure (markup), presentation (styling), and behavior (scripting) apart, and try to keep the interaction between the three to an absolute minimum.

Google HTML/CSS Style Guide

That is, make sure documents and templates contain only HTML and HTML that is solely serving structural purposes. Move everything presentational into style sheets, and everything behavioral into scripts. Charte CSS. Convention de nommage CSS. Les bonnes pratiques CSS pour optimiser votre code. Les bonnes pratiques CSS pour optimiser votre code 3 janvier , 2010 Posté par Nicolo dans la catégorie: Css Quand on ouvre un fichier CSS que l’on a fait depuis quelques temps et pas mal modifié depuis, on se rend vite compte que dedans c’est le bordel !!

Les bonnes pratiques CSS pour optimiser votre code

Cet article va donc vous permettre de mettre un peu tout ça au clair, d’ordonner un peu le contenu de votre fichier, et d’optimiser un peu son contenu. Voici donc X conseils pour réduire la taille de votre fichier CSS, et ordonner son contenu : 1) Rester organisé : Il est nécessaire de ne pas créer ses éléments CSS au fils de l’eau et de placer ses éléments CSS sur les id et les classes comme ils viennent. Cela vous permettra de garder à l’oeil dans votre CSS l’héritage des éléments en cascade d’un coup d’oeil sans avoir à se demander à chaque de quoi l’élément qu’on est train de modifier hérite.

Conseils et bonnes pratiques.

CSS3