Cascading StyleSheets – CSS

Généralités

Qu'est-ce que CSS?

• La thèse d'Håkon Wium Lie, à l'origine de cette technologie. Texte de 2005 (mais travaux entrepris en 1994) : http://people.opera.com/howcome/2006/phd/
• :Le standard officiel : http://www.w3.org/TR/CSS/
• Un historique interactif des transformations dans l'apparence des sites : http://cssmysite.com/
• Un guide, proposé par Shay Howe : http://learn.shayhowe.com/advanced-html-css/
• Nouveautés de CSS4, par Scott Gilbertson en 2011 : http://www.webmonkey.com/2011/10/discover-whats-new-in-css-4/
• Qu'est-ce que la spécificité CSS? Texte de Joshua Johnson en 2013 : http://designshack.net/articles/css/what-the-heck-is-css-specificity/
• Décrire les propriétés CSS par des contraintes : http://gridstylesheets.org/guides/ccss/

L'importance du respect des standards :

• Texte de 2006 : http://blog.teamtreehouse.com/stop-css-hacking

L'approche MCSS, pour gérer la multiplication des feuilles de styles : http://operatino.github.io/MCSS/en/

Les mérites de CSS :

• Texte de Jakob Nielsen en 1997 : http://www.nngroup.com/articles/style-sheets-vs-frames-as-web-extensions/

Comprendre les unités de mesure telles que px en CSS, un texte de 2013 : http://omnicognate.wordpress.com/2013/01/07/in-css-px-is-not-an-angular-measurement-and-it-is-not-non-linear/

Critiques :

• En 2006, John C. Dvorak explique ce qui l'irrite avec CSS : http://www.pcmag.com/article2/0,2817,1987181,00.asp
• La technologie CSS a ses limites, comme l'indique ce texte de Jeff Atwood en 2010 : http://www.codinghorror.com/blog/2010/04/whats-wrong-with-css.html
• Texte de Paul Chiusano en 2014, mettant de l'avant que CSS est (selon lui) un peu redondant : http://pchiusano.github.io/2014-07-02/css-is-unnecessary.html

Opinions diverses :

• Le futur de la typographie par CSS, texte d'Inayaili de Leon en 2010 : http://coding.smashingmagazine.com/2010/03/01/css-and-the-future-of-text/
• Abuse-t-on de CSS? Réflexion de Mike Ward en 2010 : http://blog.echoenduring.com/2010/08/14/are-we-taking-css-too-far/
• Le futur des dispositions par CSS, texte de 2011 : http://www.creativebloq.com/css3/future-css-layouts-8112959
• Gérer des grilles et des colonnes en CSS s'apparente à une parrtie de Tetris, une réflexion de Heydon Pickering en 2013 : http://www.heydonworks.com/article/tetris-the-power-of-css

Trucs et techniques

Un Cheat Sheet : http://technologytosoftware.com/css-javascript-cheat-sheet.html

Vocabulaire :

• Les couleursque supporte CSS : http://www.147colors.com/
• Les formes que supporte CSS : http://css-tricks.com/examples/ShapesOfCSS/
• Les propriétés CSS : http://meiert.com/en/indices/css-properties/

Ascenseurs (Scrollbars) :

• http://lab.hakim.se/scroll-effects/

Boîtes, positionnement et disposition du texte :

• http://www.brainjar.com/css/positioning/default.asp
• Coins arrondis : http://www.spiffycorners.com/
• Bordures et arrière-plans :
  • texte de Mark Newhouse en 2005 : http://www.digital-web.com/articles/css_102/
  • texte de Nicolas Gallagher en 2010 : http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/
• Des cadres en CSS : http://www.456bereastreet.com/lab/cssframes/
• Raffiner les effets sur le texte, un article de 2013 : http://blogs.adobe.com/webplatform/2013/02/19/improving-css-text-decorations/
• Zone de recherche extensible, par Venkatesh Pillai en 2013 : http://letscreatelab.blogspot.in/2013/10/class-container-top-navigation-search.html

Boutons :

• Texte d'Alex Griffioen : http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html

Couleurs et gradients :

• http://webdesignerwall.com/tutorials/cross-browser-css-gradient
• Critique d'Alex Walker en 2011 : http://www.sitepoint.com/a-farewell-to-css3-gradients/

Fil d'Ariane (Breadcrumb) :

