HasLayout et bugs de rendu dans Internet Explorer 6-7 Le HasLayout, dont vous avez sans doute entendu parler au détour d'un tutoriel ou sur un forum, est une spécificité du navigateur Internet Explorer pour Windows, qui affecte les versions 5 à 7 incluses. Il s'agit d'un mécanisme interne du moteur de rendu d'Internet Explorer. Le HasLayout intervient dans le positionnement des éléments et plus généralement dans le calcul de l'affichage des pages web. Bref, c'est une question de cuisine interne. Pourquoi s'en occuper, s'il s'agit de cuisine interne ? Eh bien parce que cette cuisine-là n'est pas invisible, et que ses conséquences se font sentir dans nos pages web. Concrètement, qu'est-ce-que c'est? Les explications détaillées sur le HasLayout peuvent être trouvées dans l'article On Having Layout. On retiendra surtout que, pour Internet Explorer, tout élément d'une page HTML peut avoir deux états: soit il a le layout, soit il ne l'a pas. Mais qui a le layout? Un exemple de différence de rendu lié au layout On pourrait multiplier les exemples.
Comparing PIE to Other CSS3 Products – CSS3 PIE: CSS3 decorations for IE PIE is not the first product by far to provide some level of CSS3 support in IE. It can be difficult to tell what the differences are between all the products out there, so I'm going to attempt to cover several of the major ones here, and clarify their similarities and differences with PIE. An aside: some of these comparisons are based on fairly cursory evaluations of the projects. As a result there may be some inaccuracies. Dean Edwards's IE7.js (and IE8.js, IE9.js) This is the granddaddy of all IE shims, and probably the first major attempt at implementing CSS3 features in IE. It is implemented as a series of drop-in .js scripts, the main focus of which is working around IE layout bugs and implementing advanced selectors. Conversely, PIE doesn't attempt to implement any CSS3 selectors. The big downside with IE7.js as I understand it is performance. Keith Clark's Selectivizr This project, like IE7.js, implements CSS3 selectors only. Aaron Gustafson's eCSStender Drew Diller's DD_roundies
Creating 3D worlds with HTML and CSS by Keith Clark Last year I created a demo showing how CSS 3D transforms could be used to create 3D environments. The demo was a technical showcase of what could be achieved with CSS at the time but I wanted to see how far I could push things, so over the past few months I’ve been working on a new version with more complex models, realistic lighting, shadows and collision detection. This post documents how I did it and the techniques I used. View the demo(best experienced in Safari) Creating 3D objects In today’s 3D engines an objects geometry is stored as a collection of points (or vertices) each having an x, y and z property that defines its position in 3D space. With CSS transforms this is turned on its head. Creating objects from rectangles seems limiting at first but you can do a surprising amount with them, especially when you start playing with PNG alpha channels. All objects are created in JavaScript using a small set functions for creating primitive geometry. Lighting A second stab at lighting
Css2Less CSS Tutorials CSS Beginner Tutorial A step-by-step guide to CSS basics. Go here if you’re comfortable with basic HTML. Applying CSS - The different ways you can apply CSS to HTML.Selectors, Properties, and Values - The bits that make up CSS.Colors - How to use color.Text - How to manipulate the size and shape of text.Margins and Padding - How to space things out.Borders - Erm. Borders. Things that go around things.Putting It All Together - Throwing all of the above ingredients into one spicy hotpot. CSS Intermediate Tutorial Various odds-and-sods building on the basics of CSS. Class and ID Selectors: Make your own selectors without the need for sticky-backed plastic! CSS Advanced Tutorial Exploiting the versatile depths of CSS. Rounded Corners: Corners.
LESS « The Dynamic Stylesheet language CSS Color Module Level 3 Abstract CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc. It uses color-related properties and values to color the text, backgrounds, borders, and other parts of elements in a document. This specification describes color values and properties for foreground color and group opacity. These include properties and values from CSS level 2 and new values. Status of this document This section describes the status of this document at the time of its publication. The (archived) public mailing list www-style@w3.org (see instructions) is preferred for discussion of this specification. This document was produced by the CSS Working Group (part of the Style Activity). A separate implementation report contains a test suite and shows that each test in the test suite was passed by at least two independent implementations. A complete list of changes to this document is available. Table of Contents 1. 2. 3. 3.1. Example(s):
Prendre en main les CSS | Puce et Média Prendre en main les styles CSS c’est surtout, et avant tout, s’assurer d’avoir une bonne base HTML sur laquelle venir les appliquer. Ensuite, et avant de directement entrer tête baissée dans les couches purement visuelles, il faut être sûr de bien comprendre les mécaniques d’utilisation de bases, les règles, les sélecteurs, les déclarations… Bref, cette première approche, de prise en main, devrait pouvoir aider à débroussailler les principes et permettre d’entrer en douceur dans le vif du sujet. Styler des éléments Chaque page peut contenir plusieurs feuilles de styles, et chacun de ces styles peut être employé de diverses manières : en ligne, dans la page, par des feuilles liées ou importées. Le principe est très simple, il suffit de relier un élément à une règle par l’emploi d’un sélecteur. Utiliser une feuille de style L’utilisation des feuilles de style peut se faire de différentes façons. Dans une balise style Dans un fichier lié Dans une balise avec l’attribut style Les media queries
HTML5-CSS3.fr - Tutoriels, exemples et démos HTML5 et CSS3 Trouver son code couleur HTML ! Les couleurs avec du CSS sont les mêmes que celles avec un code HTML. Pour faire référence à d'autres couleurs, vous devrez utiliser le code hexadécimal. Vous pouvez choisir votre couleur en cliquant ici : <-- Cliquer ici Il existe des couleurs nommées normalisées : Les 16 couleurs de fondamentales ont un nom parlant (en anglais) normalisé : elles sont reconnus par tous les navigateurs : Il est possible d'avoir l'ensemble des couleurs de l'arc en ciel :) avec une sa valeur hexadecimal : Couleur HTML et CSS En CSS, est bien pratique de mettre en forme un contenu et le définir une seule fois dans sa feuille de style. color: Gestion de la couleur du texte letter-spacing: Espace entre les lettres text-align: Alignement d'un texte text-decoration: Habiblement d'un texte A savoir : Dans ce chapitre, la notion d'héritage est appliquée. Couleur d'un texte ou une phrase en CSS Espace entre les lettres Alignement d'un texte Ce texte est aligner à gauche.
40 CSS jQuery Charts and Graphs | Scripts + Tutorials Data visualization is the modern equivalent of visual communication and involves the creation and study of the visual representation of data. It transforms information in an abstract, schematic and visual form. Data visualization’s goal is to communicate information clearly and efficiently, and this is done via charts, graphs, plots etc. These use dots, lines, or bars, to visually communicate a message. Learn how to create simple, clean and engaging HTML5 based, CSS jQuery charts. By analyzing, using and following the tutorials and scripts in the list below, you will learn how to create meaningful charts from any data, in a way that provides the appropriate amount of details while still keeping an eye on the big picture and making the information appear in a user-friendly way. There are many jQuery charts plugins available that can help you create interactive data visualisations. CSS3 Pie Chart Learn how to make this CSS3 pie chart, with multiple colors. Customisable Animated Donut Chart