CSS3 module: W3C Selectors Résumé Les CSS (Cascading Style Sheets) sont un langage permettant de décrire la restitution de documents HTML et XML à l'écran, sur papier, vocalement, etc. Pour attacher des propriétés stylistiques aux éléments du document, elles utilisent les sélecteurs, qui sont des conditions de sélection de ces éléments. Statut de ce document Ce document est une version de travail de l'un des "modules" de la future spécification CSS3. Ce document est un document de travail du Groupe de Travail CSS & FP faisant partie de l'activité Style. Le Groupe de Travail pense que cette spécification est prête et souhaite donc en faire le dernier appel à commentaires. Les commentaires sur ce document de travail et les discussions le concernant peuvent être envoyés dans la liste de diffusion publique (archivée) www-style@w3.org (voyez les instructions). Ce document est toujours à l'état de document de travail et peut donc être mis à jour, remplacé ou rendu obsolète par d'autres documents du W3C à tout moment. 1.
OpenClassrooms - Le référencement de son site web Si vous êtes là, c'est que vous comptez améliorer le référencement votre (futur) site web. Cela tombe bien c'est ce que nous allons voir tout au long du tutoriel. :) Dans ce tutoriel, nous verrons ce qu'il faut faire et ne pas faire en matière de référencement. Nous aurons besoin de modifier du code HTML. Préparez vous à améliorer votre référencement Il faut savoir que le référencement n'est pas une science exacte. Il n'y a donc pas de méthode exacte. Après cette petite mise au point nous pouvons commencer.
Cascade CSS et priorité des sélecteurs CSS signifie « feuilles de styles en cascade »... Mais au fait, la cascade, qu’est-ce que c’est, à quoi ça sert, comment cela fonctionne ? Plongez avec nous dans la cascade sans risque de noyade ! Les styles CSS appliqués finalement à une page Web ont de multiples origines simultanées : styles utilisateurs et styles par défaut de l'agent utilisateur s'ajoutent aux différentes feuilles de styles éventuellement prévues par l'auteur, pour structurer ses CSS en modules, offrir des styles alternatifs ou styler ses documents pour différents medias. Les sources de style possibles Trois séries de styles CSS d'origines différentes sont susceptibles d'être concurrentes ou combinées pour un même élément (X)HTML : Les feuilles de style ont trois origines différentes : l'auteur, l'utilisateur et l'agent utilisateur (alias le navigateur). Prenons l'exemple des liens a d'un menu de navigation du type : <ul id="menu"><li><a href="..." Tout d'abord, une sélection en 3 étapes Etape 1 : le tri par media
slick - the last carousel you'll ever need Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> <link rel="stylesheet" type="text/css" href="slick/slick.css"/> // Add the new slick-theme.css if you want the default styling <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) Initialize your slider in your script file or an inline script tag When complete, your HTML should look something like: NOTE: I highly recommend putting your initialization script in an external JS file. Set up your HTML markup. <div class="your-class"><div>your content</div><div>your content</div><div>your content</div></div> Move the /slick folder into your project Add slick.css in your <head> Add slick.js before your closing <body> tag, after jQuery (requires jQuery 1.7 +) When complete, your HTML should look something like:
Selectivizr - CSS3 pseudo-class and attribute selectors for IE 6-8 Les Media Queries CSS3 - Alsacreations La spécification CSS3 Media Queries définit les techniques pour l'application de feuilles de styles en fonction des périphériques de consultation utilisés pour du HTML. On nomme également cette pratique Responsive Web Design, pour dénoter qu'il s'agit d'adapter dynamiquement le design à l'aide de CSS. Ces bonnes pratiques permettent d'exploiter encore plus les avantages de la séparation du contenu et de la présentation : l'intérêt est de pouvoir satisfaire des contraintes de dimensions, de résolutions et d'autres critères variés pour améliorer l'apparence graphique et la lisibilité (voire l'utilisabilité) d'un site web. Les plateformes exotiques sont concernées en premier lieu : navigateurs mobiles et tablettes, écrans à faibles résolutions, impression, tv, synthèses vocales, plages braille, etc. Approche historique Avec CSS2 et HTML4, il était déjà possible de spécifier un média de destination pour l'application d'une ou plusieurs feuilles de style. <! screen Écrans handheld print Impression
Meet the Pseudo Class Selectors Pseudo class selectors are CSS selectors with a colon preceding them. You are probably very familiar with a few of them. Like hover: a:hover { } They are immensely useful in a variety of situations. Link-related pseudo class selectors :link – Perhaps the most confusion-causing link-related pseudo selector. :visited – Selects links that have already been visited by the current browser. :hover – When the mouse cursor rolls over a link, that link is in it’s hover state and this will select it. :active – Selects the link while it is being activated (being clicked on or otherwise activated). There is a fun technique to remember all the link pseudo class selectors. Input & link related pseudo class selectors :focus – Defining hover styles for links is great, but it doesn’t help out those who used keyboard navigation to get to the link. :target – The target pseudo class is used in conjunction with IDs, and match when the hash tag in the current URL matches that ID. Relational pseudo class selectors
Vos premiers pas avec jQuery ! - Un site web dynamique avec jQuery ! Pour commencer à travailler avec jQuery sur votre site web, il va falloir tout naturellement l'inclure dans vos pages. Voyons ici comment l'on va procéder. Deux méthodes pour inclure jQuery dans vos pages web Vous devez savoir qu'il existe deux méthodes pour inclure jQuery dans vos pages. Inclure jQuery depuis votre serveur (méthode déconseillée) La première de ces deux méthodes, celle qui n'est pas conseillée, consiste à inclure jQuery dans vos pages web depuis votre propre serveur. Dans un premier temps, nous allons devoir nous rendre sur le site officiel de jQuery : jQuery.com. Pour récupérer jQuery, vous devez tout simplement cliquer sur l'option "Download" dans le menu du haut. Quoiqu'il en soit, la version la plus à jour est placée un peu en avant par rapport aux autres ; pratique pour l'identifier et la récupérer plus rapidement. Euh... il y a deux release pour la même version non ? Ah oui ! En fait, c'est très simple. jQuery vous est toujours fourni en deux exemplaires. <! Et oui !
Selectors Level 3 Abstract Selectors are patterns that match against elements in a tree, and as such form one of several technologies that can be used to select nodes in an XML document. Selectors have been optimized for use with HTML and XML, and are designed to be usable in performance-critical code. CSS (Cascading Style Sheets) is a language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc. CSS uses Selectors for binding style properties to elements in the document. This document describes the selectors that already exist in CSS1 [CSS1] and CSS2 [CSS21], and further introduces new selectors for CSS3 and other languages that may need them. Selectors define the following function: expression ∗ element → boolean That is, given an element and a selector, this specification defines whether that element matches the selector. Status of this document This section describes the status of this document at the time of its publication. Table of Contents 1. 1.1. 1.2. 1.3. 2. 3. .
Les sélecteurs 5.1 La reconnaissance d'un motif En CSS, des règles de reconnaissance de motifs déterminent les règles de style qui s'appliquent aux éléments de l'arbre du document. Ces motifs, nommés sélecteurs, sont variés, allant du simple nom d'un élément jusqu'aux riches motifs contextuels. Quand toutes les conditions d'un motif sont vérifiées pour un élément donné, celui-ci est retenu par le sélecteur. Dans un sélecteur, la sensibilité à la casse d'un nom d'élément du document dépend du langage utilisé pour le document. Cette table résume la syntaxe du sélecteur de CSS2 : 5.2 La syntaxe des sélecteurs Un sélecteur simple est soit un sélecteur de type, soit un sélecteur universel immédiatement suivi par un sélecteur d'attribut, un sélecteur d'ID ou une pseudo-classes, zéro ou plusieurs de ceux-ci, dans n'importe quel ordre. sélecteur consiste en une succession d'un, ou plusieurs, sélecteurs simples, séparés par des combinateurs. combinateurs sont : les caractères blancs et les caractères ">" et "+". sujets
Les sélecteurs en CSS3 Chrome, Safari, Opera, Firefox 4, Internet Explorer 9 Voici un tableau sur la syntaxe des sélecteurs en CSS2 (référence W3C traduit sur yoyodesign : Les sélecteurs) : Les nouveautés incluent entre autres les sélecteurs d'attributs, le combinateur d'adjacence directe, les pseudo-classes et les pseudo-éléments. Il y a 3 nouveaux sélecteurs [attr^="stringValue"] Ce sélecteur permet de sélectionner un élément DOM dont l'attribut "attr" commence exactement par la valeur "stringValue". Exemple : <p class="example"> je n'ai pas d'attribut title</p><p class="example" title="comment"> j'ai un attribut title mais il ne commence pas par "ess"</p><p class="example" title="essai"> j'ai un attribut title commençant par "ess"</p><p class="example" title="esson"> j'ai un attribut title commençant par "ess" également</p> Démo [attr$="stringValue"] Ce sélecteur permet de sélectionner un élément DOM dont l'attribut "attr" finit exactement par la valeur "stringValue". Démo [attr*="stringValue"] Démo Démo :root Démo Démo