• Programmer un fil d'Ariane en CSS3, par Jake Rocheleau en 2011 : http://www.hongkiat.com/blog/breadcrumb-menu-css3/

Grilles :

• Texte de Vladimir Carrer en 2009 : http://www.vcarrer.com/2009/06/1-line-css-grid-framework.html
• Repenser les grilles, par Mark Boulton en 2011 : http://www.markboulton.co.uk/journal/rethinking-css-grids

Icônes et hyperliens :

• Texte de 2009 : http://www.devirtuoso.com/2009/08/making-hyperlink-icons-with-css/

Interactivité :

• Réagir au survol d'un élément (le Hover), par Chris Coyier en 2010 : http://css-tricks.com/hover-on-everything-but/
• Modifier le gradient d'un onglet, par Chris Coyier en 2011 : http://css-tricks.com/moving-highlight/

Listes, puces et numéros :

• http://print.wordpress.com/2006/02/22/css-beautifully-numbered-lists/

Organisation des documents :

• Travailler avec plusieurs feuilles de style :
  • texte de Paul Snowden en 2001 : http://alistapart.com/article/alternate
  • texte de Jason Zimdars en 2011 : http://37signals.com/svn/posts/3003-css-taking-control-of-the-cascade
• Générer les feuilles de style en période de développement :
  • proposition de Garrett Dimon en 2005 : http://www.digital-web.com/articles/architecting_css/
• Gérer les tronçons plus « honteux » de vos pages Web :
  • proposition de Harry Roberts en 2013 pour mettre en place un shame.css où loger ces choses qu'on ne veut pas voir : http://csswizardry.com/2013/04/shame-css/

Programmation :

• Guide de style de Google : http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
• Caractéristiques sympathiques de CSS3, répertoriées par Martin Angelov en 2013 : http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/
• Techniques proposées par Vitaly Friedman en 2008 : http://coding.smashingmagazine.com/2008/02/21/powerful-css-techniques-for-effective-coding/
• Techniques proposées par Cameron Chapman en 2009 : http://coding.smashingmagazine.com/2009/07/20/50-new-css-techniques-for-your-next-web-design/
• Ensemble de nouvelles techniques, répertoriées en 2011 : http://coding.smashingmagazine.com/2011/04/18/powerful-new-css-techniques-and-tools/
• Combiner CSS et JavaScript, texte de 2012 : http://coding.smashingmagazine.com/2012/06/21/powerful-new-cssjavascript-techniques/
• Principes des maîtres de CSS, selon Glen Stansberry en 2008 : http://net.tutsplus.com/tutorials/html-css-techniques/10-principles-of-the-css-masters/
• Combiner CSS et Python : http://sandbox.pocoo.org/clevercss/
• Propriétés et héritage : http://www.w3.org/TR/CSS2/cascade.html
• Les Resets, par Michael Tuck en 2010 : http://sixrevisions.com/css/a-comprehensive-guide-to-css-resets/
• Les Selectors, sorte de superpouvoirs de CSS, selon Simon St-Laurent en 2013 : http://programming.oreilly.com/2013/05/css-selectors-as-superpowers.html
• Utiliser CSS sans HTML, un texte de Mathias Bynens en 2013 : http://mathiasbynens.be/notes/css-without-html
• Attention aux demi-pixels, nous prévient Martin Kool en 2012 : http://martinkool.com/post/27618832225/beware-of-half-pixels-in-css
• Polices de caractères avec CSS, comment les intégrer pour économiser de la bande passante, un texte de Gleb Mazovetskiy en 2013 : http://blog.glebm.com/2013/08/28/inline-css-fonts.html
• Optimisation et « performances » (au sens anglais – et large – du terme) :
  • texte de David Gregory en 2010 : http://screwlewse.com/2010/08/different-css-techniques-and-their-performance/
  • écrire du CSS efficace, texte de David Hyatt en 2011 : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS
• Trucs de débogage :
  • utiliser des cadres de couleur différente selon le niveau de profondeur du design : http://snipplr.com/view/746/handy-css-debug-snippet/

Fureteurs et CSS

Transformations CSS portables dans plusieurs fureteurs : http://www.useragentman.com/blog/2010/03/09/cross-browser-css-transforms-even-in-ie/

Adapter CSS au média de présentation, texte de Bob Leah en 2011 : https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/entry/code_example_of_responsive_web_design_using_css3_media_queries13?lang=en

