CSS Débutant : cours et tutoriels sur les feuilles de style CSS 1,2 et 3 Le DOCTYPE qu'il vous faut Par Jeffrey Zeldman Nouveau ! HTML5 arrive progressivement, et son doctype est bien plus simple à retenir : <!DOCTYPE html>. Vous avez fait tout ce qu'il fallait, mais votre site ne s'affiche et ne fonctionne pas comme il le devrait dans les derniers navigateurs. Vous avez utilisé du XHTML valide et des CSS. Ce bref article vous fournira des DOCTYPEs fonctionnels, et vous expliquera les effets pratiques, réels, de ces balises autrement très abstraites. Pourquoi un DOCTYPE ? Dans les normes du HTML et du XHTML, un DOCTYPE (contraction pour "Document Type Declaration") informe le validateur de la version de (X)HTML que vous utilisez, et doit apparaitre en première position dans chaque page web. Comme mentionné dans de précédents articles d'ALA (et dans d'autres endroits intéressants), les DOCTYPEs sont essentiels pour que les documents web s'affichent et fonctionnent correctement dans des navigateurs conformes aux normes, comme Mozilla, IE5/Mac, et IE6/Win. Où sont passés tous les DOCTYPEs ?
Create a Themable Button Set with Sass If you have yet to give Sass a try, don’t worry, this is a good place to start. And if you haven’t already read Andrew’s primer on Sass, give it a read for a better understanding of what we’ll be covering and how to get setup with Sass. In this article, we’ll start with one of the simplest design elements on a page –– a button. The buttons and color themes we’ll be creating What We’ll Cover We’ll be refactoring the CSS using the SCSS (Sassy CSS) syntax, which is closer to the pure CSS syntax we’re all used to. project/ index.html css/style.css scss/style.scss The “style.scss” file will compile into “style.css”, so that’s the only file we’ll need to link to in our HTML. nestingvariablesmixinscolor functionspartials Starting with the CSS Currently, our CSS is straightforward. All padding and border pixel units have been converted to em units so they scale relative to the button’s font size, which makes our button modular. In the HTML, we’ll add the .btn class to the element. Nesting Selectors
CSS Triangle You can make them with a single div. It’s nice to have classes for each direction possibility. The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an up arrow, for example, the bottom border is colored while the left and right are transparent, which forms the triangle. Demo See the Pen Animation to Explain CSS Triangles by Chris Coyier (@chriscoyier) on CodePen. Examples Dave Everitt writes in: For an equilateral triangle it’s worth pointing out that the height is 86.6% of the width so (border-left-width + border-right-width) * 0.866% = border-bottom-width clip-path | CSS Summary Initial value See the initial clipping path: 'overflow' and 'clip' properties Applies to all elements Inherited no Media visual Computed value Syntax clip-path: <uri> | none | inherit Values uri <uri> | none | inherit Examples Specifications Its extension to HTML elements is not yet present in any specification. Browser compatibility See also Document Tags and Contributors