css
Notes (78)
Petit bug CSS bien vicieux dans les tableaux
Quelques petites déconvenues dans l'application de la couleur de fond des cellules d'un tableau et l'affichage des bordures quand elles sont fusionnées.
Lecture du DOM et performances
Grosses pertes de perfs ces jours-ci au boulot dans l'affichage d'un tableau d'environ 1200 cellules. Après comparaisons des récents commit, un suspect : la fonction calc en CSS. Ou plutôt la lecture de certaines propriétés d'élément DOM...
Héritage du border-radius
Petit topo sur des difficultés rencontrées dans l'affichage d'un élément quand son parent possède une courbure de bordure. L'héritage simple n'est pas toujours suffisant.
Docbook avec Vex (Eclipse)
J'édite du docbook au boulot avec Vex, un plugin Eclipse dédié. Les styles appliqués dans l'éditeur sont cependant plutôt limités et pas très agréables...
Utiliser details pour faire un arbre hiérarchique pliable
J'utilise depuis plusieurs années des listes à puces imbriquées et du code javascript pour créer des treeview à noeuds pliables / déplisables. Avec le support de details arrivant enfin dans Firefox 49, j'ai voulu si on ne pouvait pas utiliser ces éléments pour créer ce type de widget.
Couleur de fond du dropdown d'un élément select
Quelques petites remarques sur la couleur de fond du dropdown des éléments select et sur la manière de corriger le comportement par défaut sous Linux (Gnome 3.16).
Les padding fantômes des boutons sous Firefox
Après Internet Explorer, au tour de Firefox : certaines maquettes d'application d'un de nos clients sont construites au pixel près ; et quand il s'agit de boutons, les différences entre firefox et les autres navigateurs devient problématique...
Couleur de l'élément legend dans IE
Encore une bizarrerie d'Internet Explorer, le genre de truc dont je croyais être débarrassé depuis la mort d'IE 6 : les éléments HTML legend n'héritent de la couleur de fonte de leur ascendant (fieldset) que sous certaines conditions.
ClientWidth des champs texte dans Firefox 27
Un petit bug de rendu qui nous a interpelé hier au boulot et qui concerne le calcul de la propriété clientWidth d'un champ texte dans Firefox 27.
Comment savoir si une hauteur est définie par une règle CSS
Petit problème rencontré récemment alors que j'avais besoin de savoir si la hauteur d'un élément était imposée par une règle CSS ou s'il s'agissait de sa hauteur « naturelle ».
Je supporte de moins en moins IE 7/8
Ce qui m'est devenu insuportable c'est de devoir saloper un code javascript propre et efficace pour qu'il puisse fonctionner sur ces navigateurs.
Markup HTML pour des questions / réponses
Juste une petite note pour rebondir sur un billet de Karl Dubost concernant la syntaxe HTML pour écrire une série de questions / réponses.
Read Measure
Karl Dubost a remarqué une chose intéressante : alors que la lecture papier offre un repère visuel, physique, du nombre de pages qu'il reste à lire dans un livre ou un chapître d'un livre, cette information est perdue avec un livre numérique. Comment pourrait-on retrouver ce repère quantitatif en HTML / CSS / javascript ?
Fontello et FontForge
J'utilise des icônes sur ce site depuis sa création fin 2003. Après les images et les sprites, une police de caractères modifiée à la mano, voici venir le service en ligne fontello.
Debug d'éléments vide
Un petit truc CSS pour visualiser rapidement dans une pages web des éléments vides (et qui ne devraient pas l'être).
Polices à chasse fixe dans les navigateurs web
Petit rappel sur la taille des polices de caractères à chasse fixe dans les navigateurs web ; une particularité assez génante qui m'a pertubé ces derniers jours avant de me rappeler où j'avais pu lire la manière de la contourner...
Firefox : bouton-menu sous forme d'icône
Une petite astuce pas vraiment nouvelle mais à garder sous le coude pour transformer le bouton menu de Firefox en simple icône.
Boutons on/off III
Troisième itération dans la création d'un bouton on/off en CSS/HTML, cette fois-ci avec la reprise du style des boutons d'activité des extensions gnome-shell.
Styliser les groupes de boutons radio
Petite expériemntation CSS sur la manière de styliser un groupe de boutons radio.
Boutons CSS on/off II
J'ai essayé il y a 3 mois de reproduire en HTML/CSS un bouton de type « on/off » de l'environnement de bureau Cinnamon. J'ai utilisé un élément button alors qu'il aurait été plus logique de prendre une case à cocher. Nouvelle expérimentation...
Variables CSS
Un petit point sur les variables CSS, qui sont « officiellement » devenues un brouillon de travail au W3C en avril dernier.
Accordéon en CSS
Petite expérimentation toute simple sur la manière d'obtenir un effet accordéon en css uniquement.
Transition CSS
Petite expérimentation sur la gestion des transitions CSS d'un élément, avec identification de la fin de toutes les transitions.
Animations CSS
Petite expérimentation sur la manière de contrôler une animation CSS à l'aide d'un objet javascript simple.
Bouton CSS
En consultant l'annonce de la dernière version de version de Cinnamon, j'ai remarqué le design d'un bouton d'activation que j'ai eu envie de reproduire en HTML / CSS.
Opera : combien de transitions ?
Alors que je cherchais à simplifier l'objet javascript qui me sert à gérer les animations, je me suis retrouver face à un problème dont je n'ai pas encore trouver la solution : comment savoir, sous Opera, quand une transition CSS est terminée ?
Open Web
Daniel Glazman, co-président du groupe de travail CSS au W3C, développeur de logiciels d'édition web, du Composer de la suite web Mozilla à la fin des années 90 jusqu'à BlueGriffon aujourd'hui, a publié un billet plutôt alarmant.
Langages de programmation, de structure et de présentation
Quel est l'avantage/inconvénient d'un langage de structuration comme le HTML ou un langage de présentation comme le CSS, par rapport à des langages de programmation comme le php ou le java ?
Geoscale, le retour de la vengeance II
J'avais repris le développement de mon objet javascript de constuction d'échelle géologique il y a quelques mois. Il me restait encore à définir le code HTML de rendu ainsi que la mise en forme. Une petite heure de brainstorming et code plus tard, j'arrive enfin au bout du chemin...
Effet de vague sur une liste d'items
Le bling-bling sévit partout, y-compris dans le développement web. Exemple : les items de liste du pied-de-page du blog {Sciences²} (dont la lecture est par ailleurs fortement recommandée). Autant j'aime l'effet rendu, autant la manière de l'obtenir me laisse, comment dire, perplexe...
Filtrer une liste
Un petit bout de code html/css/javascript tout simple pour filtrer l'affichage des items d'une liste à partir d'une valeur tapée dans un champ. A étendre pour appliquer à des besoins plus sépcifiques.
Gedit : plugin WikiOutline et fichiers css
Je n'ai pas connaissance d'un éditeur de texte qui puisse parser les fichiers css pour en ressortir un outline. Avec le plugin WikiOutline, je peux enfin parcourir mes feuilles de styles rapidement.
CSS : background position
On a beau défendre les recommandations W3C pour tout ce qui est languages web, il y a des fois où des implémentations propriétaires sont bien utiles. Exmple avec la propriété CSS background-position.
Nettoyage de printemps
A force de développer le site en continu, le code a fini par s'accumuler, parfois de manière un peu chaotique, sans que j'ai vraiment le temps de penser sa pertinence ou sa structure. Il est donc temps de faire un peu le ménage.
Afficher l'en-tête d'un document web
L'élément head d'une page web n'est généralement pas affiché par les navigateurs web. Rien ne nous empêche cependant de modifier ce comportement par défaut.
Les CSS d'abord, le javascript ensuite
Quand on construit des applications ou des sites web, on associe toujours très étroitement CSS et javascript, a tel point qu'on oublie parfois que la présentation graphique peut être utile en dehors même de son utilisation dans un objet javascript...
Couleur des bordures et propriétés raccourci
Dans la série enfonçage de porte ouverte ou « ça paraît évident mais ça va mieux en le disant », une petite subtilité dans la définition des bordures d'éléments en CSS, plus particulièrement leur couleur.
Série d'articles sur les CSS
J'ai rédigé de nombreuses notes au boulot afin d'expliquer certains principes CSS aux collègues développeurs non portés sur la chose. Je vais en publier quelques unes sur ce site, en espérant que cela puisse être utile à d'autres. Comme toujours, cela aurait dû être fait il y a bien longtemps (certains textes ont plus de deux ans)...
Pseudo-éléments des images
Les pseudo-éléments :before et :after permettent de définir des boîtes de contenu avant et après l'élément HTML qui les porte. Alors qu'il est maintenant possible de leur appliquer de nombreuses règles de stylisation, leur utilisation n'est pas totalement standardisée (je ne parle pas des navigateurs qui ne les gèrent pas). C'est le cas des images.
Sélecteurs, identifiants et classes
Il existe plusieurs manières d'appliquer des styles aux éléments d'un document web à travers la notion de « sélecteurs ». On use (et abuse) souvent de deux d'entre eux, les sélecteurs de classes et les sélecteurs d'ID, mais pourrions-nous nous en passer ?
HTML5 pour les développeurs
A quoi voit-on que le HTML 5, malgré tous ces défauts, est tout de même un language qui facilite la vie des développeurs ? Quand on s'apperçoit que des techniques que l'on utilise depuis des années sont dorénavant intégrées aux spécifications. Petit exemple avec la manipulation de l'attribut class.
Omacronides 4.2
Petite mise à jour du site, à la fois côté serveur et côté client, avec une mise à jour de la maquette, quelques corrections de bugs et l'activation de certaines nouvelles fonctionnalités.
Firefox et le thème New Wave sous Ubuntu
La dernière version de Ubuntu, 9.04 ou Jaunty Jackalope, est arrivée avec un nouveau thème sombre plutôt élégant, New Wave. Son utilisation pose cependant un petit problème d'apparence des menus de Firefox. Voici comment le résoudre.
Border-radius ou dessiner des cercles en CSS
L'astuce est déjà ancienne mais il est peut-être utile de rappeler ce qu'on peut faire depuis un moment déjà avec des navigateurs web modernes et quelques règles CSS : arrondir les coins des bordures d'un élément pour créer des cercles.
Négation en CSS
Les feuilles de styles en cascade permettent beaucoup de choses, notamment avec les navigateurs web qui implémentent correctement les spécifications du W3C. Néanmoins, il est parfois difficile - mais pas impossible - d'appliquer une série de règles par la négative (appliquer les styles sauf dans certains cas précis). Les CSS de niveau 3 offriront enfin un outil pour le faire.
Insérer une balise style en javascript
Imaginons : vous devez insérer un élément ou fragment de document lambda dans un document web via le DOM. Cet élément doit obéir à certaines règles CSS et, comme il n'a aucune raison d'être dans le dit document si la gestion du javascript est désactivée, vous insérez ces règles elles-aussi en manipulant le DOM. L'opération serait finalement triviale s'il n'y avait Internet Explorer.
Nouvelles du web en vrac
Pas grand chose sur ce site ces dernières semaines ; j'y reviendrai plus tard. En attendant, voici quelques lectures très instructives.
Nouvelle maquette de Framasoft en ligne
Cela a pris plus de temps que prévu, mais on voit finalement le bout du tunnel : après la page d'accueil, c'est finalement l'ensemble du site Framasoft qui a fait peau neuve cette nuit, non sans difficultés d'ailleurs.
Un site en chantier, comme toujours...
J'en ai déjà parlé : ce site a la fâcheuse tendance à engloutir plus de temps en maintenance qu'en rédaction. Une fois n'est pas coutume, les projets de news ou d'articles se sont effacés devant les bidouilles techniques.
Changements techniques du site
La nouvelle architecture du site a nécessité de nombreuses adaptations techniques, notamment pour la mise en cache des pages.
Squelettes framasoft (1) page d'accueil
Après quelques mois de latence, nous voilà replongés dans la réécriture des squelettes du site Framasoft, et plus particulièrement dans celle de la page d'accueil.
Quelques mises à jour du site
Petit compte-rendu des quelques mises à jour du site et de certaines adaptations.
Squelettes Framasoft (0) introduction
A partir d'aujourd'hui et jusqu'à la fin du mois, j'entame le travail de refonte des squelettes du site Framasoft.
Affichage du site sous Internet Explorer
Je n'avais pas mis les pieds sous Windows depuis plusieurs semaines déjà. Je l'ai fait ce midi pour vérifier comment se comportait la maquette du site avec Internet Explorer. Le résultat n'est pas brillant.
Include en javascript
Du nouveau dans la gestion du javascript, avec la découverte d'une astuce qui répond parfaitement aux besoins de ce site : appeler un fichier javascript à la manière des « include » PHP.
News web en vrac
Quelques liens en vrac sur le développement web, de l'utilisation intempestive des listes de définition à la définition de quelques balises html.
Evolution du code
La dernière phase de mise à jour du site touche à sa fin avec le remaniement de la maquette. De petites modifications dans la forme mais aussi dans la structure des pages.
Pseudo-éléments after, before et caractères unicode
La mise à jour du site suite au changement d'archivage des brèves touche à sa fin. Une des évolutions à consister à remplacer certaines décorations graphiques grâce aux pseudo-éléments before et after.
Comment lutter contre la Div mania
Les standards de publication web du W3C semblent peu à peu s'installer dans les esprits, que ce soit au niveau des professionnels que chez les simples webmasters publiant un site personnel. Cependant, le résultat peut parfois sembler ambigu quand il conduit à remplacer les lignes et les colonnes des tableaux - pensées pour ranger et hiérarchiser des données et non pour construire la maquette d'une page - par une multitude de conteneurs div.
Navigateurs web et support des standards
L'un des arguments souvent avancé pour convaincre les internautes d'adopter un navigateur web comme Firefox/Mozilla ou Opera en lieu et place d'Internet Explorer, c'est leur meilleur gestion des standards web du W3C. Mais qu'en est-il vraiment ?
Références (1) : le sélecteur universel
Outre les ressources déjà référencées pour le style switcher, le menu déroulant, le design élastique et les fichiers javascript (galerie de photographies et mise en forme de la page d'accueil et des pages de section), outre les références générales sur les standards et les langages web (XHTML et CSS), il m'a semblé opportun de préciser ici d'autres documents utilisés lors de l'écriture du code des pages de ce site.
CSS 3 et liens externes
La présentation du site est actuellement gérée par des feuilles de styles en cascade de niveau 3. Cette troisième version des CSS en est encore au stade d'ébauche et à l'heure actuelle, seule les recommendations css 2 ont fait l'objet d'une publication officielle (une version révisée 2.1 devrait être diffusée dans peu de temps).
Simplification du code pour les lettrines
A la suite de mes précédentes simplification du code, d'autres modifications me sont apparues judicieuses. Jusque là, j'utilisais une classe spéciale, debut, pour transformer en lettrine la première lettre du premier paragraphe après chaque titre. Il me suffisait de définir les propriétés de cette classe à travers le pseudo-élément first-letter, qui permet d'appliquer des styles à la première lettre d'un paragraphe :
Tout ne doit pas passer par les feuilles de styles
De nouveaux petits aménagements dans la maquette du site, minimes certes, mais qui m'ont indirectement amené à reconsidérer la gestion de la mise en forme par les feuilles de styles en cascade.
Avec l'arrivée de l'été...
Avec l'arrivée de l'été, le site change de peau et accorde ses couleurs avec la nouvelle saison.
Dernier bogue de maquette (presque) résolu
Un dernier bogue dans la construction de la maquette rendait l'affichage des menus problématique sous certaines conditions. Il est en partie résolu.
Version finale de la nouvelle maquette
Après deux mois de tâtonnements, j'ai finalement obtenu une nouvelle maquette à peu près convenable. Voici les ultimes modifications du site.
Des logos spécifiques à chaque style
J'ai par ailleurs souhaité pousser un peu plus loin la personnalisation des pages en fonction des styles. Outre le changement de couleurs, on peut facilement adapter les puces des listes ou tout autre icône en utilisant la propriété « image de fond » (background-image). Par contre personnaliser le logo était une autre affaire puisqu'il s'agit d'une image intégrée au code HTML.
La gestion des styles
Je parlerai de la gestion des styles en fonction des navigateurs dans une autre actu. Ici, c'est de relations entre les différentes feuilles dont il s'agit. Résumé de la situation: le site utilise des fichiers CSS pour la mise en forme des pages, un fichier pour le squelette (en-tête, contenu central, pied-de-page) et cinq autres fichiers spécifiques aux cinq styles (printemps, été, automne, hiver et nuit, qui modifient presque essentiellement les couleurs).
Fluide, fixe et élastique
Résoudre le problème de longueur de ligne revenait à repenser la manière d'afficher le texte. La mise en forme d'une page web peut grosso modo se construire de deux manières (non, je ne parlerai pas des tableaux :
Des menus déroulants
J'ai transformé le menu vertical gauche en un menu horizontal déroulant pure CSS. Il fait appel à la fonction hover qui permet d'assigner certaines propriétés lorsqu'on passe la souris au-dessus d'une boîte spécifique. Dans le cas présent, elle est appliquée aux listes de définition utilisées dans le menu: seul le titre (balise dt) est affiché, les sous-titres (balises dd) étant masqués par un display: none. Ensuite, le fait de survoler les dits-titres avec la souris déroulera le sous-menu dans son intégralité grâce à un display: block.
Des corrections nécessaires
Commençons donc par le commencement: le petit lifting subie par le site. En dehors de l'envie de changer, une nouvelle maquette s'avérait nécessaire pour plusieurs raisons.
Des styles en fonction du navigateur: le retour de la vengeance
J'ai de nouveau changé la gestion des CSS dans les pages du site, toujours pour contourner les limitations de IE concernant la propriété position: fixed.
Des styles en fonction du navigateur
Voila quelque chose qui m'agaçait depuis quelque temps : les limitations d'Internet Explorer dans sa gestion des CSS rendaient l'affichage des pages du site quelque peu aléatoire. La solution était donc évidente : construire une feuille de style spécifique à IE qui serait utilisée uniquement pour ce navigateur. J'ai donc ajouté un petit script javascript sur chaque page pour identifier le navigateur qui se connecte et charger la feuille de style adéquate.
Keynote, CSS et fictions
Quelques mises à jour éparses...
Ca m'agace !!!
Un petit mot concernant le bouton Retour en haut de la page : ce bouton se trouve en bas à droite des pages, avec un attribut position: fixed. Cette propriété CSS permet de garder un objet en position fixe dans la fenêtre de navigation: le bouton reste toujours à sa place lorsque vous descendez dans la page. De plus, le morceau de code HTML décrivant le bouton se trouvant en toute fin de code, il faut lui définir une propriété z-index pour qu'il soit visible. Cette propriété permet de spécifier le niveau d'empilement des différentes structures; en lui attribuant la valeur z-index: 1, le bouton se placera par dessus tout le reste.
Petites corrections techniques bis
De nouvelles corrections à l'ordre du jour:
Articles (17)
Omacronides 8
Après une mise à jour avortée (la 7, prévue l'été 2011), voici enfin que j'arrive à peu près au bout des modifications et évolutions que je souhaitais apporté au site cette année (2011).
HTML : range
Representer graphiquement des intervalles en HTML.
HTML : meter
Introduction à l'utilisation du nouvel élément HTML 5 meter et à la manière de lui assurer un rendu sur les navigateurs qui ne le supportent pas.
Caractères unicodes et entités de caractère
Petit mémo sur l'utilisation des caractères unicodes et les entités de caractère dans différents langages de programmation / structuration / présentation.
Numérotation des listes ordonnées
Quelques petites techniques css et/ou javascript pour modifier le comportement par défaut des listes à puces ordonnées.
Positionner le centre d'un élément
Comment gérer la création de l'écran d'une application web lorsque ces différents composants doivent être positionner par rapport à leur centre.
HTML : progress
Introduction à l'utilisation de l'élément progress, apparu dans les recommendations HTML 5.
HTML : citations et références
Une série d'articles ces derniers jours m'a amené à aborder la question des citations dans un document web, et à expliquer les techniques que j'utilise depuis plusieurs années.
Organiser un projet CSS
Quelques notes rapides et en vrac sur la façon dont je gère des projets css depuis quelques temps. Comme il n'existe pas vraiment de standards dans le domaine, il s'agit ici d'une simple habitude de travail.
Position absolue et centrages d'un élement HTML
Petite introduction à la manière dont on peut obtenir le centrage, à la fois vertical et horizontal, d'un élément HTML positionné en absolue.
Position absolue et taille des éléments HTML
Travaillant principalement sur un produit permettant de construire des applications web, j'ai souvent dû expliquer à mes collègues issus du monde java le pourquoi du comment du positionnement et de la taille des éléments HTML en CSS. Ceci est un texte rédigé pour expliquer la chose...
Dimensions des tableaux HTML
La présentation des tableaux en HTML peut parfois être irritante, surtout lorsque vous souhaitez leur donner une taille précise. Voici quelques petites astuces qui permettent de récupérer une largeur et une hauteur définie.
Nouvelle page d'accueil du site Framasoft
Et bien voilà : cela à pris plus de temps que prévu, tout n'est pas terminé, loin de là, mais nous lançons aujourd'hui une nouvelle page d'accueil de Framasoft, certains diraient en version « beta ».
Enfants et descendants en CSS
Le langage CSS est plutôt simple et intuitif. Mais, en s'habituant à cette aisance d'utilisation, on en oublie parfois certaines de ses subtilités (en tout cas c'est mon cas). En voici une parmi d'autres : la présentation des « enfants » et des « descendants » d'un élément.
Mettre en forme une balise select
Les feuilles de styles servent à mettre en forme n'importe quel élément d'une page web. Pourtant, une balise HTML pose problème : le champ de sélection select utilisable dans les formulaires. Voici quelques pistes pour contourner certaines limites dans le rendu des navigateurs web.
HTML : footnotes
Internet, en tant que nouveau vecteur de contenu rédactionnel, nécessite de repenser des modèles d'édition créés pour d'autres supports. C'est le cas par exemple des « notes de bas de page » : ont-elles encore un sens dans une publication sur la toile ? Et comment les présenter ?
Projets (6)
CSS pour Brief
Petite feuille de style pour surcharger celle de Brief, extension de Firefox qui permet de lire / s'abonner à des flux rss.
Tâches
Document de travail prélude à la création d'un ensemble de codes, html, css, javascript et wiki permettant de gérer une liste de tâches.
Simple Slides
SimpleSlides est un projet tout simple, un POC pour illuster la manière dont on peut réaliser rapidement une visionneuses d'images avec du HTML, un peu de CSS et de javascript. Sa seule ambition est d'éventuellement servir de base à des projets plus aboutits et complets.
rnb-css
Compilation des différents usages de classes et d'identifiants dans la mise ne forme et la caractérisation d'un document web.
CSS Checklist
Attention: Projet abandonné au profit d'une définition plus générique : taskList.
CSS rating
Attention: Projet abandonné. La notation à base d'étoiles est dorénavant géré avec un élément meter.
Liens (62)
Maquette à base de grille
- Titre
- CSS Grid Layout Examples
- Auteurs
-
- IGALIA
- Titre
- CSS Grid!
- Auteurs
-
- Eric MEYER
- Éditeur
- Meyerweb
- Date
- Titre
- Grid By Example
- Auteurs
-
- Rachel ANDREW
- Titre
- A Complete Guide to Grid
- Auteurs
-
- Chris HOUSE
- Éditeur
- CSS-Tricks
- Date
20 ans de CSS
CSS à 20 ans. Et toujours pas de centrage vertical :-).
La grosse merdasse du dev web aujourd'hui
- Titre
- The Sad State of Web Development
- Auteurs
-
- Drew HAMLETT
- Éditeur
- Medium
- Date
- Titre
- Pourquoi il n'aurait pas du arrêter d'utiliser CSS
- Auteurs
-
- Daniel GLAZMANN
- Éditeur
- Glazblog
- Date
Inflation de la taille des pages web
The web is Doomed.
Today the average webpage is about the same size, data-wise, as the classic computer game Doom, according to software engineer Ronan Cremin.
- Titre
- The Average Webpage Is Now the Size of the Original Doom
- Auteurs
-
- Klint FINLEY
- Éditeur
- Wired
- Date
Le nouveau outlook.com
- Titre
- What you need to know about the new Outlook.com
- Auteurs
-
- Rémi PAREMENTIER
- Éditeur
- Medium
- Date
Ceuses qui doivent faire de l'intégration web pour des courriels (pushmails, newsletters) s'arrachent les quelques cheveux qui restent.
Grille CSS
- Titre
- Le positionnement dans les Grilles CSS
- Auteurs
-
- Manuel REGO
- Éditeur
- Medium
- Date
Unification des outils de dev sous Firefox
You might have already heard about our effort to unify native Firefox Developer tools (DevTools) and Firebug. We’ve been working hard to port all favorite Firebug features into native DevTools,
- Titre
- Firebug & DevTools Integration
- Auteurs
-
- Jan HONZA ODVARKO
- Éditeur
- mozilla.hacks.org
- Date
Ben il serait temps parce que la situation actuelle c'est un peu du n'importe quoi !
Camemberts en CSS
- Titre
- Designing Flexible, Maintainable Pie Charts With CSS and SVG
- Auteurs
-
- Lea VEROU
- Éditeur
- Smashing Magazine
- Date
Daniel Glazman laisse sa place de co-prédident du groupe CSS au W3C
- Titre
- CSS Working Group's future
- Auteurs
-
- Daniel GLAZMAN
- Éditeur
- Glazblog
- Date
Centrage en CSS
- Titre
- Le guide complet pour centrer en css
- Auteurs
-
- NYALAB
- Éditeur
- Putain de code !
- Date
- Titre
- Centering in CSS: A Complete Guide
- Auteurs
-
- Chris COYER
- Éditeur
- CSS-tricks
- Date
rebeccapurple
- Titre
- In Memoriam
- Auteurs
-
- Eric MEYER
- Éditeur
- meyerweb.com
- Date
- Titre
- adding 'rebeccapurple' color to CSS Color Level 4
- Auteurs
-
- Daniel GLAZMAN
- Éditeur
- www-style@w3.org
- Date
- Titre
- rebeccapurple
- Auteurs
-
- Eric MEYER
- Éditeur
- meyerweb.com
- Date
- Titre
- Inadvertent Algorithmic Cruelty
- Auteurs
-
- Eric MEYER
- Éditeur
- meyerweb.com
- Date
Un algorithme de Facebook, pour illustrer automatiquement à quoi a ressemblé l'année 2014 d'Eric Meyer, lui présente le visage de sa fille… décédé dans l'année.
Styliser des sliders HTML
- Titre
- Styling Cross-Browser Compatible Range Inputs with CSS
- Auteurs
-
- Daniel STERN
- Éditeur
- CSS Trick
- Date
Internationalisation à l'aide des CSS
- Titre
- CSS-Driven Internationalization In JavaScript
- Auteurs
-
- Maksim CHEMERISUK
- Éditeur
- Smashing Magazine
- Date
CSS Timing
- Titre
- Understanding CSS Timing Functions
- Auteurs
-
- Stephen GREIG
- Éditeur
- Smashing Magazine
- Date
Régions CSS
- Titre
- CSS Regions Matter
- Auteurs
-
- Sara SOUEIDAN
- Éditeur
- flippin' awesome!
- Date
Personnaliser le thème Adwaita
- Titre
- How To Hack GNOME’s Adwaita GTK Theme
- Auteurs
-
- Alex DIAVATIS
- Éditeur
- World of Gnome
- Date
Utiliser aussi GTK-parasite pour tester le thème.
Tableau zebré
- Titre
- Zebra tables using nth-child and hidden rows?
- Auteurs
-
- Christian HEILMANN
- Éditeur
- christianheilmann.com
- Date
Problème que je rencontre dans les tableaux de présentation des tickets de projets par exemple. La solution finale proposée nécessite une manipulation du DOM avec du javascript, ce que je voudrais évité.
Commentaires en CSS
- Titre
- Single Line Comments (//) in CSS
- Auteurs
-
- Tab ATKINS
- Éditeur
- Tab Completion
- Date
Animations : CSS vs Javascript
- Titre
- Myth Busting: CSS Animations vs. JavaScript
- Auteurs
-
- Jack DOYLE
- Éditeur
- CSS-tricks
- Date
- Titre
- Myth busting mythbusted
- Auteurs
-
- Christian HEILMANN
- Éditeur
- christianheilmann.com
- Date
Myth : Post-processeur CSS
Myth lets you write pure CSS while still giving you the benefits of tools like LESS and Sass. You can still use variables and math functions, just like you do in preprocessors. It's like a polyfill for future versions of the spec.
Voilà une approche beaucoup plus pertinente que celle d'outils comme LESS ou Sass : on écrit du css « normalement », en utilisant éventuellement des syntaxes qui seront disponibles dans les futures specs (comme les variables), et Myth se charge ensuite de générer un fichier css utilisable aujourd'hui.
Variables CSS dans Firefox 29
- Titre
- CSS Variables in Firefox 29
- Auteurs
-
- Cameron MCCORMACK
- Éditeur
- mcc.id.au
- Date
Les 10 ans du sliding doors
- Titre
- Ten years of Sliding Doors of CSS
- Auteurs
-
- Andrew CLARKE
- Éditeur
- Stuff and Nonsense
- Date
C'est entre autre grâce à cet article que j'ai comencé à écrire des css fin 2003. J'y ajouterai le Faux columns de Dan Cederholm en janvier 2004.
Césures en CSS
- Titre
- La gestion de la césure en CSS
- Auteurs
-
- Nicolas HOFFMANNN
- Éditeur
- OpenWeb
- Date
Performances des animations web
- Titre
- High Performance Animations
- Auteurs
-
- Paul LEWIS
- Paul IRISH
- Éditeur
- HTML Rocks
- Date
Perte de sémantique
- Titre
- Semantic CSS With Intelligent Selectors
- Auteurs
-
- Heydon PICKERING
- Éditeur
- Smashing Magazine
- Date
Brick : librairie js par Mozilla
- Titre
- Introducing Brick: Minimal-markup Web Components for Faster App Development
- Auteurs
-
- Leon ZHANG
- Éditeur
- hacks.mozilla.org
- Date
Globe oculaire en CSS
- Titre
- CSS Balls
- Auteurs
-
- Donovan HUTCHINSON
- Éditeur
- hop.ie
- Date
Représentation des messages HTTP
- Titre
- Markup and CSS for representing an HTTP message
- Auteurs
-
- Karl DUBOST
- Éditeur
- La grange
- Date
Dessiner des lignes en css
- Titre
- Drawing lines with CSS
- Auteurs
-
- Blake WINTON
- Éditeur
- Blog-o!
- Date
Fonctionnement interne des navigateurs web
- Titre
- How Browsers Work: Behind the scenes of modern web browsers
- Auteurs
-
- Tali GARSIEL
- Paul IRISH
- Éditeur
- HTML5 Rocks
- Date
Back to Zen garden
- Titre
- 10 Years
- Auteurs
-
- Dave SHEA
- Éditeur
- Mezzoblue
- Date
Pendant une bonne partie des années 2000, de 2003 à 2008 en gros, CSS Zen Garden a été une source d'inspiration pour un très grand nombre de gens dans le domaine du design web, et une référence incontournable. Le plus remarquable était évidemment le principe de base : faire des designs « qui en jette » en utilisant uniquement les spécifications CSS. Le site était en léthargie depuis plusieurs années mais Dave Shea a décidé de le réactiver pour son 10e anniversaire en actualisant le cahier des charges.
Border-corner-shape
Une proprosition encore à l'état d'ébauche mais qui n'est pas sûr de trouver sa place dans les specs CSS 4.
Alignement de texte
- Titre
- Balancing Text for better readability
- Auteurs
-
- Randy EDMUNDS
- Éditeur
- blogs.adobe.com
- Date
Améliorer la lisibilité d'un texte lorsqu'il est centré. Plutôt convaincant.
Animation CSS
- Titre
- A tale of a CSS3 Animation Demo
- Auteurs
-
- Felipe Nascimento DE MOURA
- Éditeur
- hacks.mozilla.org
- Date
Lien du 06 décembre 2012 à 20:00
- Titre
- Flashless Animation
- Auteurs
-
- Rachel NABORS
- Éditeur
- 24ways
- Date
CSS supports
- Titre
- Native CSS feature detection via the @supports rule
- Auteurs
-
- Chris MILLS
- Éditeur
- dev.opera
- Date
Web plateform Docs
Lancement de Web plateform Docs, un site communautaire chargé de réunir et de publier de la documentation autour des technologies web, soutenu par le W3C, Adobe, Facebook, Google, HP, Microsoft, Nokia, Mozilla et Opera (vous trouvez pas qu'il manque quelqu'un là...).
Les couleurs du web
- Titre
- The Code Side Of Color
- Auteurs
-
- Ben GREMILLION
- Éditeur
- Smashing Magazine
- Date
Lien du 17 août 2012 à 20:00
- Titre
- CSS Variables, why we drop the $foo notation
- Auteurs
-
- Daniel GLAZMAN
- Éditeur
- Glazblog
- Date
- Titre
- Let's Talk about CSS Variables
- Auteurs
-
- Tab ATKINS
- Éditeur
- Tab Completion
- Date
Lien du 27 juillet 2012 à 20:00
- Titre
- De CSS à HTTP
- Auteurs
-
- Karl DUBOST
- Éditeur
- Les carnets de La Grange
- Date
Lien du 26 juillet 2012 à 16:00
- Titre
- The Cicada Principle and Why It Matters to Web Designers
- Auteurs
-
- Alex WALKER
- Éditeur
- Design festival
- Date
- Remarque
- Eric Meyer fait la même chose, mais en css uniquement.
Lien du 16 juillet 2012 à 18:00
- Titre
- A Standards-Compliant CSS Parser
- Auteurs
-
- Tab ATKINS
- Éditeur
- Tab Completion
- Date
Lien du 16 juin 2012 à 20:00
- Titre
- CSS variables
- Auteurs
-
- Stoyan STEFANOV
- Éditeur
- phpied.com
- Date
Lien du 24 mai 2012 à 16:00
- Titre
- Understanding the CSS Transforms Matrix
- Auteurs
-
- Tiffany BROWN
- Éditeur
- Dev.Opera
- Date
Lien du 26 avril 2012 à 20:00
- Titre
- A Pure CSS3 Cycling Slideshow
- Auteurs
-
- Alessio ATZENI
- Éditeur
- Smashing magazine
- Date
Lien du 25 avril 2012 à 18:00
- Titre
- Opera confirms WebKit prefix usage
- Auteurs
-
- Craig GRANNELL
- Éditeur
- .net
- Date
- Remarque
- Et voilà : la chienlit commence !
Lien du 11 avril 2012 à 20:00
- Titre
- The EMs have it: Proportional Media Queries FTW!
- Auteurs
-
- Lyza GARDNER
- Éditeur
- Cloud Four
- Date
Lien du 10 avril 2012 à 20:00
- Titre
- On CSS preprocessors
- Auteurs
-
- Lea VEROU
- Éditeur
- lea.verou.me
- Date
Lien du 14 février 2012 à 18:00
- Titre
- A Call For Better Fragment Identifiers
- Auteurs
-
- Louis LAZARIS
- Éditeur
- Impressive Web
- Date
Lien du 07 octobre 2011 à 16:00
- Titre
- CSS3 radial gradients
- Auteurs
-
- Chris MILLS
- Éditeur
- Dev.opera
- Date
Lien du 26 septembre 2011 à 14:00
- Titre
- Scalable and Modular Architecture for CSS
- Auteurs
-
- Jonathan SNOOK
- Éditeur
- smacss.com
- Date
Lien du 21 septembre 2011 à 20:00
- Titre
- How Do Browsers Render the Different CSS Border Style Values?
- Auteurs
-
- Louis LAZARIS
- Éditeur
- Impressive Webs
- Date
Lien du 14 septembre 2011 à 18:00
- Titre
- The Guide To CSS Animation: Principles and Examples
- Auteurs
-
- Tom WATERHOUSE
- Éditeur
- Smashing Magazine
- Date
Lien du 11 septembre 2011 à 18:00
- Titre
- Nine Image Expander
- Auteurs
-
- Chris COYIER
- Éditeur
- css-tricks
- Date
Très jolie démonstration de la conversion d'une animation flash en html/css/javascript.
Lien du 07 septembre 2011 à 16:00
- Titre
- Detecting and generating CSS animations in JavaScript
- Auteurs
-
- Chris HEILMANN
- Éditeur
- hacks.mozilla.org
- Date
Lien du 01 septembre 2011 à 18:00
- Titre
- CSS Conditional Rules Module Level 3
- Auteurs
-
- David BARON
- Éditeur
- W3C
- Date
Syntaxe de règles condditionnelles, qui nous permettrait d'écrire des styles en fonction de ce que supporte le navigateur web, et éviter ainsi de devoir utiliser des outils comme modernizr.
Lien du 15 juillet 2011 à 20:00
- Titre
- Don't use IDs in CSS selectors ?
- Auteurs
-
- Oli STUDHOLME
- Éditeur
- Oli.jp
- Date
Les CSS 3 en action
- CSS Lint, pour valider vos fichiers CSS à la manière de JSLint.
- Apprendre (par l'absurde) à utiliser les sélecteurs CSS.
- Planetarium en HTML 5 / CSS 3 / javascript : une merveille.
HTML 5 et néologismes
- Titre
- On the term “HTML5”
- Auteurs
-
- Jeff CROFT
- Éditeur
- jeffcroft.com
- Date
- Remarque
- Sur l'utilisation du terme « HTML 5 », qui commence à désigner le HTML 5 à proprement parler mais aussi toutes les autres nouvelles spécifications web (CSS 3, DOM 3, Geolocation, etc.). Bruce Lawson propose NEWT (« New Exciting Web Technologies ») ; Jeffrey Zeldman pencherait plutôt pour HART, « HTML5 And Related Technologies », et ça sonne plutôt bien. Pourquoi ne pas simplement parler d'Open Web, ou d'Open Web technologies ?
Lien du 19 octobre 2010 à 18:00
- Nouveau format d'image par Google : webP.
- Slideshow en html5/css3 par Paul Rouget.
- Les débuts du HTML.
- Les préfixes css des constructeurs de navigateurs web.
- PromoteJS, pour améliorer la visibilité de la bonne documentation javascript dans les moteurs de recherche.
Ne pas abuser des sprites
- Titre
- To Sprite Or Not To Sprite
- Auteurs
-
- Vladimir VUKIĆEVIĆ
- Éditeur
- blog.vlad1.com
- Date