La technologie CSS et Firefox :

• Texte de 2012 par Catalin Rosu, relatant que Firefox peine avec les bordures diagonales de CSS : http://www.red-team-design.com/css-diagonal-borders-still-not-rendering-properly-on-firefox

La technologie CSS et Internet Explorer :

• Texte de 2006, tiré du Code Project : http://www.codeproject.com/Articles/13048/Internet-Explorer-CSS-issues

Modèles et exemples

Il existe plusieurs sites proposant des modèles et des exemples en CSS pour vous aider à concevoir rapidement une disposition pour vos pages Web et des effets visuels de qualité. La liste qui suit n'est bien sûr pas exhaustive.

• http://past.intensivstation.ch/en/templates/
• http://www.pmob.co.uk/
• http://csstemplatesmarket.com/freecsstemplates/
• Centrer de manière absolue du contenu sur une page ou dans une fenêtre : http://codepen.io/shshaw/full/gEiDt

Espaces de création :

• Le CSS Zen Garden : http://www.csszengarden.com/
• Le CSS / edge, un lieu d'expérimentation avec CSS : http://meyerweb.com/eric/css/edge/

Expérimentation et innovation

Zoomer avec CSS :

• une démonstration de Daniel Burka en 2004 : http://labs.silverorange.com/archive/2004/september/csszooming
• un zoom infini, en 2010 : http://www.nikesh.me/blog/2010/05/zoomingeffect/

Divers exemples de ce que permet CSS :

• Une canette de Coca Cola en 3D faite par CSS, par Román Cortés en 2010 : http://www.romancortes.com/blog/pure-css-coke-can/
• Spider-Man en CSS : http://www.optimum7.com/css3-man/animation.html
• Des cartes, par Sandro Paganotti : http://sandropaganotti.com/wp-content/goodies/demos/cards/index.html
• Des logos : http://www.ecsspert.com/play/css3-logos/adobe.php
• MacOSX en CSS3, par Alession Atzeni : http://www.alessioatzeni.com/mac-osx-lion-css3/
• Plier et déplier du « papier » : https://developer.mozilla.org/en-US/demos/detail/paperfold-css/launch
• Divers effets de mouvement : http://h5bp.github.io/Effeckt.css/dist/
• Un icosaèdre : http://codepen.io/Volvox/pen/fvmtj
• Créer un triangle avec CSS : http://codepen.io/chriscoyier/full/lotjh
• « Remplir » du texte avec de « l'eau » : http://codepen.io/lbebber/pen/xrwja
• Superposer des gouttes de pluie sur une image : http://codepen.io/lbebber/pen/uIiJp
• Donner une impression de givre : http://codepen.io/Matori/pen/JFzok
• Des vagues sur l'eau : http://david.li/waves/
• Saint-Nicolas : http://codepen.io/thirty-two-digital/pen/jpkuL
• Système solaire en 3D : http://codepen.io/juliangarnier/pen/idhuG

Validation de CSS

Le bien connu Acid Test :

• Le site principal : http://www.acidtests.org/
• Quelques Wiki sur le sujet :
  • http://en.wikipedia.org/wiki/Acid1
  • http://en.wikipedia.org/wiki/Acid2
  • http://en.wikipedia.org/wiki/Acid3
• État de la situation, en 2008, relaté par Steven Noonan : http://www.anomalousanomaly.com/2008/03/06/acid-3/
• En 2008, Rob Larsen a fait quelques saisies d'écran pour mettre en relief l'état de la situation d'un fureteur à l'autre (en 2013, la plupart des fureteurs les mieux connus passent le même test à $100\%$) : http://htmlcssjavascript.com/web/acid3-test-released-i-took-some-screen-captures-lots-of-fail/
• En 2011, Alex Limi explique que Firefox n'aura jamais $100\%$ au Acid Test 3 : http://limi.net/articles/firefox-acid3 (et en 2011, Firefox prouve qu'il s'est trompé! http://browserfame.com/212/firefox-acid3-test-100)

Le CSS Selector, pour connaître le niveau de support offert par votre fureteur : http://www.css3.info/selectors-test/

Le CSS Lint :

• site officiel : http://csslint.net/
• en 2012, Matt Wilcox critique cet outil : http://2002-2012.mattwilcox.net/archive/entry/id/1054/