# data[].attributes.attachment_link.description
En tant que développeur web, vous êtes amené à rencontrer des bugs lors de la conception de sites internet. Mais comment déboguer un programme ? Dans ce cours, vous apprendrez à utiliser les bons outils et à adopter une méthodologie de débogage efficace.

# data[].attributes.attachment_link.readable_text
Test a feature

Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices.

Test on:

Did you know?

Next

If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself!

You can import usage data from your Google Analytics account and see exactly how well a feature is supported among your own site's visitors. Look under the Settings panel to get started!

Usage data for all countries and continents can be imported via the Settings panel.

By default, older browser versions are only shown if they have >= 0.5% usage share. You can increase or decrease this value from the Settings panel.

Each feature support table includes a "Usage relative" button. This will resize each browser version cell to be relative to the amount of support it has for the selected usage source.

# data[].attributes.attachment_link.keywords[]
web browser compatibility support html css svg html5 css3 opera chrome firefox safari internet explorer

# data[].attributes.attachment_link.title
Can I use... Support tables for HTML5, CSS3, etc

# data[].attributes.attachment_link.description
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

# data[].attributes.headline
Outils Linter, minifier, bundler, transpiler

# data[].attributes.subject
Outils Linter, minifier, bundler, transpiler

# data[].attributes.attachment_link.readable_text
Qu'est-ce que c'est que ces mots barbares ?! 🤔

Ces mots "barbares" venus de l'anglais nous seront en fait très utiles ! Voyons ensemble ce que représente chacun d'entre eux.

Linter

Le linter est un programme qui va analyser notre code et détecter les erreurs de syntaxe, les variables non utilisées, les variables qui n'existent pas, la mauvaise organisation du code, le non-respect des bonnes pratiques d'écriture de code...

Le JavaScript étant un langage non compilé, vous ne verrez les erreurs de syntaxe de votre code que lors de l'exécution du code concerné. C'est-à-dire que si une de vos fonctions utilise une variable qui n'est pas définie, vous ne le saurez que lorsque votre fonction sera exécutée. Autant dire que pour certaines fonctions peu utilisées, vous pouvez très facilement laisser des erreurs "d'inattention" passer en production. 😫

Un linterpourra donc vous aider à régler ces erreurs avant que vos utilisateurs n'en subissent les conséquences (les tests sont aussi un très bon moyen complémentaire au linter pour éviter les erreurs, mais ce n'est pas l'objet de ce cours). Il pourra aussi vous aider à optimiser un peu votre code et vous sera d'une grande aide pour définir des bonnes pratiques d'écriture de code lorsque vous travaillerez en équipe !

Voici quelques exemples de linters : JSLint, ESLint.

Minifier

Rappelez-vous, votre code JavaScript est chargé par votre navigateur. Cela signifie que votre navigateur va demander à votre serveur votre code JavaScript afin de l'exécuter. Il est alors évident que moins votre code sera lourd (en termes de taille de fichier), plus votre navigateur pourra le récupérer et le charger rapidement.

Un minifier est donc un programme responsable de la minification de votre code. C'est-à-dire qu'il va essayer de rendre votre code le plus léger possible en retirant les espaces et retours à la ligne inutiles, en renommant vos variables avec des noms plus courts, en supprimant le code non utilisé, en supprimant les commentaires, en optimisant certains bouts de code pour les réécrire avec une syntaxe plus légère, etc.

Malgré les bonnes connexions Internet qui se développent de plus en plus, la minification du code n'est pas quelque chose à négliger, car si vous avez un site web avec beaucoup de trafic, c'est autant de requêtes qui sont faites pour récupérer votre code. Chaque octet compte afin d'alléger la charge des serveurs et de donner à vos utilisateurs une réponse la plus rapide possible !

Voici quelques exemples de minifiers : node-minify, UglifyJS.

Bundler

De la même manière qu'il est important d'avoir un code le plus léger possible, il est aussi important de réduire au maximum le nombre de fichiers qui composent votre code !

C'est donc le rôle du bundler. Il va se charger de votre code pour qu'il tienne dans un seul fichier. Ainsi, vous continuez à coder dans plusieurs fichiers pour plus de clarté dans votre code, mais le navigateur n'aura besoin de charger d'un seul fichier lorsqu'un visiteur ira sur votre site.

Voici un exemple de bundler : Webpack.

Transpiler

Vous devez vous en douter, le langage JavaScript évolue. À l'heure actuelle, nous en sommes à la version ECMAScript 2018 (ES9), mais déjà la version ECMAScript 2015 (ES6) n'est plus supportée dans son intégralité tous les navigateurs. Et c'est bien dommage, car les nouvelles versions peuvent offrir des choses intéressantes ( async / await par exemple).

Depuis la publication de cette mise à jour, JavaScript a sorti la version ECMAScript 2021 (ES12). À priori la version ECMAScript 2018 (ES9) reste supportée par la plupart des navigateurs.

Mais alors comment coder avec la dernière version de JavaScript tout en étant compatible avec tous les navigateurs ? Avec un transpiler !

Voici un exemple de transpiler : Babel.

# data[].attributes.attachment_link.description
Qu'est-ce que c'est que ces mots barbares ?! 🤔 Ces mots "barbares" venus de l'anglais nous seront en fait très utiles ! Voyons ensemble ce que représente chacun d'entre eux. Linter Le linter est un programme qui va analyser notre code et détecter les erreurs de syntaxe, les variables non utilisées, les variables qui n'existent pas, la mauvaise organisation du code, le non-respect des bonnes pratiques d'écriture de code...

# data[].attributes.attachment_link.readable_text
Tout commence avec le document . Cet objet, auquel vous avez directement accès dans votre code JavaScript, est le point de départ du DOM. Il représente votre page (votre document) entière.

C'est donc lui qui contient les fonctions dont vous aurez besoin pour retrouver les éléments que vous cherchez.

Nous allons voir ensemble les principales fonctions de recherche d'éléments du DOM.

document.getElementById()

C'est sûrement la méthode la plus utilisée pour retrouver un élément, car c'est aussi la seule qui nous permette de retrouver facilement un élément précis.

Comme son nom l'indique, elle va rechercher un élément grâce à son id . Rappelez-vous qu'il ne doit y avoir qu'un seul élément avec un id donné, cette méthode est donc une candidate parfaite pour retrouver un élément particulier.

getElementById(<id>) prend en paramètre l' id de l'élément que vous recherchez et vous retournera cet élément s'il a été trouvé.

Par exemple, si l'on part du code HTML suivant : <p id="my-anchor">My content</p> , on pourra trouver cet élément avec le code JavaScript suivant :

Vous trouverez toute la documentation sur le site de Developper Mozilla.

document.getElementsByClassName()

Cette méthode fonctionne de la même manière que la précédente, mais fera sa recherche sur la class des éléments et retournera la liste des éléments qui correspondent.

Pour un rappel de ce qu'est une classe, vous pouvez retourner voir le cours Apprenez à créer votre site web avec HTML5 et CSS3.

getElementsByClassName(<classe>) prend en paramètre la classe des éléments à rechercher et vous retournera une liste d'éléments correspondants.

Par exemple, si l'on part du code HTML suivant :

on pourra retrouver la liste des éléments ayant la classe content avec le code JavaScript suivant :

Vous trouverez la documentation correspondante sur le site Developper Mozilla.

document.getElementsByTagName()

Avec cette méthode, vous rechercherez tous les éléments avec un nom de balise bien précis (par exemple tous les liens ( a ), tous les boutons ( button )...).

De la même manière que la méthode précédente, vous récupérerez la liste des éléments correspondants.

getElementsByTagName(<name>) prend en paramètre le nom de la balise à rechercher et vous retournera la liste des éléments correspondants.

Si l'on part du code HTML suivant :

on pourra retrouver la liste des éléments de type article avec le code JavaScript suivant :

Pour retrouver la documentation correspondante, rendez-vous sur le site Developper Mozilla.

document.querySelector()

Cette méthode est plus complexe, mais aussi beaucoup plus puissante car elle vous permet de faire une recherche complexe dans le DOM, en mélangeant plusieurs procédés. Il s'agit en fait d'un sélecteur qui permet de cibler certains éléments.

Par exemple, document.querySelector("#myId p.article > a") fera une recherche dans l'élément ayant pour id #myId , les éléments de type <p> qui ont pour classe article , afin de récupérer le lien ( <a> ) qui est un enfant direct (pas des enfants de ses enfants).

Ainsi, avec le code HTML suivant :

la recherche JavaScript suivante :

nous retournera uniquement Lien 6

Si vous êtes à l'aise avec le CSS, les sélecteurs doivent vous parler. Si ce n'est pas le cas, ce n'est pas grave, on peut déjà faire beaucoup de choses avec les autres fonctions, et puis vous pourrez toujours approfondir vos connaissances en CSS quand vous en aurez besoin.

Voici le lien vers le cours sur le HTML et le CSS.

querySelector() ne renvoie pas une liste des résultats, mais le premier élément qui correspond à la recherche.

querySelector(<selector>) prend en paramètre le sélecteur et vous retournera le premier élément trouvé, ou null si aucun élément n'a été trouvé.

La documentation correspondante est à retrouver sur le site Developper Mozilla.

Pour retourner une liste de résultats qui correspondent à la recherche que vous souhaitez faire il faudra utiliser la fonction querySelectorAll , qui fonctionne de la même manière.

# data[].attributes.attachment_link.description
Tout commence avec le document . Cet objet, auquel vous avez directement accès dans votre code JavaScript, est le point de départ du DOM. Il représente votre page (votre document) entière. C'est donc lui qui contient les fonctions dont vous aurez besoin pour retrouver les éléments que vous cherchez.

# data[].attributes.attachment_link.readable_text
Une fonction qui s'appelle elle-même
Une fonction récursive est une fonction qui s'appelle elle-même d'une façon ou d'une autre.

Prenons l'exemple que je décris dans la vidéo de ce chapitre : la recherche binaire.

Le but de l'exercice : chercher un élément dans un array trié pour savoir s'il s'y trouve.

Une approche basique (et plutôt lente) serait la suivante :

On avance, élément par élément, dans le tableau. Si on trouve un élément qui correspond à ce que l'on recherche, la fonction renvoie true . Si on arrive à la fin du tableau sans l'avoir trouvé, on passe à la ligne suivante et la fonction renvoie false .

C'est plutôt clair comme approche, mais c'est lent ! Le temps pris pour chaque recherche se prolonge de manière linéaire avec des listes plus longues !

Imaginons une autre approche.

On sait que le tableau est trié, donc on peut savoir, pour un élément donné, si ce que l'on recherche risque de se trouver plus haut ou plus bas dans la liste. Par exemple, si on recherche le nombre 42 et que l'on tombe sur 32, on sait qu'il faudra chercher plus bas.

Du coup, commençons par analyser l'élément médian de la liste. On peut faire la somme de l'index de début et de l'index de fin, et diviser par deux pour trouver cet élément (arrondissons vers le bas pour nous assurer de trouver un nombre entier :

Mais pourquoi utiliser les index de début et de fin plutôt que la propriété length du tableau ?

Utiliser les index nous permettra de réutiliser le même code sur des sélections de plus en plus petites du tableau, comme vous allez vite le découvrir !

Maintenant que l'on a l'élément médian du tableau, vérifions si, par chance, on est tombé juste.

La fonction retournera true si on a trouvé l'élément.

Si on n'a pas eu de chance, ce n'est pas grave : puisque le tableau est trié, on sait dans quelle moitié du tableau chercher ! Du coup, on a juste à exécuter exactement la même fonction sur la partie en question ! Il suffit de modifier soit l'index de fin (pour chercher dans la première moitié) soit l'index de début (pour chercher dans la deuxième moitié) :

La fonction continuera à s'appeler elle-même jusqu'à trouver ce que l'on recherche. Mais il manque quelque chose ! Qu'est-ce qui se passe si ce que l'on recherche n'existe pas dans le tableau ? Il faut ce que l'on appelle un cas de base, ou , pour dire à la fonction de s'arrêter.

Quel est le base case dans cet algorithme ?

On saura que l'algorithme est arrivé au bout si on a essayé de l'appeler avec un index de début qui est supérieur à l'index de fin.

Pourquoi ? Eh bien parce que peu à peu, on divise le tableau, encore et encore, jusqu'à tomber sur une sélection d'un seul élément : on aura donc start = mid = end . Du coup, quand la fonction se rappellera encore, elle utilisera soit start = mid + 1 , soit end = mid - 1 , selon notre recherche. On aura donc start > end , et la fonction peut retourner false , car on sait qu'elle est arrivée au bout sans trouver ce que l'on recherche.

On met donc ce base case au début de la fonction pour vérifier s'il s'agit du dernier appel :

Et voilà ! Une fonction récursive, qui s'appelle elle-même, qui effectue une recherche d'élément dans un tableau trié, et qui renvoie true si l'élément s'y trouve, ou false s'il ne s'y trouve pas (grâce au base case) !

ATTENTION ! Sans base case (ou avec un base case incorrect), vos fonctions récursives peuvent causer des infinite loops et des stack overflows, car elles vont continuer à s'appeler à l'infini, donc faites bien attention !

Cet algorithme s'appelle la recherche binaire, et il s'agit d'un exercice qui est souvent demandé en entretien d'embauche, donc vous venez de faire un pas de plus vers votre premier emploi de développeur !

N'hésitez pas également à explorer d'autres exemples courants d'algorithme récursif : merge sort, index sort, tree traversal... il y en a énormément !

# data[].attributes.attachment_link.title
Découvrez la récursivité : l'appel de fonctions à l'intérieur d'elles-mêmes

# data[].attributes.attachment_link.description
Une fonction qui s'appelle elle-même Une fonction récursive est une fonction qui s'appelle elle-même d'une façon ou d'une autre. Prenons l'exemple que je décris dans la vidéo de ce chapitre : la recherche binaire. Le but de l'exercice : chercher un élément dans un array trié pour savoir s'il s'y trouve.

# data[].attributes.attachment_link.title
Adoptez Visual Studio comme environnement de développement

# data[].attributes.attachment_link.description
Prenez en main l'IDE Visual Studio pour créer et manipuler un projet de développement ! Vous découvrirez les avantages d'un IDE par rapport à un simple éditeur de code comme Visual Studio Code.

# data[].attributes.body
À voir plus tard au besoin pour tests fonctionnels (bout en bout) E2E

# data[].attributes.attachment_link.description
Les tests automatisés permettent de vérifier en continu si votre application fonctionne comme prévu. C'est une aide indispensable pour tous les développeurs frontend professionnels.

# data[].attributes.body
À revoir !!!

# data[].attributes.attachment_link.authors[].name
Le professeur Will Alexander Scottish developer, teacher and musician based in Paris.

# data[].attributes.attachment_link.title
Définissez des méthodes d’instance et des propriétés

# data[].attributes.attachment_link.description
Établissez une base solide en développement web en apprenant et en pratiquant JavaScript, l’un des principaux langages de programmation sur le web, et créez une application simple !

# data[].attributes.body
let episode = {
title: 'Dark Beginnings',
duration: 45,
hasBeenWatched: false
};

// Create variables here
// =====================================

let episodeTitle = episode.title;
let episodeDuration = episode["duration"];
let visionne = "hasBeenWatched";
let episodeHasBeenWatched = episode[visionne];

// =====================================

document.querySelector('#episode-info').innerText = `Episode: ${episodeTitle}
Duration: ${episodeDuration} min
${episodeHasBeenWatched ? 'Already watched' : 'Not yet watched'}`

# data[].attributes.attachment_link.description
A live pastebin for HTML, CSS & JavaScript and a range of processors, including SCSS, CoffeeScript, Jade and more...

# data[].attributes.attachment_link.readable_text
Bien. Maintenant que nous savons comment trouver la mention médiane d'un candidat, je vous propose de les trier par mention ! Celui ayant la meilleure mention devra arriver en haut de la liste et celui ayant la mention la plus basse (À rejeter) en bas.

Cela tombe bien, nous avons justement déjà vu un algorithme de tri : le tri par bulles !

La librairie standard de Python inclut des méthodes de tri, mais l'objectif de ce cours étant de mieux comprendre les algorithmes, autant les essayer !

Notre fonction prend en paramètre un dictionnaire. Or, le tri par bulles n'est possible que sur un tableau, car vous avez besoin des index pour réordonner les items. La première étape va donc être de recréer un tableau comprenant les informations suivantes : le nom du candidat (cela nous sera utile, plus tard, pour retrouver ses résultats) et sa mention.

À présent, nous allons utiliser la forme du tri à bulles que nous avons vue précédemment. Attention, détail important : vous comparez les valeurs des mentions et non de l'élément en lui-même !

Et ajoutons un bout de code dans la fonction main() pour l'exécuter :

Cela fonctionne, sauf que la mention la plus haute se trouve ainsi à la fin de la liste, or nous voulions qu'elle apparaisse au début ! Changeons la comparaison en ligne 3 : nous dirons que, si l'élément suivant est plus grand, il doit être interverti !

Voici le résultat :

[('hermione', (0, 50044)), ('beyonce', (1, 66748)), ('balou', (3, 66575)), ('elsa', (4, 100000)), ('chuck-norris', (5, 66648)), ('gandalf', (6, 100000))]

Nos candidats sont bien classés !

Ajoutons un petit peu de code pour renvoyer un tableau tout joli tout beau :

# data[].attributes.attachment_link.description
Bien. Maintenant que nous savons comment trouver la mention médiane d'un candidat, je vous propose de les trier par mention ! Celui ayant la meilleure mention devra arriver en haut de la liste et celui ayant la mention la plus basse (À rejeter) en bas.

# data[].attributes.attachment_link.description
L'algorithmique est l'art de décomposer les étapes d'une solution à un problème sous forme d'instructions précises pour des programmes informatiques. Apprenez à faire votre algorithme !

# data[].attributes.attachment_link.readable_text
Abstract

Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines will also often make Web content more usable to users in general.

WCAG 2.1 success criteria are written as testable statements that are not technology-specific. Guidance about satisfying the success criteria in specific technologies, as well as general information about interpreting the success criteria, is provided in separate documents. See Web Content Accessibility Guidelines (WCAG) Overview for an introduction and links to WCAG technical and educational material.

WCAG 2.1 extends Web Content Accessibility Guidelines 2.0 [], which was published as a W3C Recommendation December 2008. Content that conforms to WCAG 2.1 also conforms to WCAG 2.0. The WG intends that for policies requiring conformance to WCAG 2.0, WCAG 2.1 can provide an alternate means of conformance. The publication of WCAG 2.1 does not deprecate or supersede WCAG 2.0. While WCAG 2.0 remains a W3C Recommendation, the W3C advises the use of WCAG 2.1 to maximize future applicability of accessibility efforts. The W3C also encourages use of the most current version of WCAG when developing or updating Web accessibility policies.

Status of This Document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at https://www.w3.org/TR/.

This is a Recommendation of WCAG 2.1 by the Accessibility Guidelines Working Group.

This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and is endorsed by the Director as a W3C Recommendation. It is a stable document and may be used as reference material or cited from another document. W3C's role in making the Recommendation is to draw attention to the specification and to promote its widespread deployment. This enhances the functionality and interoperability of the Web.

By publishing this Recommendation, W3C expects the functionality specified in this Recommendation will not be affected by changes to CSS Values and Units Module Level 3 or by Pointer Events Level 2. The Working Group will continue to track these specifications.

To comment, file an issue in the W3C WCAG GitHub repository. The Working Group requests that public comments be filed as new issues, one issue per discrete comment. It is free to create a GitHub account to file issues. If filing issues in GitHub is not feasible, send email to public-agwg-comments@w3.org ( comment archive). Comments received on the WCAG 2.1 Recommendation cannot result in changes to this version of the guidelines, but may be addressed in errata or future versions of WCAG. The Working Group does not plan to make formal responses to comments. A list of issues filed as well as Archives of the AG WG mailing list discussions are publicly available, and future work undertaken by the Working Group may address comments received on this document.

This document was published by the Accessibility Guidelines Working Group as a Recommendation.

Please see the Working Group's implementation report.

This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and is endorsed by the Director as a W3C Recommendation. It is a stable document and may be used as reference material or cited from another document. W3C's role in making the Recommendation is to draw attention to the specification and to promote its widespread deployment. This enhances the functionality and interoperability of the Web.

This document was produced by a group operating under the W3C Patent Policy. W3C maintains a public list of any patent disclosures made in connection with the deliverables of the group; that page also includes instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

This document is governed by the 1 February 2018 W3C Process Document.

Introduction
This section is non-normative.

Web Content Accessibility Guidelines (WCAG) 2.1 defines how to make Web content more accessible to people with disabilities. Accessibility involves a wide range of disabilities, including visual, auditory, physical, speech, cognitive, language, learning, and neurological disabilities. Although these guidelines cover a wide range of issues, they are not able to address the needs of people with all types, degrees, and combinations of disability. These guidelines also make Web content more usable by older individuals with changing abilities due to aging and often improve usability for users in general.

WCAG 2.1 is developed through the W3C process in cooperation with individuals and organizations around the world, with a goal of providing a shared standard for Web content accessibility that meets the needs of individuals, organizations, and governments internationally. WCAG 2.1 builds on WCAG 2.0 [], which in turn built on WCAG 1.0 [WAI-WEBCONTENT] and is designed to apply broadly to different Web technologies now and in the future, and to be testable with a combination of automated testing and human evaluation. For an introduction to WCAG, see the Web Content Accessibility Guidelines (WCAG) Overview.

Significant challenges were encountered in defining additional criteria to address cognitive, language, and learning disabilities, including a short timeline for development as well as challenges in reaching consensus on testability, implementability, and international considerations of proposals. Work will carry on in this area in future versions of WCAG. We encourage authors to refer to our supplemental guidance on improving inclusion for people with disabilities, including learning and cognitive disabilities, people with low-vision, and more.

Web accessibility depends not only on accessible content but also on accessible Web browsers and other user agents. Authoring tools also have an important role in Web accessibility. For an overview of how these components of Web development and interaction work together, see:

The individuals and organizations that use WCAG vary widely and include Web designers and developers, policy makers, purchasing agents, teachers, and students. In order to meet the varying needs of this audience, several layers of guidance are provided including overall principles, general guidelines, testable success criteria and a rich collection of sufficient techniques, advisory techniques, and documented common failures with examples, resource links and code.

Principles - At the top are four principles that provide the foundation for Web accessibility: perceivable, operable, understandable, and robust. See also Understanding the Four Principles of Accessibility.

Guidelines - Under the principles are guidelines. The 13 guidelines provide the basic goals that authors should work toward in order to make content more accessible to users with different disabilities. The guidelines are not testable, but provide the framework and overall objectives to help authors understand the success criteria and better implement the techniques.

Success Criteria - For each guideline, testable success criteria are provided to allow WCAG 2.0 to be used where requirements and conformance testing are necessary such as in design specification, purchasing, regulation, and contractual agreements. In order to meet the needs of different groups and different situations, three levels of conformance are defined: A (lowest), AA, and AAA (highest). Additional information on WCAG levels can be found in Understanding Levels of Conformance.

Sufficient and Advisory Techniques - For each of the guidelines and success criteria in the WCAG 2.0 document itself, the working group has also documented a wide variety of techniques. The techniques are informative and fall into two categories: those that are sufficient for meeting the success criteria and those that are advisory. The advisory techniques go beyond what is required by the individual success criteria and allow authors to better address the guidelines. Some advisory techniques address accessibility barriers that are not covered by the testable success criteria. Where common failures are known, these are also documented. See also Sufficient and Advisory Techniques in Understanding WCAG 2.0.

All of these layers of guidance (principles, guidelines, success criteria, and sufficient and advisory techniques) work together to provide guidance on how to make content more accessible. Authors are encouraged to view and apply all layers that they are able to, including the advisory techniques, in order to best address the needs of the widest possible range of users.

Note that even content that conforms at the highest level (AAA) will not be accessible to individuals with all types, degrees, or combinations of disability, particularly in the cognitive language and learning areas. Authors are encouraged to consider the full range of techniques, including the advisory techniques, as well as to seek relevant advice about current best practice to ensure that Web content is accessible, as far as possible, to this community. Metadata may assist users in finding content most suitable for their needs.

The WCAG 2.0 document is designed to meet the needs of those who need a stable, referenceable technical standard. Other documents, called supporting documents, are based on the WCAG 2.0 document and address other important purposes, including the ability to be updated to describe how WCAG would be applied with new technologies. Supporting documents include:

1. How to Meet WCAG 2.1 - A customizable quick reference to WCAG 2.1 that includes all of the guidelines, success criteria, and techniques for authors to use as they are developing and evaluating Web content. This includes content from WCAG 2.0 and WCAG 2.1 and can be filtered in many ways to help authors focus on relevant content.

2. Understanding WCAG 2.1 - A guide to understanding and implementing WCAG 2.1. There is a short "Understanding" document for each guideline and success criterion in WCAG 2.1 as well as key topics.

3. Techniques for WCAG 2.1 - A collection of techniques and common failures, each in a separate document that includes a description, examples, code and tests.

4. The WCAG Documents - A diagram and description of how the technical documents are related and linked.

See Web Content Accessibility Guidelines (WCAG) Overview for a description of the WCAG 2.0 supporting material, including education resources related to WCAG 2. Additional resources covering topics such as the business case for Web accessibility, planning implementation to improve the accessibility of Web sites, and accessibility policies are listed in WAI Resources.

WCAG 2.1 meets a set of requirements for WCAG 2.1 which, in turn, inherit requirements from WCAG 2.0. Requirements structure the overall framework of guidelines and ensure backwards compatibility. The Working Group also used a less formal set of acceptance criteria for success criteria, to help ensure success criteria are similar in style and quality to those in WCAG 2.0. These requirements constrained what could be included in WCAG 2.1. This constraint was important to preserve its nature as a dot-release of WCAG 2.

WCAG 2.1 was initiated with the goal to improve accessibility guidance for three major groups: users with cognitive or learning disabilities, users with low vision, and users with disabilities on mobile devices. Many ways to meet these needs were proposed and evaluated, and a set of these were refined by the Working Group. Structural requirements inherited from WCAG 2.0, clarity and impact of proposals, and timeline led to the final set of success criteria included in this version. The Working Group considers that WCAG 2.1 incrementally advances web content accessibility guidance for all these areas, but underscores that not all user needs are met by these guidelines.

WCAG 2.1 builds on and is backwards compatible with WCAG 2.0, meaning web pages that conform to WCAG 2.1 also conform to WCAG 2.0. Authors that are required by policy to conform with WCAG 2.0 will be able to update content to WCAG 2.1 without losing conformance with WCAG 2.0. Authors following both sets of guidelines should be aware of the following differences:

WCAG 2.1 extends WCAG 2.0 by adding new success criteria, definitions to support them, guidelines to organize the additions, and a couple additions to the conformance section. This additive approach helps to make it clear that sites which conform to WCAG 2.1 also conform to WCAG 2.0, thereby meeting conformance obligations that are specific to WCAG 2.0. The Accessibility Guidelines Working Group recommends that sites adopt WCAG 2.1 as their new conformance target, even if formal obligations mention WCAG 2.0, to provide improved accessibility and to anticipate future policy changes.

The following Success Criteria are new in WCAG 2.1:

Many of these success criteria reference new terms that have also been added to the glossary and form part of the normative requirements of the success criteria.

In the Conformance section, a third note about page variants has been added to Full Pages, and an option for machine-readable metadata added to Optional Components of a Conformance Claim.

In order to avoid confusion for implementers for whom backwards compatibility to WCAG 2.0 is important, new success criteria in WCAG 2.1 have been appended to the end of the set of success criteria within their guideline. This avoids the need to change the section number of success criteria from WCAG 2.0, which would be caused by inserting new success critera between existing success ccriteria in the guideline, but it means success criteria in each guideline are no longer grouped by conformance level. The order of success criteria within each guideline does not imply information about conformance level; only the conformance level indicator (A / AA / AAA) on the success criterion itself indicates this. The WCAG 2.1 Quick Reference provides ways to view success criteria grouped by conformance level, along with many other filter and sort options.

WCAG 2.1 uses the same conformance model as WCAG 2.0 with a couple additions, which is described in the Conformance section. It is intended that sites that conform to WCAG 2.1 also conform to WCAG 2.0, which means they meet the requirements of any policies that reference WCAG 2.0, while also better meeting the needs of users on the current Web.

In parallel with WCAG 2.1, the Accessibility Guidelines Working Group is developing another major version of accessibility guidelines. The result of this work is expected to be a more substantial restructuring of web accessibility guidance than would be realistic for dot-releases of WCAG 2. The work follows a research-focused, user-centered design methodology to produce the most effective and flexible outcome, including the roles of content authoring, user agent support, and authoring tool support. This is a multi-year effort, so WCAG 2.1 is needed as an interim measure to provide updated web accessibility guidance to reflect changes on the web since the publication of WCAG 2.0. The Working Group might also develop additional interim versions, continuing with WCAG 2.2, on a similar short timeline to provide additional support while the major version is completed.

Information and user interface components must be presentable to users in ways they can perceive.

Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

Provide alternatives for time-based media.

Make it easier for users to see and hear content including separating foreground from background.

(Level A)

Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.

(Level AAA)

For the visual presentation of blocks of text, a mechanism is available to achieve the following:

Foreground and background colors can be selected by the user.

Width is no more than 80 characters or glyphs (40 if CJK).

Text is not justified (aligned to both the left and the right margins).

Line spacing (leading) is at least space-and-a-half within paragraphs, and paragraph spacing is at least 1.5 times larger than the line spacing.

Text can be resized without assistive technology up to 200 percent in a way that does not require the user to scroll horizontally to read a line of text on a full-screen window.

(Level AA)

Content can be presented without loss of information or functionality, and without requiring scrolling in two dimensions for:

Vertical scrolling content at a width equivalent to 320 CSS pixels;

Horizontal scrolling content at a height equivalent to 256 CSS pixels.

Except for parts of the content which require two-dimensional layout for usage or meaning.

(Level AA)

In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:

Line height (line spacing) to at least 1.5 times the font size;

Spacing following paragraphs to at least 2 times the font size;

Letter spacing (tracking) to at least 0.12 times the font size;

Word spacing to at least 0.16 times the font size.

Exception: Human languages and scripts that do not make use of one or more of these text style properties in written text can conform using only the properties that exist for that combination of language and script.

(Level AA)

Where receiving and then removing pointer hover or keyboard focus triggers additional content to become visible and then hidden, the following are true:

Dismissable

A mechanism is available to dismiss the additional content without moving pointer hover or keyboard focus, unless the additional content communicates an input error or does not obscure or replace other content;

Hoverable

If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing;

Persistent

The additional content remains visible until the hover or focus trigger is removed, the user dismisses it, or its information is no longer valid.

Exception: The visual presentation of the additional content is controlled by the user agent and is not modified by the author.

Examples of additional content controlled by the user agent include browser tooltips created through use of the HTML title attribute.

User interface components and navigation must be operable.

Information and the operation of user interface must be understandable.

Content must be robust enough that it can be interpreted by by a wide variety of user agents, including assistive technologies.

This section lists requirements for conformance to WCAG 2.1. It also gives information about how to make conformance claims, which are optional. Finally, it describes what it means to be accessibility supported, since only accessibility-supported ways of using technologies can be relied upon for conformance. Understanding Conformance includes further explanation of the accessibility-supported concept.

The main content of WCAG 2.1 is normative and defines requirements that impact conformance claims. Introductory material, appendices, sections marked as "non-normative", diagrams, examples, and notes are informative (non-normative). Non-normative material provides advisory information to help interpret the guidelines but does not create requirements that impact a conformance claim.

The key words MAY, MUST, MUST NOT, NOT RECOMMENDED, RECOMMENDED, SHOULD, and SHOULD NOT are to be interpreted as described in [].

In order for a Web page to conform to WCAG 2.1, all of the following conformance requirements must be satisfied:

One of the following levels of conformance is met in full.

For Level A conformance (the minimum level of conformance), the Web page satisfies all the Level A Success Criteria, or a conforming alternate version is provided.

For Level AA conformance, the Web page satisfies all the Level A and Level AA Success Criteria, or a Level AA conforming alternate version is provided.

For Level AAA conformance, the Web page satisfies all the Level A, Level AA and Level AAA Success Criteria, or a Level AAA conforming alternate version is provided.

Conformance (and conformance level) is for full Web page(s) only, and cannot be achieved if part of a Web page is excluded.

New A full page includes each variation of the page that is automatically presented by the page for various screen sizes (e.g. variations in a responsive Web page). Each of these variations needs to conform (or needs to have a conforming alternate version) in order for the entire page to conform.

When a Web page is one of a series of Web pages presenting a process (i.e., a sequence of steps that need to be completed in order to accomplish an activity), all Web pages in the process conform at the specified level or better. (Conformance is not possible at a particular level if any page in the process does not conform at that level or better.)

An online store has a series of pages that are used to select and purchase products. All pages in the series from start to finish (checkout) conform in order for any page that is part of the process to conform.

1. when any technology that is not relied upon is turned on in a user agent,

2. when any technology that is not relied upon is turned off in a user agent, and

3. when any technology that is not relied upon is not supported by a user agent

In addition, the following success criteria apply to all content on the page, including content that is not otherwise relied upon to meet conformance, because failure to meet them could interfere with any use of the page:

1.4.2 - Audio Control,

2.1.2 - No Keyboard Trap,

2.3.1 - Three Flashes or Below Threshold, and

2.2.2 - Pause, Stop, Hide.

For more information, including examples, see Understanding Conformance Requirements.

Conformance is defined only for Web pages. However, a conformance claim may be made to cover one page, a series of pages, or multiple related Web pages.

Conformance claims are not required. Authors can conform to WCAG 2.1 without making a claim. However, if a conformance claim is made, then the conformance claim must include the following information:

1. Date of the claim

2. Guidelines title, version and URI "Web Content Accessibility Guidelines 2.1 at https://www.w3.org/TR/WCAG21/" In WCAG 2.0 this was a dated URI, which may need to be adjusted when this becomes a Rec.

3. Conformance level satisfied: (Level A, AA or AAA)

4. A concise description of the Web pages, such as a list of URIs for which the claim is made, including whether subdomains are included in the claim.

The Web pages may be described by list or by an expression that describes all of the URIs included in the claim.

Web-based products that do not have a URI prior to installation on the customer's Web site may have a statement that the product would conform when installed.

5. A list of the Web content technologies relied upon.

In addition to the required components of a conformance claim above, consider providing additional information to assist users. Recommended additional information includes:

A list of success criteria beyond the level of conformance claimed that have been met. This information should be provided in a form that users can use, preferably machine-readable metadata.

A list of the specific technologies that are " used but not relied upon."

A list of user agents, including assistive technologies that were used to test the content.

A list of specific accessibility characteristics of the content, provided in machine-readable metadata.

Information about any additional steps taken that go beyond the success criteria to enhance accessibility.

A machine-readable metadata version of the list of specific technologies that are relied upon.

A machine-readable metadata version of the conformance claim.

Sometimes, Web pages are created that will later have additional content added to them. For example, an email program, a blog, an article that allows users to add comments, or applications supporting user-contributed content. Another example would be a page, such as a portal or news site, composed of content aggregated from multiple contributors, or sites that automatically insert content from other sources over time, such as when advertisements are inserted dynamically.

In these cases, it is not possible to know at the time of original posting what the uncontrolled content of the pages will be. It is important to note that the uncontrolled content can affect the accessibility of the controlled content as well. Two options are available:

1. A determination of conformance can be made based on best knowledge. If a page of this type is monitored and repaired (non-conforming content is removed or brought into conformance) within two business days, then a determination or claim of conformance can be made since, except for errors in externally contributed content which are corrected or removed when encountered, the page conforms. No conformance claim can be made if it is not possible to monitor or correct non-conforming content;
OR

2. A "statement of partial conformance" may be made that the page does not conform, but could conform if certain parts were removed. The form of that statement would be, "This page does not conform, but would conform to WCAG 2.1 at level X if the following parts from uncontrolled sources were removed." In addition, the following would also be true of uncontrolled content that is described in the statement of partial conformance:

1. It is not content that is under the author's control.

2. It is described in a way that users can identify (e.g., they cannot be described as "all parts that we do not control" unless they are clearly marked as such.)

A "statement of partial conformance due to language" may be made when the page does not conform, but would conform if accessibility support existed for (all of) the language(s) used on the page. The form of that statement would be, "This page does not conform, but would conform to WCAG 2.1 at level X if accessibility support existed for the following language(s):"

abbreviation

shortened form of a word, phrase, or name where the abbreviation has not become part of the language

1. initialisms are shortened forms of a name or phrase made from the initial letters of words or syllables contained in that name or phrase

Not defined in all languages.

SNCF is a French initialism that contains the initial letters of the Société Nationale des Chemins de Fer, the French national railroad.

ESP is an initialism for extrasensory perception.

2. acronyms are abbreviated forms made from the initial letters or parts of other words (in a name or phrase) which may be pronounced as a word

NOAA is an acronym made from the initial letters of the National Oceanic and Atmospheric Administration in the United States.

accessibility supported

supported by users' assistive technologies as well as the accessibility features in browsers and other user agents

To qualify as an accessibility-supported use of a Web content technology (or feature of a technology), both 1 and 2 must be satisfied for a Web content technology (or feature):

1. The way that the Web content technology is used must be supported by users' assistive technology (AT). This means that the way that the technology is used has been tested for interoperability with users' assistive technology in the human language(s) of the content,
AND

2. The Web content technology must have accessibility-supported user agents that are available to users. This means that at least one of the following four statements is true:

1. The technology is supported natively in widely-distributed user agents that are also accessibility supported (such as HTML and CSS);
OR

2. The technology is supported in a widely-distributed plug-in that is also accessibility supported;
OR

3. The content is available in a closed environment, such as a university or corporate network, where the user agent required by the technology and used by the organization is also accessibility supported;
OR

4. The user agent(s) that support the technology are accessibility supported and are available for download or purchase in a way that:

does not cost a person with a disability any more than a person without a disability and

is as easy to find and obtain for a person with a disability as it is for a person without disabilities.

alternative for time-based media

ambiguous to users in general

the purpose cannot be determined from the link and all information of the Web page presented to the user simultaneously with the link (i.e., readers without disabilities would not know what a link would do until they activated it)

The word guava in the following sentence "One of the notable exports is guava" is a link. The link could lead to a definition of guava, a chart listing the quantity of guava exported or a photograph of people harvesting guava. Until the link is activated, all readers are unsure and the person with a disability is not at any disadvantage.

picture created by a spatial arrangement of characters or glyphs (typically from the 95 printable characters defined by ASCII)

assistive technology (as used in this document)

hardware and/or software that acts as a user agent, or along with a mainstream user agent, to provide functionality to meet the requirements of users with disabilities that go beyond those offered by mainstream user agents

Assistive technologies that are important in the context of this document include the following:

screen magnifiers, and other visual reading assistants, which are used by people with visual, perceptual and physical print disabilities to change text font, size, spacing, color, synchronization with speech, etc. in order to improve the visual readability of rendered text and images;

screen readers, which are used by people who are blind to read textual information through synthesized speech or braille;

text-to-speech software, which is used by some people with cognitive, language, and learning disabilities to convert text into synthetic speech;

speech recognition software, which may be used by people who have some physical disabilities;

alternative keyboards, which are used by people with certain physical disabilities to simulate the keyboard (including alternate keyboards that use head pointers, single switches, sip/puff and other special input devices.);

alternative pointing devices, which are used by people with certain physical disabilities to simulate mouse pointing and button activations.

audio description

narration added to the soundtrack to describe important visual details that cannot be understood from the main soundtrack alone

a time-based presentation that contains only audio (no video and no interaction)

switch back and forth between two visual states in a way that is meant to draw attention

blocks of text

more than one sentence of text

initialism for "Completely Automated Public Turing test to tell Computers and Humans Apart"

synchronized visual and/or text alternative for both speech and non-speech audio information needed to understand the media content

changes of context

major changes in the content of the Web page that, if made without user awareness, can disorient users who are not able to view the entire page simultaneously

Changes in context include changes of:

Opening a new window, moving focus to a different component, going to a new page (including anything that would look to a user as if they had moved to a new page) or significantly re-arranging the content of a page are examples of changes of context.

conformance

satisfying all the requirements of a given standard, guideline or specification

conforming alternate version

version that

1. conforms at the designated level, and

2. provides all of the same information and functionality in the same human language, and

3. is as up to date as the non-conforming content, and

4. for which at least one of the following is true:

1. the conforming version can be reached from the non-conforming page via an accessibility-supported mechanism, or

2. the non-conforming version can only be reached from the conforming version, or

3. the non-conforming version can only be reached from a conforming page that also provides a mechanism to reach the conforming version

See Understanding Conforming Alternate Versions

content (Web content)

context-sensitive help

contrast ratio

(L1 + 0.05) / (L2 + 0.05), where

correct reading sequence

any sequence where words and paragraphs are presented in an order that does not change the meaning of the content

visual angle of about 0.0213 degrees

A CSS pixel is the canonical unit of measure for all lengths and measurements in CSS. This unit is density-independent, and distinct from actual hardware pixels present in a display. User agents and operating systems should ensure that a CSS pixel is set as closely as possible to the CSS Values and Units Module Level 3 reference pixel [css3-values], which takes into account the physical dimensions of the display and the assumed viewing distance (factors that cannot be determined by content authors).

platform event that occurs when the trigger stimulus of a pointer is depressed

The down-event may have different names on different platforms, such as "touchstart" or "mousedown".

a sudden, unexpected situation or occurrence that requires immediate action to preserve health, safety, or property

if removed, would fundamentally change the information or functionality of the content, and information and functionality cannot be achieved in another way that would conform

extended audio description

audio description that is added to an audiovisual presentation by pausing the video so that there is time to add additional description

a pair of opposing changes in relative luminance that can cause seizures in some people if it is large enough and in the right frequency range

functionality

processes and outcomes achievable through user action

general flash and red flash thresholds

a flash or rapidly changing image sequence is below the threshold (i.e., content passes) if any of the following are true:

1. there are no more than three general flashes and / or no more than three red flashes within any one-second period; or

2. the combined area of flashes occurring concurrently occupies no more than a total of .006 steradians within any 10 degree visual field on the screen (25% of any 10 degree visual field on the screen) at typical viewing distance

where:

A general flash is defined as a pair of opposing changes in relative luminance of 10% or more of the maximum relative luminance where the relative luminance of the darker image is below 0.80; and where "a pair of opposing changes" is an increase followed by a decrease, or a decrease followed by an increase, and

A red flash is defined as any pair of opposing transitions involving a saturated red

Exception: Flashing that is a fine, balanced, pattern such as white noise or an alternating checkerboard pattern with "squares" smaller than 0.1 degree (of visual field at typical viewing distance) on a side does not violate the thresholds.

The current working definition in the field for "pair of opposing transitions involving a saturated red" is where, for either or both states involved in each transition, R/(R+ G + B) >= 0.8, and the change in the value of (R-G-B)x320 is > 20 (negative values of (R-G-B)x320 are set to zero) for both transitions. R, G, B values range from 0-1 as specified in "relative luminance" definition. [HARDING-BINNIE]

human language

language that is spoken, written or signed (through visual or tactile means) to communicate with humans

phrase whose meaning cannot be deduced from the meaning of the individual words and the specific words cannot be changed without losing the meaning

In English, "spilling the beans" means "revealing a secret." However, "knocking over the beans" or "spilling the vegetables" does not mean the same thing.

In Japanese, the phrase "さじを投げる" literally translates into "he throws a spoon," but it means that there is nothing he can do and finally he gives up.

In Dutch, "Hij ging met de kippen op stok" literally translates into "He went to roost with the chickens," but it means that he went to bed early.

image of text

text that has been rendered in a non-text form (e.g., an image) in order to achieve a particular visual effect

A person's name on a nametag in a photograph.

informative

for information purposes and not required for conformance

input error

information provided by the user that is not accepted

This includes:

1. Information that is required by the Web page but omitted by the user

2. Information that is provided by the user but that falls outside the required data format or values

words used in a particular way by people in a particular field

The word StickyKeys is jargon from the field of assistive technology/accessibility.

keyboard interface

interface used by software to obtain keystroke input

keyboard shortcut

alternative means of triggering an action by the pressing of one or more keys

large scale (text)

with at least 18 point or 14 point bold or font size that would yield equivalent size for Chinese, Japanese and Korean (CJK) fonts

legal commitments

transactions where the person incurs a legally binding obligation or benefit

A marriage license, a stock trade (financial and legal), a will, a loan, adoption, signing up for the army, a contract of any type, etc.

link purpose

nature of the result obtained by activating a hyperlink

information captured from a real-world event and transmitted to the receiver with no more than a broadcast delay

lower secondary education level

the two or three year period of education that begins after completion of six years of school and ends nine years after the beginning of primary education

This definition is based on the International Standard Classification of Education [].

process or technique for achieving a result

media alternative for text

motion animation

addition of steps between conditions to create the illusion of movement or to give a sense of a smooth transition

For example, an element which moves into place or changes size while appearing is considered to be animated. An element which appears instantly without transitioning is not using animation. Motion animation does not include changes of color, blurring or opacity.

text by which software can identify a component within Web content to the user

navigated in the order defined for advancing focus (from one element to the next) using a keyboard interface

non-text content

any content that is not a sequence of characters that can be programmatically determined or where the sequence is not expressing something in human language

required for conformance

on a full-screen window

stopped by user request and not resumed until requested by user

pointer input

input device that can target a specific coordinate (or set of coordinates) on a screen, such as a mouse, pen, or touch contact

See also Pointer Events pointer definition [pointerevents].

prerecorded

information that is not live

presentation

rendering of the content in a form to be perceived by users

primary education level

six year time period that begins between the ages of five and seven, possibly without any previous education

This definition is based on the International Standard Classification of Education [].

series of user actions where each action is required in order to complete an activity

Successful use of a series of Web pages on a shopping site requires users to view alternative products, prices and offers, select products, submit an order, provide shipping information and provide payment information.

An account registration page requires successful completion of a Turing test before the registration form can be accessed.

programmatically determined (programmatically determinable)

determined by software from author-supplied data provided in a way that different user agents, including assistive technologies, can extract and present this information to users in different modalities

programmatically determined link context

additional information that can be programmatically determined from relationships with a link, combined with the link text, and presented to users in different modalities

In HTML, information that is programmatically determinable from a link in English includes text that is in the same paragraph, list, or table cell as the link or in a table header cell that is associated with the table cell that contains the link.

programmatically set

set by software using methods that are supported by user agents, including assistive technologies

pure decoration

serving only an aesthetic purpose, providing no information, and having no functionality

The cover page of a dictionary has random words in very light text in the background.

real-time event

event that a) occurs at the same time as the viewing and b) is not completely generated by the content

A Webcast of a live performance (occurs at the same time as the viewing and is not prerecorded).

An on-line auction with people bidding (occurs at the same time as the viewing).

Live humans interacting in a virtual world using avatars (is not completely generated by the content and occurs at the same time as the viewing).

relationships

meaningful associations between distinct pieces of content

relative luminance

the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white

For the sRGB colorspace, the relative luminance of a color is defined as L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:

if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4

if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4

if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4

and RsRGB, GsRGB, and BsRGB are defined as:

The "^" character is the exponentiation operator. (Formula taken from [] and []).

relied upon (technologies that are)

the content would not conform if that technology is turned off or is not supported

text or number by which software can identify the function of a component within Web content

A number that indicates whether an image functions as a hyperlink, command button, or check box.

same functionality

same result when used

A submit "search" button on one Web page and a "find" button on another Web page may both have a field to enter a term and list topics in the Web site related to the term submitted. In this case, they would have the same functionality but would not be labeled consistently.

same relative order

satisfies a success criterion

the success criterion does not evaluate to 'false' when applied to the page

set of web pages

collection of web pages that share a common purpose and that are created by the same author, group or organization

Examples include a publication which is split across multiple Web pages, where each page contains one chapter or other significant section of the work. The publication is logically a single contiguous unit, and contains navigation features that enable access to the full set of pages.

sign language

a language using combinations of movements of the hands and arms, facial expressions, or body positions to convey meaning

sign language interpretation

translation of one language, generally a spoken language, into a sign language

single pointer

pointer input that operates with one point of contact with the screen, including single taps and clicks, double-taps and clicks, long presses, and path-based gestures

specific sensory experience

a sensory experience that is not purely decorative and does not primarily convey important information or perform a function

Examples include a performance of a flute solo, works of visual art etc.

dynamic property expressing characteristics of a user interface component that may change in response to user action or automated processes

States do not affect the nature of the component, but represent data associated with the component or user interaction possibilities. Examples include focus, hover, select, press, check, visited/unvisited, and expand/collapse.

status message

change in content that is not a change of context, and that provides information to the user on the success or results of an action, on the waiting state of an application, on the progress of a process, or on the existence of errors

1. The way the parts of a Web page are organized in relation to each other; and

2. The way a collection of Web pages is organized

style property

property whose value determines the presentation (e.g. font, color, size, location, padding, volume, synthesized speech prosody) of content elements as they are rendered (e.g. onscreen, via loudspeaker, via braille display) by user agents

Style properties can have several origins:

User agent default styles: The default style property values applied in the absence of any author or user styles. Some web content technologies specify a default rendering, others do not;

Author styles: Style property values that are set by the author as part of the content (e.g. in-line styles, author style sheets);

User styles: Style property values that are set by the user (e.g. via user agent interface settings, user style sheets)

supplemental content

additional content that illustrates or clarifies the primary content

An audio version of a Web page.

An illustration of a complex process.

A paragraph summarizing the major outcomes and recommendations made in a research study.

synchronized media

technology (Web content)

mechanism for encoding instructions to be rendered, played or executed by user agents

sequence of characters that can be programmatically determined, where the sequence is expressing something in human language

text alternative

Text that is programmatically associated with non-text content or referred to from text that is programmatically associated with non-text content. Programmatically associated text is text whose location can be programmatically determined from the non-text content.

An image of a chart is described in text in the paragraph after the chart. The short text alternative for the chart indicates that a description follows.

platform event that occurs when the trigger stimulus of a pointer is released

The up-event may have different names on different platforms, such as "touchend" or "mouseup".

used in an unusual or restricted way

words used in such a way that requires users to know exactly which definition to apply in order to understand the content correctly

The term "gig" means something different if it occurs in a discussion of music concerts than it does in article about computer hard drive space, but the appropriate definition can be determined from context. By contrast, the word "text" is used in a very specific way in WCAG 2.1, so a definition is supplied in the glossary.

any software that retrieves and presents Web content for users

Web browsers, media players, plug-ins, and other programs - including assistive technologies - that help in retrieving, rendering, and interacting with Web content.

user-controllable

data that is intended to be accessed by users

Name and address fields for a user's account.

user interface component

a part of the content that is perceived by users as a single control for a distinct function

An applet has a "control" that can be used to move through content by line or page or random access. Since each of these would need to have a name and be settable independently, they would each be a "user interface component."

user inactivity

any continuous period of time where no user actions occur

The method of tracking will be determined by the web site or application.

a time-based presentation that contains only video (no audio and no interaction)

object in which the user agent presents content

visually customized

the font, size, color, and background can be set

a non-embedded resource obtained from a single URI using HTTP plus any other resources that are used in the rendering or intended to be rendered together with it by a user agent

A Web resource including all embedded images and media.

A Web mail program built using Asynchronous JavaScript and XML (AJAX). The program lives entirely at http://example.com/mail, but includes an inbox, a contacts area and a calendar. Links or buttons are provided that cause the inbox, contacts, or calendar to display, but do not change the URI of the page as a whole.

A customizable portal site, where users can choose content to display from a set of different content modules.

When you enter "http://shopping.example.com/" in your browser, you enter a movie-like interactive shopping environment where you visually move around in a store dragging products off of the shelves around you and into a visual shopping cart in front of you. Clicking on a product causes it to be demonstrated with a specification sheet floating alongside. This might be a single-page Web site or just one page within a Web site.

This section contains a listing of common user interface component input purposes. The terms below are not keywords that must be used, but instead represent purposes that must be captured in the taxonomy adopted by a webpage. Where applicable, authors mark up controls with the chosen taxonomy to indicate the semantic purpose. This provides the potential for user agents and assistive technologies to apply personalized presentations that can enable more people to understand and use the content.

The list of input type purposes is based on the control purposes defined in the HTML 5.2 Autofill field section, but it is important to understand that a different technology may have some or all of the same concepts defined in its specification and only the concepts that are mapped to the meanings below are required.

The following input control purposes are intended to relate to the user of the content and pertain only to information related to that individual.

name - Full name

honorific-prefix - Prefix or title (e.g., "Mr.", "Ms.", "Dr.", "Mlle")

given-name - Given name (in some Western cultures, also known as the first name)

additional-name - Additional names (in some Western cultures, also known as middle names, forenames other than the first name)

family-name - Family name (in some Western cultures, also known as the last name or surname)

honorific-suffix - Suffix (e.g., "Jr.", "B.Sc.", "MBASW", "II")

nickname - Nickname, screen name, handle: a typically short name used instead of the full name

organization-title - Job title (e.g., "Software Engineer", "Senior Vice President", "Deputy Managing Director")

username - A username

new-password - A new password (e.g., when creating an account or changing a password)

current-password - The current password for the account identified by the username field (e.g., when logging in)

organization - Company name corresponding to the person, address, or contact information in the other fields associated with this field

street-address - Street address (multiple lines, newlines preserved)

address-line1 - Street address (one line per field, line 1)

address-line2 - Street address (one line per field, line 2)

address-line3 - Street address (one line per field, line 3)

address-level4 - The most fine-grained administrative level, in addresses with four administrative levels

address-level3 - The third administrative level, in addresses with three or more administrative levels

address-level2 - The second administrative level, in addresses with two or more administrative levels; in the countries with two administrative levels, this would typically be the city, town, village, or other locality within which the relevant street address is found

address-level1 - The broadest administrative level in the address, i.e., the province within which the locality is found; for example, in the US, this would be the state; in Switzerland it would be the canton; in the UK, the post town

country - Country code

country-name - Country name

postal-code - Postal code, post code, ZIP code, CEDEX code (if CEDEX, append "CEDEX", and the dissement, if relevant, to the address-level2 field)

cc-name - Full name as given on the payment instrument

cc-given-name - Given name as given on the payment instrument (in some Western cultures, also known as the first name)

cc-additional-name - Additional names given on the payment instrument (in some Western cultures, also known as middle names, forenames other than the first name)

cc-family-name - Family name given on the payment instrument (in some Western cultures, also known as the last name or surname)

cc-number - Code identifying the payment instrument (e.g., the credit card number)

cc-exp - Expiration date of the payment instrument

cc-exp-month - Month component of the expiration date of the payment instrument

cc-exp-year - Year component of the expiration date of the payment instrument

cc-csc - Security code for the payment instrument (also known as the card security code (CSC), card validation code (CVC), card verification value (CVV), signature panel code (SPC), credit card ID (CCID), etc)

cc-type - Type of payment instrument

transaction-currency - The currency that the user would prefer the transaction to use

transaction-amount - The amount that the user would like for the transaction (e.g., when entering a bid or sale price)

language - Preferred language

bday - Birthday

bday-day - Day component of birthday

bday-month - Month component of birthday

bday-year - Year component of birthday

sex - Gender identity (e.g., Female, Fa'afafine)

url - Home page or other Web page corresponding to the company, person, address, or contact information in the other fields associated with this field

photo - Photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field

tel - Full telephone number, including country code

tel-country-code - Country code component of the telephone number

tel-national - Telephone number without the county code component, with a country-internal prefix applied if applicable

tel-area-code - Area code component of the telephone number, with a country-internal prefix applied if applicable

tel-local - Telephone number without the country code and area code components

tel-local-prefix - First part of the component of the telephone number that follows the area code, when that component is split into two components

tel-local-suffix - Second part of the component of the telephone number that follows the area code, when that component is split into two components

tel-extension - Telephone number internal extension code

email - E-mail address

impp - URL representing an instant messaging protocol endpoint (for example, "aim:goim?screenname=example" or "xmpp:fred@example.net")

Additional information about participation in the Accessibility Guidelines Working Group (AG WG) can be found on the Working Group home page.

Jake Abma (Invited Expert)

Shadi Abou-Zahra (W3C)

Chuck Adams (Oracle Corporation)

Amani Ali (Nomensa)

Jim Allan (Invited Expert)

Paul Adam (Deque Systems, Inc.)

Christopher Auclair (VitalSource | Ingram Content Group)

Jon Avila (Level Access)

Tom Babinszki (IBM Corporation)

Bruce Bailey (U.S. Access Board)

Renaldo Bernard (University of Southampton)

Chris Blouch (Level Access)

Denis Boudreau (Deque Systems, Inc.)

Judy Brewer (W3C)

Shari Butler (Pearson plc)

Thaddeus Cambron (Invited Expert)

Alastair Campbell (Nomensa)

Laura Carlson (Invited Expert)

Louis Cheng (Google)

Pietro Cirrincione (Invited Expert)

Vivienne Conway (Web Key IT Pty Ltd)

Michael Cooper (W3C)

Romain Deltour (DAISY Consortium)

Wayne Dick (Knowbility, Inc)

Chaohai Ding (University of Southampton)

Kim Dirks (Thompson Reuters)

Shwetank Dixit (BarrierBreak Technologies)

Anthony Doran (TextHelp)

E.A. Draffan (University of Southampton)

Eric Eggert (W3C)

Michael Elledge (Invited Expert)

Wilco Fiers (Deque Systems, Inc.)

Detlev Fischer (Invited Expert)

John Foliot (Deque Systems, Inc.)

Matt Garrish (DAISY Consortium)

Alistair Garrison (Level Access)

Michael Gower (IBM Corporation)

Jon Gunderson

Markku Hakkinen (Educational Testing Service)

Katie Haritos-Shea (Knowbility, Inc)

Andy Heath (Invited Expert)

Shawn Henry (W3C)

Thomas Hoffman (Educational Testing Service)

Sarah Horton (The Paciello Group, LLC)

Stefan Johansson (Invited Expert)

Marc Johlic (IBM Corporation)

Rick Johnson (VitalSource | Ingram Content Group)

Crystal Jones (Microsoft Corporation)

Andrew Kirkpatrick (Adobe)

John Kirkwood (Invited Expert)

Jason Kiss (Department of Internal Affairs, New Zealand Government)

Maureen Kraft (IBM Corporation)

JaEun Ku (University of Illinois at Urbana-Champaign)

Patrick Lauke (The Paciello Group, LLC)

Shawn Lauriat (Google, Inc.)

Steve Lee (Invited Expert)

Alex Li (Microsoft Corporation)

Chris Loiselle (Invited Expert)

Greg Lowney (Invited Expert)

Adam Lund (Thomson Reuters)

David MacDonald (Invited Expert)

Erich Manser (IBM Corporation)

Kurt Mattes (Deque Systems, Inc.)

Scott McCormack (Level Access)

Chris McMeeking (Deque Systems, Inc.)

Jan McSorley (Pearson plc)

Neil Milliken (Unify Software and Solutions)

Rachael Montgomery (MITRE Corporation)

Mary Jo Mueller (IBM Corporation)

Brooks Newton (Thomson Reuters)

James Nurthen (Oracle Corporation)

Joshue O Connor (Invited Expert)

Sailesh Panchang (Deque Systems, Inc.)

Charu Pandhi (IBM Corporation)

Kim Patch (Invited Expert)

Melanie Philipp (Deque Systems, Inc.)

Mike Pluke (Invited Expert)

Ian Pouncey (The Paciello Group, LLC)

Ruoxi Ran (W3C)

Stephen Repsher (The Boeing Company)

Jan Richards (Invited Expert)

John Rochford (Invited Expert)

Marla Runyan (Invited Expert)

Stefan Schnabel (SAP SE)

Ayelet Seeman (Invited Expert)

Lisa Seeman-Kestenbaum (Invited Expert)

Glenda Sims (Deque Systems, Inc.)

Avneesh Singh (DAISY Consortium)

David Sloan (The Paciello Group, LLC)

Alan Smith (Invited Expert)

Jim Smith (Unify Software and Solutions)

Adam Solomon (Invited Expert)

Jaeil Song (National Information Society Agency (NIA))

Jeanne Spellman (The Paciello Group, LLC)

Makoto Ueki (Invited Expert)

Jatin Vaishnav (Deque Systems, Inc.)

Gregg Vanderheiden (Raising the Floor)

Evangelos Vlachogiannis (Fraunhofer Gesellschaft)

Kathleen Wahlbin (Invited Expert)

Can Wang (Zhejiang University)

Léonie Watson (The Paciello Group, LLC)

Jason White (Educational Testing Service)

Mark Wilcock (Unify Software and Solutions)

Paul Adam, Jenae Andershonis, Wilhelm Joys Andersen, Andrew Arch, Avi Arditti, Aries Arditi, Mark Barratt, Mike Barta, Sandy Bartell, Kynn Bartlett, Chris Beer, Charles Belov, Marco Bertoni, Harvey Bingham, Chris Blouch, Paul Bohman, Frederick Boland, Denis Boudreau, Patrice Bourlon, Andy Brown, Dick Brown, Doyle Burnett, Raven Calais, Ben Caldwell, Tomas Caspers, Roberto Castaldo, Sofia Celic-Li, Sambhavi Chandrashekar, Mike Cherim, Jonathan Chetwynd, Wendy Chisholm, Alan Chuter, David M Clark, Joe Clark, Darcy Clarke, James Coltham, Earl Cousins, James Craig, Tom Croucher, Pierce Crowell, Nir Dagan, Daniel Dardailler, Geoff Deering, Sébastien Delorme, Pete DeVasto, Iyad Abu Doush, Sylvie Duchateau, Cherie Eckholm, Roberto Ellero, Don Evans, Gavin Evans, Neal Ewers, Steve Faulkner, Bengt Farre, Lainey Feingold, Wilco Fiers, Michel Fitos, Alan J. Flavell, Nikolaos Floratos, Kentarou Fukuda, Miguel Garcia, P.J. Gardner, Alistair Garrison, Greg Gay, Becky Gibson, Al Gilman, Kerstin Goldsmith, Michael Grade, Karl Groves, Loretta Guarino Reid, Jon Gunderson, Emmanuelle Gutiérrez y Restrepo, Brian Hardy, Eric Hansen, Benjamin Hawkes-Lewis, Sean Hayes, Shawn Henry, Hans Hillen, Donovan Hipke, Bjoern Hoehrmann, Allen Hoffman, Chris Hofstader, Yvette Hoitink, Martijn Houtepen, Carlos Iglesias, Richard Ishida, Jonas Jacek, Ian Jacobs, Phill Jenkins, Barry Johnson, Duff Johnson, Jyotsna Kaki, Shilpi Kapoor, Leonard R. Kasday, Kazuhito Kidachi, Ken Kipness, Johannes Koch, Marja-Riitta Koivunen, Preety Kumar, Kristjan Kure, Andrew LaHart, Gez Lemon, Chuck Letourneau, Aurélien Levy, Harry Loots, Scott Luebking, Tim Lacy, Jim Ley, Alex Li, William Loughborough, N Maffeo, Mark Magennis, Kapsi Maria, Luca Mascaro, Matt May, Sheena McCullagh, Liam McGee, Jens Oliver Meiert, Niqui Merret, Jonathan Metz, Alessandro Miele, Steven Miller, Mathew J Mirabella, Matt May, Marti McCuller, Sorcha Moore, Charles F. Munat, Robert Neff, Charles Nevile, Liddy Nevile, Dylan Nicholson, Bruno von Niman, Tim Noonan, Sebastiano Nutarelli, Graham Oliver, Sean B. Palmer, Devarshi Pant, Nigel Peck, Anne Pemberton, David Poehlman, Ian Pouncey, Charles Pritchard, Kerstin Probiesch, W Reagan, Adam Victor Reed, Chris Reeve, Chris Ridpath, Lee Roberts, Mark Rogers, Raph de Rooij, Gregory J. Rosmaita, Matthew Ross, Sharron Rush, Joel Sanda, Janina Sajka, Roberto Scano, Gordon Schantz, Tim van Schie, Wolf Schmidt, Stefan Schnabel, Cynthia Shelly, Glenda Sims, John Slatin, Becky Smith, Jared Smith, Andi Snow-Weaver, Neil Soiffer, Mike Squillace, Michael Stenitzer, Diane Stottlemyer, Christophe Strobbe, Sarah J Swierenga, Jim Thatcher, Terry Thompson, Justin Thorp, David Todd, Mary Utt, Jean Vanderdonckt, Carlos A Velasco, Eric Velleman, Gijs Veyfeyken, Dena Wainwright, Paul Walsch, Daman Wandke, Richard Warren, Elle Waters, Takayuki Watanabe, Gian Wild, David Wooley, Wu Wei, Kenny Zhang, Leona Zumbo.

This publication has been funded in part with U.S. Federal funds from the Health and Human Services, National Institute on Disability, Independent Living, and Rehabilitation Research (NIDILRR), initially under contract number ED-OSE-10-C-0067 and now under contract number HHSP23301500054C. The content of this publication does not necessarily reflect the views or policies of the U.S. Department of Health and Human Services or the U.S. Department of Education, nor does mention of trade names, commercial products, or organizations imply endorsement by the U.S. Government.

[HARDING-BINNIE]

Independent Analysis of the ITC Photosensitive Epilepsy Calibration Test Tape. Harding G. F. A.; Binnie, C.D..2002.

[IEC-4WD]

IEC/4WD 61966-2-1: Colour Measurement and Management in Multimedia Systems and Equipment - Part 2.1: Default Colour Space - sRGB. May 5, 1998.

[RFC2119]

[sRGB]

[UAAG10]

[UNESCO]

[WAI-WEBCONTENT]

# data[].attributes.attachment_link.title
Web Content Accessibility Guidelines (WCAG) 2.1

# data[].attributes.attachment_link.description
Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address every user need for people with these disabilities.

# data[].attributes.body
Mots clés par mois

# data[].attributes.attachment_link.title
Recherchez les mots clés de votre campagne grâce à l'Outil de planification des mots clés | Google Ads

# data[].attributes.attachment_link.description
Diffusez vos annonces auprès des bons clients grâce à l'Outil de planification des mots clés de Google. Découvrez comment rechercher des mots clés et identifier ceux qui sont les plus adaptés pour votre campagne.

# data[].attributes.attachment_link.provider_name
Blog Business / WebMarketing / Management

# data[].attributes.attachment_link.readable_text
Il y'a encore peu de temps, un entrepreneur me questionnait: " Quel est pour toi le meilleur moyen d'étendre la notoriété de mon business en ligne, sans avoir à dépenser des fortunes en publicité? " Ma réponse a été: " Sans aucun doute, le SEO ".

Un bon référencement naturel ne se construit pas du jour au lendemain, et demande beaucoup d'efforts. Mais le jeu en vaut la chandelle: un bon SEO garantit une visibilité pérenne, qui amène son lot de conversions quotidiennes, pendant plusieurs années...

Gagner la bataille des résultats de recherches organiques, c'est gagner sa place de " rentier " au moins pour un temps.

C'est pourquoi j'ai préparé pour vous cette " checklist " de 25 bonnes pratiques SEO on-site pour vous assurer de maximiser vos chances d'apparaître en haut des résultats de Google.

La checklist pour renforcer son SEO on-site

Les " classiques " du SEO à réaliser en priorité

1) Assurez vous que l 'indexation de vos pages n'est pas bloquée à cause d'une balise NoIndex, d'une en-tête HTTP X-Robots-Tag ou d'une indication de non indexation dans votre fichier robot.txt.

2) Vérifiez que toutes vos pages ont une balise META <title> qui ne dépasse pas 65 caractères idéalement.

3) Rédigez des balises META <description> entre 70 et 320 caractères qui donnent envie aux internautes de cliquer.

4) Vos URLs doivent être compréhensibles par un humain, et idéalement ne dépassent pas 115 caractères.

Votre contenu à proprement dit

5) Rédigez des contenus de plus de 500 mots, voire encore plus longs si vous le pouvez (la longueur du texte compte pour votre référencement).

6) Utilisez les mots justes et un vocabulaire riche dans vos contenus pour maximiser votre impact SEO (aidez vous d'un outil).

7) Utilisez des images dans vos contenus, en prenant soin de renseigner les balises <alt> et <title> de vos visuels.

8) Prenez soins de garder la taille de vos images la plus légère possible pour ne pas impacter défavorablement votre temps de chargement.

9) " Stratégisez " votre maillage interne en utilisant un outil comme Google Search Console.

Soigner la structuration HTML

10) Structurez votre contenu avec des titres H1 - H6.

11) Si vous avez un contenu qui se lit sur plusieurs pages, utilisez les balises de pagination rel= "next " et rel= "prev ".

12) Si votre contenu s'y prête, n'oubliez pas d'ajouter toutes les micro-données possibles (voir schema.org).

13) Votre contenu texte doit idéalement représenter plus de 10% de votre code HTML.

14) N'utilisez pas de liens ou de textes cachés (par exemple un texte blanc sur fond blanc) au risque que Google considère la manœuvre comme une tentative malhonnête pour essayer d'influencer votre classement dans les moteurs de recherche.

L'expérience utilisateur a aussi un impact SEO

15) Assurez-vous que votre site est compatible avec les appareils mobiles et évitez les erreurs UX basiques d'un site mobile.

16) Assurez vous de garder une page légère, pour favoriser un temps de chargement rapide.

17) Corrigez toutes les erreurs d'exploitation, et faites la chasse aux pages 404.

18) Déliez tous les liens cassés qui peuvent être présents sur votre site.

19) Ajoutez une Favicon à votre site, qui apparaisse sur tous les navigateurs.

20) Ne pensez pas qu'aux moteurs de recherche et cherchez à développer une vraie marque sur la toile pour gagner la bataille du " préférencement ".

Les éléments techniques SEO à prendre en compte

21) Assurez-vous d'avoir un sitemap XML

22) Évitez le duplicate content " bête " à cause des deux variantes de votre site, avec ou sans les " www " (par exemple, http://www.monsite.com et http://monsite.com). Utilisez une balise <canonical> pour déclarer quelle variante vous voulez voir dans les résultats de recherche.

23) Eviter que les éventuels paramètres de vos URLs (ex: quand vous filtrez un catalogue produit) génèrent du duplicate content, ou cannibalisent le SEO d'autres pages.

24) De manière générale, évitez les techniques de cloaking (servir un contenu différent aux moteurs de recherche et aux utilisateurs)

25) Passez au protocole HTTPs ( tout en évitant ses pièges SEO)

Soyez patients et outillés !

Bien sûr, positionner un site sur les cimes de Google prends du temps, et bien plus que ces 25 facteurs on-site... Pour relever le challenge SEO, vous devrez vous mettre dans la peau d'un " coureur de fond " et vous battre aussi sur le front du netlinking et de l'optimisation des taux de conversion.

Le SEO, c'est un engagement dans la durée.

En réalité, 80% des pages web qui apparaissent dans le Top 10 de Google ont plus de 1 an. C'est pourquoi le succès en SEO ne peut vraiment s'évaluer que sur le long terme.

La bonne nouvelle, c'est qu'être bien outillé peut vous faire gagner un temps précieux dans votre quête. Un outil d'analyse seo comme sitechecker.pro va vous permettre d'analyser plus de 20 critères de cette liste, d'un seul coup.

Même si je trouve le système de scoring de sitechecker.pro très sévère (quelques erreurs et vous avez une note inférieure à 10 / 100),

il n'en reste pas moins que l'outil est très pratique pour dresser un audit SEO, en un éclair.

En créant un compte, vous aurez également accès au crawler.

C'est un second outil qui dresse la liste des pages de votre site avec leur " poids SEO ".

En un clin d'œil, vous obtenez un diagnostic de chaque URL, classées par ordre de priorité.

Vous pouvez cerner la popularité de la page au travers du nombre de liens de toutes sortes qui concerne cette page.

L'outil vous pousse à l'action en formulant des recommandations pragmatiques pour améliorer votre SEO (colonne " Issues ").

FAQ : Checklist SEO

# data[].attributes.attachment_link.title
Checklist #SEO : 25 bonnes pratiques on-site pour renforcer votre référencement naturel

# data[].attributes.attachment_link.description
Il y'a encore peu de temps, un entrepreneur me questionnait: " Quel est pour toi le meilleur moyen d'étendre la notoriété de mon business en ligne, sans avoir à dépenser des fortunes en publicité? " Ma réponse a été: " Sans aucun doute, le SEO ".

# data[].attributes.attachment_link.readable_text
Bring design and dev closer

Introducing Dev Mode, a new space in Figma for developers. Bring clarity to designs and give developers the tools they need to translate them into code.

Explore Dev Mode

# data[].attributes.attachment_link.title
Figma: The Collaborative Interface Design Tool

# data[].attributes.attachment_link.description
Figma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform.

# data[].attributes.attachment_link.readable_text
Plusieurs techniques peuvent être utilisées pour créer des wireframes. Découvrons-les dans ce chapitre.

Créez des wireframes papier

Il est temps, à présent, de commencer à réaliser les wireframes de votre service. Comme je le disais précédemment, vous pouvez réaliser des maquettes sous la forme de croquis en utilisant, si vous le souhaitez, des modèles d'interfaces pour vous aider. Faire des wireframes papier présente un avantage : cela permet de générer des idées rapidement, que vous pourrez affiner au fur et à mesure de manière très rapide. Cela va donc vous permettre de commencer à poser les principes de vos écrans.

Dessiner permet également de visualiser rapidement ce que vous avez en tête et de vérifier si vos idées sont intéressantes ou pas.

Bien évidemment, le niveau de fidélité de vos maquettes sera bas, car vous ne pouvez pas dessiner tous les contenus de manière très détaillée, mais ce n'est pas important. Vous aurez le temps d'affiner vos propositions en utilisant des logiciels spécialisés.

Pendant cette étape, vous allez principalement travailler le zoning de vos écrans, c'est-à-dire la répartition et l'organisation de vos contenus.

Munissez-vous d'une feuille blanche et d'un feutre noir, c'est parti ! 🖊

Croquis d'écrans

Sur les sites de Sneakpeekit.com et Sketchsheets.com, vous allez pouvoir télécharger des templates écrans.

Si vraiment vous n'êtes pas à l'aise, il existe un site uistencils.com sur lequel vous pouvez acheter des accessoires qui vont vous aider à faire vos croquis.

Pochoir pour croquis

Envie d'un outil plus collaboratif ? Sketchboard vous permet de partager vos intentions et de collaborer en même temps avec votre équipe projet sur vos croquis. Enfin, dernier point, n'oubliez pas qu'il est important d'annoter vos wireframes papier avec des actions utilisateurs, par exemple.

Créez des wireframes dans des logiciels adaptés

Un niveau de fidélité moyen et haut

Une fois que vos intentions sont claires, vous allez peaufiner davantage vos wireframes et les réaliser grâce à un logiciel spécifique (dans un plan de travail). Les plus connus et utilisés par les designers sont Sketch, pour ceux qui travaillent sur Mac, et Adobe Xd, car vous pouvez aussi travailler la partie prototypage dans ces mêmes logiciels. Ceux-ci sont très complets.

Terminé le temps où l'on réalisait des écrans dans Illustror ou Photoshop ! Maintenant, il existe plusieurs outils pour réaliser un prototype, que l'on verra dans la seconde partie du cours.

Dans Sketch, vous allez :

Capture de l'interface Sketch

Dans Adobe Xd, vous allez :

Capture de l'interface Adobe Xd

Attention, ces logiciels ne sont pas gratuits. Vous devez en avoir la licence. Adobe Xd propose cependant un starter kit gratuit.

N'oubliez pas, comme nous l'avons dit dans le chapitre précédent : les wireframes sont des maquettes filaires sans couleurs. Mais ceux que vous allez réaliser dans un logiciel seront plus détaillés que vos intentions papier qui sont davantage focalisées sur le zoning. N'hésitez donc pas à utiliser des contenus réels.

Pour vous aider à formaliser vos idées, vous pouvez vous aider de ressources disponibles pour réaliser vos wireframes. Sur Adobe Xd, vous pouvez télécharger un kit d'assets graphiques nommé Wires qui propose des éléments par type de contenu.

Kit Wire disponible sur Adobe Xd

Vous pourrez choisir plusieurs représentations pour :

Le kit est disponible pour une conception desktop et mobile.

Sur Sketch, vous avez également accès à différents assets disponibles : Assets iOS & Android, Material Design, etc., via les sites :

Système de grille et responsive design

Je vous conseille d'utiliser un système de grille pour réaliser vos wireframes.

Une grille se compose de plusieurs colonnes qui vont vous servir à organiser les éléments de votre interface de manière cohérente. Généralement, on a une grille de 12 colonnes pour une résolution desktop et une grille à 6 colonnes pour un affichage mobile.

Vous allez représenter vos wireframes dans un logiciel spécifique (Sketch, Adobe Xd, etc.). L'interface que vous allez représenter doit être accessible depuis plusieurs devices (mobile, desktop, tablette, etc.) et donc plusieurs résolutions. Vous allez donc devoir faire du responsive design. L'approche responsive, c'est l'adaptation de l'interface à différents écrans que vous ciblez : cela peut concerner un site web, un mobile, une tablette, une montre connectée, etc.

Aujourd'hui, il est indispensable de prendre cet aspect en compte lorsque vous concevez une interface accessible depuis plusieurs écrans. Il existe tellement de tailles d'écrans que l'on ne peut plus prendre en compte uniquement les formats traditionnels comme le format 1 024 × 768 px.

Il faut également penser à l'expérience que vous proposez en fonction du support pour que celle-ci soit pertinente et cohérente pour l'utilisateur. D'ailleurs, vous avez peut-être remarqué que certains services ne proposent pas les mêmes fonctionnalités lorsqu'ils sont utilisés sur le web ou sur le mobile. C'est normal ! Les contextes d'usage et les besoins de vos utilisateurs cibles ne sont certainement pas les mêmes selon les différents supports. C'est pour cette raison que vous devez revoir pas mal de choses quand vous faites du responsive design. Réfléchissez à l'expérience utilisateur multi-écrans.

Généralement, vous devez commencer à représenter vos écrans en commençant par le support le plus petit et donc le plus complexe et contraignant pour la conception. Si vous faites un site web qui s'adapte à différents résolutions et devices, vous devez commencer par concevoir votre UX en pensant au support mobile. Vous serez donc plus limité(e) pour organiser vos contenus. C'est ce que l'on appelle l'approche mobile first !

Une fois que vous aurez réalisé la plus petite surface, vous allez faire la plus grande et vérifier la faisabilité de vos propositions sur des versions intermédiaires.

N'oubliez pas d'adapter vos éléments à la taille des écrans : veillez donc à ne pas fournir d'éléments trop petits comme des textes ou des éléments d'interaction sur mobile. N'hésitez pas à collaborer avec un UI designer qui pourra vous aider sur ces aspects.

Vous pouvez également consulter des guidelines comme celui du Material Design qui vous donnera des règles à respecter.

Si vous utilisez Sketch, vous pouvez installer un plugin qui se nomme Anima pour gérer le responsive. Anima vous permet de travailler sur un seul Artboard (plan de travail) qui adapte votre design en fonction de la taille. Vous pouvez aller jusqu'à la publication de votre site en HTML. Intéressant, non ? 😀

En résumé

Les wireframes peuvent avoir différents niveaux de fidélité. À vous de choisir leur représentation en fonction de ce que vous souhaitez montrer. Pour une organisation de contenus, vous pouvez opter pour le support papier, puis passer sur un logiciel adapté pour les détailler davantage et ajouter du contenu plus réaliste. Quelle que soit la représentation retenue, n'oubliez pas de prévoir des étapes d'itérations avec votre équipe projet pour vous assurer que vos wireframes reflètent bien les solutions envisagées en atelier(s) d'idéation.

# data[].attributes.attachment_link.description
Plusieurs techniques peuvent être utilisées pour créer des wireframes. Découvrons-les dans ce chapitre. Créez des wireframes papier Il est temps, à présent, de commencer à réaliser les wireframes de votre service. Comme je le disais précédemment, vous pouvez réaliser des maquettes sous la forme de croquis en utilisant, si vous le souhaitez, des modèles d'interfaces pour vous aider.

# data[].attributes.attachment_link.description
Découvrez comment les personnes en situation de handicap utilisent les technologies d’assistance. Évaluez les barrières à l’accessibilité numérique et concevez des contenus inclusifs grâce aux règles WCAG, du design visuel aux interactions.

# data[].attributes.attachment_link.title
Mobile-Friendly Test - Google Search Console

# data[].attributes.attachment_link.readable_text
W3 Total Cache improves the SEO and user experience of your site by increasing website performance, reducing download times via features like content delivery network (CDN) integration.

The only web host agnostic WordPress Performance Optimization (WPO) framework recommended by countless web developers and web hosts. Trusted by numerous companies like: AT&T, stevesouders.com, mattcutts.com, mashable.com, smashingmagazine.com, makeuseof.com, kiss925.com, pearsonified.com, lockergnome.com, johnchow.com, ilovetypography.com, webdesignerdepot.com, css-tricks.com and tens of thousands of others.

En détail :

Improvements in search engine result page rankings, especially for mobile-friendly websites and sites that use SSL

At least 10x improvement in overall site performance (Grade A in WebPagetest or significant Google Page Speed improvements) when fully configured

Improved conversion rates and " site performance " which affect your site's rank on Google.com

" Instant " repeat page views: browser caching

Optimized progressive render: pages start rendering quickly and can be interacted with more quickly

Reduced page load time: increased visitor time on site; visitors view more pages

Improved web server performance; sustain high traffic periods

Up to 80% bandwidth savings via minify and HTTP compression of HTML, CSS, JavaScript and feeds

KEY FEATURES
Improve the user experience for your readers without having to change WordPress, your theme, your plugins or how you produce your content.

What users have to say:

Qui dois je remercier pour tout ça ?

Il est assez difficile de se rappeler de tous ceux qui ont partagé leurs réflexions, leurs codes et expériences au cours des années, mais voici quelques noms pour vous aider à démarrer :

La traduction a été effectuée par la communauté WordPress francophone .
Merci de tendre la main à tous ces gens et de soutenir leurs projets si vous y êtes enclins.

1. Deactivate and uninstall any other caching plugin you may be using. Pay special attention if you have customized the rewrite rules for fancy permalinks, have previously installed a caching plugin or have any browser caching rules as W3TC will automate management of all best practices. Also make sure wp-content/ and wp-content/uploads/ (temporarily) have 777 permissions before proceeding, e.g. in the terminal: # chmod 777 /var/www/vhosts/domain.com/httpdocs/wp-content/ using your web hosting control panel or your FTP / SSH account.

2. Login as an administrator to your WordPress Admin account. Using the " Add New " menu option under the " Plugins " section of the navigation, you can either search for: w3 total cache or if you've downloaded the plugin already, click the " Upload " link, find the .zip file you download and then click " Install Now ". Or you can unzip and FTP upload the plugin to your plugins directory (wp-content/plugins/). In either case, when done wp-content/plugins/w3-total-cache/ should exist.

3. Locate and activate the plugin on the " Plugins " page. Page caching will automatically be running in basic mode. Set the permissions of wp-content and wp-content/uploads back to 755, e.g. in the terminal: # chmod 755 /var/www/vhosts/domain.com/httpdocs/wp-content/.

4. Now click the " Settings " link to proceed to the " General Settings " tab; in most cases, " disk enhanced " mode for page cache is a " good " starting point.

5. The " Compatibility mode " option found in the advanced section of the " Page Cache Settings " tab will enable functionality that optimizes the interoperablity of caching with WordPress, is disabled by default, but highly recommended. Years of testing in hundreds of thousands of installations have helped us learn how to make caching behave well with WordPress. The tradeoff is that disk enhanced page cache performance under load tests will be decreased by ~20% at scale.

6. Recommended: On the " Minify Settings " tab, all of the recommended settings are preset. If auto mode causes issues with your web site's layout, switch to manual mode and use the help button to simplify discovery of your CSS and JS files and groups. Pay close attention to the method and location of your JS group embeddings. See the plugin's FAQ for more information on usage.

7. Recommended: On the " Browser Cache " tab, HTTP compression is enabled by default. Make sure to enable other options to suit your goals.

8. Recommended: If you already have a content delivery network (CDN) provider, proceed to the " Content Delivery Network " tab and populate the fields and set your preferences. If you do not use the Media Library, you will need to import your images etc into the default locations. Use the Media Library Import Tool on the " Content Delivery Network " tab to perform this task. If you do not have a CDN provider, you can still improve your site's performance using the " Self-hosted " method. On your own server, create a subdomain and matching DNS Zone record; e.g. static.domain.com and configure FTP options on the " Content Delivery Network " tab accordingly. Be sure to FTP upload the appropriate files, using the available upload buttons.

9. Optional: On the " Database Cache " tab, the recommended settings are preset. If using a shared hosting account use the " disk " method with caution, the response time of the disk may not be fast enough, so this option is disabled by default. Try object caching instead for shared hosting.

10. Optional: On the " Object Cache " tab, all of the recommended settings are preset. If using a shared hosting account use the " disk " method with caution, the response time of the disk may not be fast enough, so this option is disabled by default. Test this option with and without database cache to ensure that it provides a performance increase.

11. Optional: On the " User Agent Groups " tab, specify any user agents, like mobile phones if a mobile theme is used.

Installation Instructions

1. Deactivate and uninstall any other caching plugin you may be using. Pay special attention if you have customized the rewrite rules for fancy permalinks, have previously installed a caching plugin or have any browser caching rules as W3TC will automate management of all best practices. Also make sure wp-content/ and wp-content/uploads/ (temporarily) have 777 permissions before proceeding, e.g. in the terminal: # chmod 777 /var/www/vhosts/domain.com/httpdocs/wp-content/ using your web hosting control panel or your FTP / SSH account.

2. Login as an administrator to your WordPress Admin account. Using the " Add New " menu option under the " Plugins " section of the navigation, you can either search for: w3 total cache or if you've downloaded the plugin already, click the " Upload " link, find the .zip file you download and then click " Install Now ". Or you can unzip and FTP upload the plugin to your plugins directory (wp-content/plugins/). In either case, when done wp-content/plugins/w3-total-cache/ should exist.

3. Locate and activate the plugin on the " Plugins " page. Page caching will automatically be running in basic mode. Set the permissions of wp-content and wp-content/uploads back to 755, e.g. in the terminal: # chmod 755 /var/www/vhosts/domain.com/httpdocs/wp-content/.

4. Now click the " Settings " link to proceed to the " General Settings " tab; in most cases, " disk enhanced " mode for page cache is a " good " starting point.

5. The " Compatibility mode " option found in the advanced section of the " Page Cache Settings " tab will enable functionality that optimizes the interoperablity of caching with WordPress, is disabled by default, but highly recommended. Years of testing in hundreds of thousands of installations have helped us learn how to make caching behave well with WordPress. The tradeoff is that disk enhanced page cache performance under load tests will be decreased by ~20% at scale.

6. Recommended: On the " Minify Settings " tab, all of the recommended settings are preset. If auto mode causes issues with your web site's layout, switch to manual mode and use the help button to simplify discovery of your CSS and JS files and groups. Pay close attention to the method and location of your JS group embeddings. See the plugin's FAQ for more information on usage.

7. Recommended: On the " Browser Cache " tab, HTTP compression is enabled by default. Make sure to enable other options to suit your goals.

8. Recommended: If you already have a content delivery network (CDN) provider, proceed to the " Content Delivery Network " tab and populate the fields and set your preferences. If you do not use the Media Library, you will need to import your images etc into the default locations. Use the Media Library Import Tool on the " Content Delivery Network " tab to perform this task. If you do not have a CDN provider, you can still improve your site's performance using the " Self-hosted " method. On your own server, create a subdomain and matching DNS Zone record; e.g. static.domain.com and configure FTP options on the " Content Delivery Network " tab accordingly. Be sure to FTP upload the appropriate files, using the available upload buttons.

9. Optional: On the " Database Cache " tab, the recommended settings are preset. If using a shared hosting account use the " disk " method with caution, the response time of the disk may not be fast enough, so this option is disabled by default. Try object caching instead for shared hosting.

10. Optional: On the " Object Cache " tab, all of the recommended settings are preset. If using a shared hosting account use the " disk " method with caution, the response time of the disk may not be fast enough, so this option is disabled by default. Test this option with and without database cache to ensure that it provides a performance increase.

11. Optional: On the " User Agent Groups " tab, specify any user agents, like mobile phones if a mobile theme is used.

Why does speed matter?

Search engines like Google, measure and factor in the speed of web sites in their ranking algorithm. When they recommend a site they want to make sure users find what they're looking for quickly. So in effect you and Google should have the same objective.

Speed is among the most significant success factors web sites face. In fact, your site's speed directly affects your income (revenue) - it's a fact. Some high traffic sites conducted research and uncovered the following:

Google.com: +500 ms (speed decrease) -> -20% traffic loss [1]

Yahoo.com: +400 ms (speed decrease) -> -5-9% full-page traffic loss (visitor left before the page finished loading) [2]

Amazon.com: +100 ms (speed decrease) -> -1% sales loss [1]

A thousandth of a second is not a long time, yet the impact is quite significant. Even if you're not a large company (or just hope to become one), a loss is still a loss. However, there is a solution to this problem, take advantage.

Many of the other consequences of poor performance were discovered more than a decade ago:

Lower perceived credibility (Fogg et al. 2001)

Lower perceived quality (Bouch, Kuchinsky, and Bhatti 2000)

Increased user frustration (Ceaparu et al. 2004)

Increased blood pressure (Scheirer et al. 2002)

Reduced flow rates (Novak, Hoffman, and Yung 200)

Reduced conversion rates (Akamai 2007)

Increased exit rates (Nielsen 2000)

Are perceived as less interesting (Ramsay, Barbesi, and Preece 1998)

Are perceived as less attractive (Skadberg and Kimmel 2004)

There are a number of resources that have been documenting the role of performance in success on the web, W3 Total Cache exists to give you a framework to tune your application or site without having to do years of research.

Why is W3 Total Cache better than other caching solutions?

It's a complete framework. Most cache plugins available do a great job at achieving a couple of performance aims. Our plugin remedies numerous performance reducing aspects of any web site going far beyond merely reducing CPU usage (load) and bandwidth consumption for HTML pages alone. Equally important, the plugin requires no theme modifications, modifications to your .htaccess (mod_rewrite rules) or programming compromises to get started. Most importantly, it's the only plugin designed to optimize all practical hosting environments small or large. The options are many and setup is easy.

I've never heard of any of this stuff; my site is fine, no one complains about the speed. Why should I install this?

Rarely do readers take the time to complain. They typically just stop browsing earlier than you'd prefer and may not return altogether. This is the only plugin specifically designed to make sure that all aspects of your site are as fast as possible. Google is placing more emphasis on the speed of a site as a factor in rankings; this plugin helps with that too.

It's in every web site owner's best interest is to make sure that the performance of your site is not hindering its success.

Which WordPress versions are supported?

To use all features in the suite, a minimum of version WordPress 2.8 with PHP 5.3 is required. Earlier versions will benefit from our Media Library Importer to get them back on the upgrade path and into a CDN of their choosing.

Why doesn't minify work for me?

Great question. W3 Total Cache uses several open source tools to attempt to combine and optimize CSS, JavaScript and HTML etc. Unfortunately some trial and error is required on the part of developers is required to make sure that their code can be successfully minified with the various libraries W3 Total Cache supports. Even still, if developers do test their code thoroughly, they cannot be sure that interoperability with other code your site may have. This fault does not lie with any single party here, because there are thousands of plugins and theme combinations that a given site can have, there are millions of possible combinations of CSS, JavaScript etc.

A good rule of thumb is to try auto mode, work with a developer to identify the code that is not compatible and start with combine only mode (the safest optimization) and increase the optimization to the point just before functionality (JavaScript) or user interface / layout (CSS) breaks in your site.

We're always working to make this more simple and straight forward in future releases, but this is not an undertaking we can realize on our own. When you find a plugin, theme or file that is not compatible with minification reach out to the developer and ask them either to provide a minified version with their distribution or otherwise make sure their code is minification-friendly.

Who do you recommend as a CDN (Content Delivery Network) provider?

That depends on how you use your site and where most of your readers read your site (regionally). Here's a short list:

What about comments? Does the plugin slow down the rate at which comments appear?

On the contrary, as with any other action a user can perform on a site, faster performance will encourage more of it. The cache is so quickly rebuilt in memory that it's no trouble to show visitors the most current version of a post that's experiencing Digg, Slashdot, Drudge Report, Yahoo Buzz or Twitter effect.

Will the plugin interfere with other plugins or widgets?

No, on the contrary if you use the minify settings you will improve their performance by several times.

Does this plugin work with WordPress in network mode?

Indeed it does.

Does this plugin work with BuddyPress (bbPress)?

Will this plugin speed up WP Admin?

Yes, indirectly - if you have a lot of bloggers working with you, you will find that it feels like you have a server dedicated only to WP Admin once this plugin is enabled; the result, increased productivity.

Which web servers do you support?

We are aware of no incompatibilities with apache 1.3+, nginx 0.7+, IIS 5+ or litespeed 4.0.2+. If there's a web server you feel we should be actively testing (e.g. lighttpd), we're interested in hearing.

Is this plugin server cluster and load balancer friendly?

Yes, built from the ground up with scale and current hosting paradigms in mind.

What is the purpose of the " Media Library Import " tool and how do I use it?

The media library import tool is for old or " messy " WordPress installations that have attachments (images etc in posts or pages) scattered about the web server or " hot linked " to 3rd party sites instead of properly using the media library.

The tool will scan your posts and pages for the cases above and copy them to your media library, update your posts to use the link addresses and produce a .htaccess file containing the list of of permanent redirects, so search engines can find the files in their new location.

You should backup your database before performing this operation.

How do I find the JS and CSS to optimize (minify) them with this plugin?

Use the " Help " button available on the Minify settings tab. Once open, the tool will look for and populate the CSS and JS files used in each template of the site for the active theme. To then add a file to the minify settings, click the checkbox next to that file. The embed location of JS files can also be specified to improve page render performance. Minify settings for all installed themes can be managed from the tool as well by selecting the theme from the drop down menu. Once done configuring minify settings, click the apply and close button, then save settings in the Minify settings tab.

I don't understand what a CDN has to do with caching, that's completely different, no?

Technically no, a CDN is a high performance cache that stores static assets (your theme files, media library etc) in various locations throughout the world in order to provide low latency access to them by readers in those regions.

How do I use an Origin Pull (Mirror) CDN?

Login to your CDN providers control panel or account management area. Following any set up steps they provide, create a new " pull zone " or " bucket " for your site's domain name. If there's a set up wizard or any troubleshooting tips your provider offers, be sure to review them. In the CDN tab of the plugin, enter the hostname your CDN provider provided in the " replace site's hostname with " field. You should always do a quick check by opening a test file from the CDN hostname, e.g. http://cdn.domain.com/favicon.ico. Troubleshoot with your CDN provider until this test is successful.

Now go to the General tab and click the checkbox and save the settings to enable CDN functionality and empty the cache for the changes to take effect.

How do I configure Amazon Simple Storage Service (Amazon S3) or Amazon CloudFront as my CDN?

First create an S3 account (unless using origin pull); it may take several hours for your account credentials to be functional. Next, you need to obtain your " Access key ID " and " Secret key " from the " Access Credentials " section of the " Security Credentials " page of " My Account. " Make sure the status is " active. " Next, make sure that " Amazon Simple Storage Service (Amazon S3) " is the selected " CDN type " on the " General Settings " tab, then save the changes. Now on the " Content Delivery Network Settings " tab enter your " Access key, " " Secret key " and enter a name (avoid special characters and spaces) for your bucket in the " Create a bucket " field by clicking the button of the same name. If using an existing bucket simply specify the bucket name in the " Bucket " field. Click the " Test S3 Upload " button and make sure that the test is successful, if not check your settings and try again. Save your settings.

Unless you wish to use CloudFront, you're almost done, skip to the next paragraph if you're using CloudFront. Go to the " General Settings " tab and click the " Enable " checkbox and save the settings to enable CDN functionality. Empty the cache for the changes to take effect. If preview mode is active you will need to " deploy " your changes for them to take effect.

To use CloudFront, perform all of the steps above, except select the " Amazon CloudFront " " CDN type " in the " Content Delivery Network " section of the " General Settings " tab. When creating a new bucket, the distribution ID will automatically be populated. Otherwise, proceed to the AWS Management Console and create a new distribution: select the S3 Bucket you created earlier as the " Origin, " enter a CNAME if you wish to add one or more to your DNS Zone. Make sure that " Distribution Status " is enabled and " State " is deployed. Now on " Content Delivery Network " tab of the plugin, copy the subdomain found in the AWS Management Console and enter the CNAME used for the distribution in the " CNAME " field.

You may optionally, specify up to 10 hostnames to use rather than the default hostname, doing so will improve the render performance of your site's pages. Additional hostnames should also be specified in the settings for the distribution you're using in the AWS Management Console.

Now go to the General tab and click the " Enable " checkbox and save the settings to enable CDN functionality and empty the cache for the changes to take effect. If preview mode is active you will need to " deploy " your changes for them to take effect.

How do I configure Rackspace Cloud Files as my CDN?

First create an account. Next, in the " Content Delivery Network " section of the " General Settings " tab, select Rackspace Cloud Files as the " CDN Type. " Now, in the " Configuration " section of the " Content Delivery Network " tab, enter the " Username " and " API key " associated with your account (found in the API Access section of the rackspace cloud control panel) in the respective fields. Next enter a name for the container to use (avoid special characters and spaces). If the operation is successful, the container's ID will automatically appear in the " Replace site's hostname with " field. You may optionally, specify the container name and container ID of an existing container if you wish. Click the " Test Cloud Files Upload " button and make sure that the test is successful, if not check your settings and try again. Save your settings. You're now ready to export your media library, theme and any other files to the CDN.

You may optionally, specify up to 10 hostnames to use rather than the default hostname, doing so will improve the render performance of your site's pages.

Now go to the General tab and click the " Enable " checkbox and save the settings to enable CDN functionality and empty the cache for the changes to take effect. If preview mode is active you will need to " deploy " your changes for them to take effect.

What is the purpose of the " modify attachment URLs " button?

If the domain name of your site has changed, this tool is useful in updating your posts and pages to use the current addresses. For example, if your site used to be www.domain.com, and you decided to change it to domain.com, the result would either be many " broken " images or many unnecessary redirects (which slow down the visitor's browsing experience). You can use this tool to correct this and similar cases. Correcting the URLs of your images also allows the plugin to do a better job of determining which images are actually hosted with the CDN.

As always, it never hurts to back up your database first.

Is this plugin comptatible with TDO Mini Forms?

Captcha and recaptcha will work fine, however you will need to prevent any pages with forms from being cached. Add the page's URI to the " Never cache the following pages " box on the Page Cache Settings tab.

Is this plugin comptatible with GD Star Rating?

Yes. Follow these steps:

1. Enable dynamic loading of ratings by checking GD Star Rating -> Settings -> Features " Cache support option "

2. If Database cache enabled in W3 Total Cache add wp_gdsr to " Ignored query stems " field in the Database Cache settings tab, otherwise ratings will not updated after voting

3. Empty all caches

I see garbage characters instead of the normal web site, what's going on here?

If a theme or it's files use the call php_flush() or function flush() that will interfere with the plugins normal operation; making the plugin send cached files before essential operations have finished. The flush() call is no longer necessary and should be removed.

How do I cache only the home page?

Add /.+ to page cache " Never cache the following pages " option on the page cache settings tab.

I'm getting blank pages or 500 error codes when trying to upgrade on WordPress in network mode

First, make sure the plugin is not active (disabled) network-wide. Then make sure it's deactivated network-wide. Now you should be able to successful upgrade without breaking your site.

A notification about file owner appears along with an FTP form, how can I resolve this?

The plugin uses WordPress FileSystem functionality to write to files. It checks if the file owner, file owner group of created files match process owner. If this is not the case it cannot write or modify files.

Typically, you should tell your web host about the permission issue and they should be able to resolve it.

You can however try adding define('FS_METHOD', 'direct'); to wp-config.php to circumvent the file and folder checks.

This is too good to be true, how can I test the results?

You will be able to see it instantly on each page load, but for tangible metrics, consider the following tools:

I don't have time to deal with this, but I know I need it. Will you help me?

Yes! Please reach out to us and we'll get you acclimated so you can " set it and forget it. "

Install the plugin to read the full FAQ on the plugins FAQ tab.

" W3 Total Cache " est un logiciel libre. Les personnes suivantes ont contribué à cette extension.

Contributeurs

Lire la suite

0.9.5.4

Fixed regression with browser caching and query strings

0.9.5.3

0.9.5.2

0.9.5.1

Fixed missing namespace, which caused issues with other implementations of Google APIs

Fixed handling Cloudflare zone list being incomplete for users with many zones

Added extension to support Accelerated Mobile Pages (AMP)

Added notification for users that are still using PHP 5.2 (end of life in 2011)

Improved default settings

Improved compatibility with Yoast SEO sitemap caching

Improved compatability with Jetpack

Improved directory handling on IIS

Improved backwards compatibility for 3rd party implementations against legacy W3TC functions

0.9.5

0.9.4

Lire la suite

# data[].attributes.attachment_link.description
W3 Total Cache improves the SEO and user experience of your site by increasing website performance, reducing download times via features like content delivery network (CDN) integration. The only web host agnostic WordPress Performance Optimization (WPO) framework recommended by countless web developers and web hosts.

# data[].attributes.attachment_link.description
EWWW IO has been a game-changer for us. We use it exclusively for bulk-image optimization, and it's been extremely reliable and effective. I've tested a number of plugins, but EWWW IO is hands-down the best way to reduce the impact image size has on page load times.

# data[].attributes.attachment_link.readable_text
IMAGE OPTIMIZATION LEADS TO HAPPY INTERNET USERS

A significant part of a website's data is usually comprised of images. Image optimization refines images, decreases load times and eases the burden of network resources, including data usage in the case of mobile data plans.

Image optimization can also boost your SEO performances, as search engines factor in page load speed when ranking websites. Page loading faster means more page views, a pleasant user experience and better search ranking.

ShortPixel is an image optimizer that uses advanced compression technology to reduces image size without any before/after difference in quality, thus making your pages load faster.

Less bandwidth usage

Quick backups

Better search ranking

Super fast websites

Batch image optimization

WordPress plug-in

Image quality is preserved

Powerful algorithms

images already optimized
on 1 million+ websites by more than 500,000 users worldwide.
So far we saved the web over 600,000TB of traffic.

# data[].attributes.attachment_link.title
Image Optimization and Compression Plugin for WordPress and API by ShortPixel

# data[].attributes.attachment_link.description
A significant part of a website's data is usually comprised of images. Image optimization refines images, decreases load times and eases the burden of network resources, including data usage in the case of mobile data plans. Image optimization can also boost your SEO performances, as search engines factor in page load speed when ranking websites.

# data[].attributes.attachment_link.readable_text
Adaptez la taille de vos images à leur contenant

L'erreur la plus commune est de mettre des images trop grandes par rapport à leur contenant, et ensuite de les adapter grâce à du CSS.

Ne commettez pas une erreur classique ! Adaptez vos images à leur contenant. 👌

En clair, il faut éviter de mettre une image de 2 500 px sur 3 800 px dans une <div> de 500 px sur 500 px, et d'imposer le redimensionnement en CSS. Plus une image est grande, plus elle est lourde et donc longue à télécharger pour le navigateur. Il est par conséquent indispensable de la redimensionner avant de la mettre sur votre site.

Vous pouvez également la recadrer pour enlever les parties superflues de l'image, et donc réduire encore plus sa taille et son poids.

Attention, n'oubliez pas le responsive. Les écrans ont une résolution de plus en plus importante. Pensez donc à mettre des images en définition suffisante.

Une fois que vous avez redimensionné vos images à la bonne taille, vous pouvez encore les optimiser en les compressant.

Compressez vos images

Vous pouvez compresser vos images à l'aide d'applications gratuites comme ImageOptim, PNGgauntlet, ou via des sites web comme https://compressor.io/. Pour cela, il suffit de sélectionner l'image à compresser, aux formats JPEG, PNG, GIF ou SVG. Le logiciel choisi va alors optimiser votre image pour vous. Selon vos besoins, vous pouvez réduire de 90 % la taille de vos fichiers.

Pour les utilisateurs de Mac, ImageOptim optimise les paramètres de compression, supprime les métadonnées indésirables et les profils de couleurs inutiles.

Selon vos besoins en compression, vous pouvez choisir de compresser vos images avec une perte de données (lossy) ou sans perte de données (lossless) :

avec la compression sans perte, chaque donnée reste intacte après la décompression du fichier ;

la compression avec perte de données réduit un fichier en éliminant de manière permanente ces données, et entraîne aussi une légère perte en qualité. Ce format est utilisé pour réduire au maximum le poids des fichiers.

Généralement, il est très difficile de voir la différence entre une compression avec ou sans perte.

S'il est important pour vous d'avoir des images de grande qualité sur votre site, par exemple pour un photographe, préférez la compression sans perte de données. Sinon, profitez du gain de poids apporté par la compression avec perte de données.

# data[].attributes.attachment_link.description
Adaptez la taille de vos images à leur contenant L'erreur la plus commune est de mettre des images trop grandes par rapport à leur contenant, et ensuite de les adapter grâce à du CSS. En clair, il faut éviter de mettre une image de 2 500 px sur 3 800 px dans une de 500 px sur 500 px, et d'imposer le redimensionnement en CSS.

# data[].attributes.attachment_link.readable_text
1. Installez NodeJS sur votre ordinateur

Pour installer Sass, vous allez avoir besoin d'installer NodeJS.
Et oui, c'est assez fréquent en informatique de devoir faire des installations en chaîne et qu'un programme dépende d'un autre pour s'exécuter . Cela dit, rassurez-vous, c'est très rapide et très simple.

Si vous ne souhaitez pas encore procéder à cette installation, retrouvez un peu plus bas comment passer par une extension VsCode pour ne pas avoir à télécharger et installer NodeJS et Sass.

Installation de Sass sur Windows

Rendez-vous sur la page d'installation de NodeJS et téléchargez la LTS (actuellement la 14.16.1).

Cliquez sur le bouton de téléchargement de la version LTS

Une fois le téléchargement réalisé, exécutez le .exe et lancez l'installation.

Lors de l'installation de NodeJS, il est important de laisser "npm packager manager" et "Add to PATH" cochés.

La fenêtre d'installation de NodeJS

Une fois l'installation terminée, je vous invite à lancer l'invite de commandes windows :

La fenêtre d'invite de commande de Windows

Une fois, sur l'invite de commandes, entrez la commande : node -v puis la commande npm -v.

Ces deux commandes vous permettront de vérifier si :

Vous pouvez maintenant installer Sass avec la commande npm -g install sass .

Installation de Sass sous MacOS

Sous MacOS, les étapes sont les mêmes niveau installation. Rendez-vous sur nodejs.org et téléchargez la LTS de NodeJS. Installez-le ensuite en cliquant sur le programme téléchargé.

Une fois installé, ouvrez votre terminal et tapez les commandes suivantes :

Le terminal de commande affichant les versions de Node et Npm

Vous pouvez maintenant procéder à l'installation de Sass avec la commande npm -g install sass .

Installation de Sass avec VsCode

Voici un petit plus pour les utilisateurs de VsCode ! Il existe une excellente extension qui va vous permettre d'utiliser Sass simplement, sans l'installer ni même NodeJS.

Cette extension s'appelle Live Sass Compiler. Pour l'installer, lancez l'onglet "extension" de VsCode.

L'onglet extension de VsCode

Puis recherchez l'extension Live Sass Compiler et installez-là.

L'extension Live Sass Compiler

Vous pourrez maintenant lancer facilement la compilation de fichiers Sass.

Si vous avez installé l'extension, je vous invite à vous rendre directement à la section suivante "Comment on allume ce truc" ?

2. Ouvrez une ligne de commande sur VsCode

Tout d'abord, il vous faut une ligne de commande pour que la magie puisse commencer. Dans VS Code, allez dans Vue, puis choisissez Terminal ou utilisez le raccourci clavier Ctrl + `:

Sélection de Terminal

La partie inférieure de VS Code laisse désormais place à une fenêtre avec un terminal !

Fenêtre de terminal Windows

Première étape : ouvrir une ligne de commande. Check. ✅

3. Initialisez un fichier npm package.json

Vous êtes maintenant prêt pour la deuxième étape : initialiser un fichier npm package.json.

package.json est un fichier qui stocke les informations sur votre projet : nom, numéro de version, auteur, info de licence, dépendances externes, et, encore plus important, des petits bouts de code à exécuter (que nous appellerons dorénavant des ). Dites-vous que le package.json est un manuel d'utilisation pour que npm puisse réassembler et faire fonctionner votre site.

Le package.json liste les packages nécessaires pour faire marcher votre propre code, qui sont appelés des dépendances. Aussi appelés librairies, ce sont des collections de code que vous pouvez utiliser pour exécuter votre propre code. Au lieu d'écrire toutes vos fonctions vous-même, vous pouvez aussi installer celles d'autres personnes, ce qui vous épargne de devoir écrire de grandes quantités de code et vous facilite la vie.

Créons un fichier package en tapant npm init :

La ligne de commande vous demande à présent un tas d'infos sur votre projet. Si vous taper Entrer sans remplir les champs demandés, npm les remplira avec la valeur par défaut affichée entre parenthèses. S'il n'y a pas de parenthèses, tapez juste Entrer et le champ sera vide :

Le champ est vide

À vous de jouer, remplissez les champs comme vous le souhaitez. Ne vous inquiétez pas du repository git pour le moment. Une fois que tous les champs sont remplis, la ligne de commande vous montrera un aperçu de votre package.json et vous demandera si cela vous convient. Tapez Entrer pour accepter.

Le terminal

Un fichier package.json est apparu dans le panneau de navigation sur la gauche de VS Code. Cliquez dessus et regardez ce qu'on y trouve !

Ce que vous avez là est un objet JSON contenant toutes les données que vous venez de renseigner. À mesure que vous installez des packages (ou librairies), ils apparaîtront parmi les objets dépendances, ce qui donnera; si on ajoute bootstrap par exemple :

OK, initialiser un package npm : validé ! ✅

Et pour finir, la troisième et dernière étape : installer Sass. Enfin ! 🙌

4. Installez Sass

Dans la ligne de commande, tapez npm install sass -g .

OK, alors on va décortiquer cette ligne de commande ensemble pour mieux la comprendre. Tout d'abord, lorsque vous tapez npm, cela indique que vous allez exécuter une commande npm ; install est la commande npm que vous êtes en train d'exécuter : elle téléchargera et installera les packages indiqués. Dans le cas présent, c'est le package Sass qui sera installé, ainsi que toutes ses éventuelles dépendances. -g s'appelle un flag (ou drapeau en français). Cela indique à nmp d'installer le package globalement, c'est-à-dire sur l'ensemble de votre machine, plutôt que de l'installer seulement pour votre projet. Vous n'aurez plus jamais à installer Sass !

Npm est une interface de ligne de commande qui est intégrée dans le framework du serveur node.js. Il installe des packages et vous permet d'exécuter des scripts et de gérer les dépendances. Si vous n'avez pas encore installé Node, allez voir notre cours sur l'installation des environnements de production.

Pour vérifier que vous avez bien installé Sass dans votre système, tapez sass --version dans le terminal :

La ligne de commande vous répond en vous indiquant quelle version de Sass est installée. Si par malheur vous aviez fait une erreur et que Sass n'était pas installé, pas de panique vous auriez eu un message d'erreur vous indiquant que Sass n'est pas reconnu :

Le message d'erreur

Si vous voyez Sass et une version affichée, ici : Sass 3.5.1 c'est tout bon.

Quatrième étape : installer Sass. Effectuée ! ✅

🎉🎉🎉

# data[].attributes.attachment_link.description
1. Installez NodeJS sur votre ordinateur Pour installer Sass, vous allez avoir besoin d'installer NodeJS. Et oui, c'est assez fréquent en informatique de devoir faire des installations en chaîne et qu'un programme dépende d'un autre pour s'exécuter . Cela dit, rassurez-vous, c'est très rapide et très simple.

# data[].attributes.body
Sass avec visual code
sass à installer voire mail à Stéphane Fasseta pour installe en cas de problème de droits powershell

prefixed
prettier (code propre)

# data[].attributes.attachment_link.authors[].name
Le professeur Kassandre Pedro Backend Developer at Pexels | Ruby on Rails Developer | Ancienne CTO et Co-fondatrice de Seacher

# data[].attributes.attachment_link.title
Utilisez le système 7-1 pour une codebase plus simple à gérer

# data[].attributes.attachment_link.description
Apprenez à écrire du code CSS propre, maintenable et modulable dans des fichiers de style .scss. Vous utiliserez Sass la méthodologie BEM.

# data[].attributes.attachment_link.title
Compressor.io - optimize and compress JPEG photos and PNG images

# data[].attributes.attachment_link.description
Optimize and compress JPEG, PNG, SVG, GIF and WEBP images online. Compress, resize and rename your photos for free.

# data[].attributes.attachment_link.title
ImageOptim – Un optimiseur PNG/JPEG/GIF pour macOS

# data[].attributes.attachment_link.description
Optimise les images — moins d’espace disque et chargement plus rapide — en trouvant les meilleurs paramètres de compression et en retirant les commentaires inutiles et les profils couleur

# data[].attributes.attachment_link.readable_text
Les sélecteurs définissent les éléments sur lesquelles s'applique un ensemble de règles CSS.

Les sélecteurs de type

Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué. Syntaxe : nomelement Exemple : input permettra de cibler n'importe quel élément .

Les sélecteurs de classe

Ce sélecteur simple permet de cibler les éléments en fonction de la valeur de leur attribut class. Syntaxe : .nomclasse Exemple : .index permettra de cibler n'importe quel élément qui possède la classe index (vraisemblablement définie avec un attribut class="index").

Les sélecteurs d'identifiant

Ce sélecteur simple permet de cibler un élément d'un document en fonction de la valeur de son attribut id. Dans un document, il ne doit y avoir qu'un seul élément pour un identifiant donné. Syntaxe : #valeurid Exemple : #toc permettra de cibler l'élément qui possède l'identifiant toc (vraisemblablement défini avec un attribut id="toc").

Le sélecteur universel

Ce sélecteur permet de cibler tous les nœuds d'un document. Il existe également une variante pour ne cibler qu'un seul espace de noms et une variante pour cibler tous les espaces de noms. Syntaxe : * ns|* *|*Exemple : * permettra de cibler tous les éléments du document.

Les sélecteurs d'attribut

Ce sélecteur simple permet de cibler des éléments d'un document en fonction de la valeur d'un de leurs attributs. Syntaxe : [attr] [attr=valeur] [attr~=valeur] [attr|=valeur] [attr^=valeur] [attr$=valeur] [attr*=valeur]Exemple : [autoplay] permettra de cibler tous les éléments qui possède l'attribut autoplay défini (quelle que soit sa valeur).

Les pseudo-classes permettent de cibler des éléments selon une information d'état qui n'est pas stockée dans l'arbre du document.

Exemple: a:visited permettra de cibler l'ensemble des éléments (des liens) ayant déjà été visités par l'utilisateur.

Les pseudo-éléments représentent des entités du document qui ne sont pas décrites en HTML.

Exemple : p::first-line permettra de cibler la première ligne de chacun des éléments (les paragraphes) du document.

# data[].attributes.attachment_link.title
Sélecteurs CSS - CSS : Feuilles de style en cascade | MDN

# data[].attributes.attachment_link.description
Les sélecteurs définissent les éléments sur lesquelles s'applique un ensemble de règles CSS. Les sélecteurs de type Ce sélecteur simple permet de cibler les éléments qui correspondent au nom indiqué. Syntaxe : nomelement Exemple : input permettra de cibler n'importe quel élément .

# data[].attributes.attachment_link.readable_text
Si vous ne connaissez pas comment utilisez Git, je vous invite à suivre le cours " utilisez Git et GitHub pour vos projets de développement".

Dans ce screencast, vous allez découvrir comment VS Code intègre les fonctionnalités de Git.

Comme vous le savez, le système de contrôle de version Git est extrêmement important dans le monde du développement, que ce soit au niveau individuel, au niveau d'une équipe, ou même au niveau d'une entreprise. VS Code intègre donc tous les outils nécessaires à son utilisation.

Clonez un dépôt

Tout d'abord, vous pouvez cloner un dépôt Git directement depuis VS Code. Pour faire cela, fermez tout projet actuellement ouvert, et ouvrez l'explorateur de fichiers (en haut à gauche) :

Cloner un dépôt

Vous pouvez ensuite cliquer sur "Clone Repository", puis coller l'URL du dépôt à cloner ; par exemple celui que nous avons utilisé jusqu'ici :
https://github.com/OpenClassrooms-Student-Center/5543061-ecrivez-du-javascript-pour-le-web-activity.git
Quand vous validez l'URL, VS Code vous propose de choisir l'emplacement où vous souhaitez cloner le code, et vous propose d'ouvrir le dépôt cloné. En cliquant sur "Open", vous vous retrouvez dans le bon projet.

Créez une branche

Il est temps de travailler sur votre code, et vous souhaitez créer une branche de travail. Les outils Git se trouvent à gauche :

Les outils Git

Vous pouvez ouvrir le menu ... ; allez sur Branch -> Create Branch.

Bien sûr, vous pouvez aussi chercher "Create Branch" dans la palette de commandes !

Choisissez un nom pour votre branche et appuyez sur Entrée. Vous verrez alors la branche sur laquelle vous vous trouvez, en bas à gauche de la fenêtre principale :

La branche active

En cliquant sur cette branche, vous pouvez choisir de changer de branche ou d'en créer une nouvelle.

Commit

Effectuons quelques modifications. Ouvrez l'explorateur de fichiers, puis ouvrez blog.html, et changez la langue en en ligne 2 à fr . Dans functions.js , à la ligne 17, changez "Veuillez saisir quelque chose !" en "Il faut saisir quelque chose !".

N'oubliez pas d'enregistrer vos modifications à chaque fois avec Ctrl+S sur PC ou Cmd+S sur Mac !

Rouvrez les outils Git, et vous verrez le résumé de vos modifications. Cliquez sur un fichier pour voir le détail :

Git Diff

Plusieurs options s'ouvrent donc à nous, mais disons que nous souhaitons commit nos modifications. Il faut d'abord stage nos modifications en cliquant sur les boutons + sur chaque fichier. Puis, entrez simplement votre message de commit ("Changed language", par exemple), et faites Ctrl+Entrée sur PC, ou Cmd+Entrée sur Mac pour effectuer votre commit.

Toutes les commandes liées au contrôle de version se trouvent dans cette partie de VS Code (et sont trouvables par la palette de commandes), donc n'hésitez pas à les essayer avec vos propres dépôts.

Vous pouvez même y lier votre compte GitHub !

# data[].attributes.attachment_link.title
Explorez les fonctionnalités de Visual Studio Code

# data[].attributes.attachment_link.description
Si vous ne connaissez pas comment utilisez Git, je vous invite à suivre le cours " utilisez Git et GitHub pour vos projets de développement". Dans ce screencast, vous allez découvrir comment VS Code intègre les fonctionnalités de Git.

# data[].attributes.attachment_link.description
Vous rêvez d'apprendre à créer des sites web ? Débutez avec ce cours qui vous enseignera tout ce qu'il faut savoir sur le développement de sites web en HTML5 et CSS3 !

# data[].attributes.attachment_link.title
Mettez en place votre environnement front-end

# data[].attributes.attachment_link.description
Le développement front-end, comme n'importe quel domaine, nécessite plus que du savoir-faire, il faut les bons outils ! Dans ce cours, vous installerez et découvrirez les outils qui vous serviront tout au long de votre carrière de développeur front-end.

# data[].attributes.attachment_link.description
Easy & visual compression of SVG images.

# data[].attributes.attachment_link.description
SVG animation stroke. GitHub Gist: instantly share code, notes, and snippets.

# data[].attributes.attachment_link.description
Animation SVG pour le web avec du code et des exemples. Retrouvez les techniques les plus courantes sans utiliser une librairie ou des dépendances graphiques.

# data[].attributes.attachment_link.readable_text
From the creators of Miro, a wonderful video player and downloader

Put video on your phone or iPod!

Miro Video Converter has presets that will convert video to the correct sizes and formats for popular phones, iPods, and other media players. Just convert your video and copy it to your device.

Supported Devices

Android Phones

Samsung Galaxy Y

Samsung Galaxy Mini

Samsung Galaxy Ace

Samsung Admire

Samsung Droid Charge

Samsung Galaxy S / SII / S Plus

Samsung Galaxy SIII

Samsung Galaxy Nexus

Samsung Galaxy Tab

Samsung Galaxy Tab 10.1

Samsung Galaxy Note

Samsung Galaxy Note II

Samsung Infuse 4G

Samsung Epic Touch 4G

HTC Wildfire

HTC Desire

HTC Droid Incredible

HTC Thunderbolt

HTC Evo 4G

HTC Sensation

HTC Rezound

HTC One X

Motorola Droid X

Motorola Droid X2

Motorola RAZR

Motorola XOOM

Sanyo Zio

Miro Video Converter can convert virtually any video file to MP4, Theora, or MP3 (the audio only).

Some of the most popular conversions:

# data[].attributes.attachment_link.description
From the creators of Miro, a wonderful video player and downloader Miro Video Converter has presets that will convert video to the correct sizes and formats for popular phones, iPods, and other media players. Just convert your video and copy it to your device.

# data[].attributes.attachment_link.description
Vous rêvez d'apprendre à créer des sites web ? Débutez avec ce cours qui vous enseignera tout ce qu'il faut savoir sur le développement de sites web en HTML5 et CSS3 !

# data[].attributes.attachment_link.description
Responsive HTML5 and CSS3 site templates designed by @ajlkn and released under the Creative Commons license.

# data[].attributes.attachment_link.readable_text
La première balise à connaître est <table> </table> . C'est cette balise qui permet d'indiquer le début et la fin d'un tableau.

Cette balise est de type bloc, il faut donc la placer en dehors d'un paragraphe. Exemple :

Bon, et qu'est-ce qu'on écrit à l'intérieur du tableau ?

Là, préparez-vous à subir une avalanche de nouvelles balises.
Pour commencer en douceur, voici deux nouvelles balises très importantes :

En HTML, un tableau se construit ligne par ligne. Dans chaque ligne ( <tr> ), on indique le contenu des différentes cellules ( <td> ).
Schématiquement, un tableau se construit comme à la figure suivante.

Un tableau, avec des cellules contenues dans des lignes

On a une balise de ligne ( <tr> ) qui englobe un groupe de cellules ( <td> ).
Par exemple, si je veux faire un tableau à deux lignes, avec trois cellules par ligne (donc trois colonnes), je devrai taper ceci :

Le résultat est un peu déprimant (figure suivante).

Un tableau sans bordures

C'est un tableau, ça ?
Le texte s'est écrit à la suite et il n'y a même pas de bordures !

Oui, un tableau sans CSS paraît bien vide. Et justement, rajouter des bordures est très simple, vous connaissez déjà le code CSS correspondant !

Et voici le résultat à la figure suivante.

Chaque cellule a sa propre bordure

Hum, ce n'est pas encore aussi parfait que ce qu'on voudrait. En effet, on aimerait qu'il n'y ait qu'une seule bordure entre deux cellules, or ce n'est pas le cas ici.

Heureusement, il existe une propriété CSS spécifique aux tableaux, border-collapse , qui signifie " coller les bordures entre elles ".
Cette propriété peut prendre deux valeurs :

La figure suivante représente le résultat obtenu.

Les bordures sont collées les unes aux autres

Voilà qui est mieux !

La ligne d'en-tête

Maintenant que l'on a ce qu'on voulait, on va rajouter la ligne d'en-tête du tableau. Dans l'exemple ci-dessous, les en-têtes sont " Nom ", " Âge " et " Pays ".
La ligne d'en-tête se crée avec un <tr> comme on l'a fait jusqu'ici, mais les cellules qu'elle contient sont, cette fois, encadrées par des balises <th> et non pas <td> !

La ligne d'en-tête est très facile à reconnaître pour deux raisons :

Comme le nom des cellules est un peu différent pour l'en-tête, il faut penser à mettre à jour le CSS pour lui dire d'appliquer une bordure sur les cellules normales et sur l'en-tête (figure suivante).

Un tableau avec un en-tête

Comme vous pouvez le constater, votre navigateur a mis en gras le texte des cellules d'en-tête. C'est ce que font en général les navigateurs mais, si vous le désirez, vous pouvez changer cela à coups de CSS : modifier la couleur de fond des cellules d'en-tête, leur police, leur bordure, etc.

Pour valider vos compétences avec un diplôme bac+2, suivez la formation Développeur web avec OpenClassrooms. 6 mois en moyenne sont nécessaires pour finaliser cette formation à distance, qui peut aussi être suivie en alternance ou contrat d'apprentissage.

Titre du tableau

Normalement, tout tableau doit avoir un titre. Le titre permet de renseigner rapidement le visiteur sur le contenu du tableau.
Notre exemple est constitué d'une liste de personnes... oui, mais alors ? Qu'est-ce que cela représente ? Sans titre de tableau, vous le voyez, on est un peu perdu.

Heureusement, il y a <caption> !
Cette balise se place tout au début du tableau, juste avant l'en-tête. C'est elle qui contient le titre du tableau (figure suivante) :

Un tableau avec un titre

C'est quand même plus clair !

Sachez que vous pouvez changer la position du titre avec la propriété CSS caption-side qui peut prendre deux valeurs :

# data[].attributes.attachment_link.description
La première balise à connaître est . C'est cette balise qui permet d'indiquer le début et la fin d'un tableau. Cette balise est de type bloc, il faut donc la placer en dehors d'un paragraphe. Exemple : Bon, et qu'est-ce qu'on écrit à l'intérieur du tableau ?

# data[].attributes.body
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1606688-tp-creez-un-site-pas-a-pas#/id/r-1611580

# data[].attributes.attachment_link.readable_text
Les choses se compliquent un peu plus lorsqu'on arrive au CSS. En effet, il faut du travail (et parfois un peu d'astuce) pour obtenir un résultat se rapprochant de la maquette. Je dis bien " se rapprochant ", car vous ne pourrez jamais obtenir un résultat identique au pixel près.

Mettez-vous bien cela en tête : le but est d'obtenir le rendu le plus proche possibl e, sans chercher la perfection. Même si vous obtenez selon vous " la perfection " sur un navigateur, vous pouvez être sûr qu'il y aura des différences sur un autre navigateur (plus ancien) ou sur une autre machine que la vôtre. Nous allons donc faire au mieux et ce sera déjà du travail, vous verrez.

Pour mettre en forme le design, je vais procéder en plusieurs étapes. Je vais m'occuper des éléments suivants, dans cet ordre :

1. Polices personnalisées.

2. Définition des styles principaux de la page (largeur du site, fond, couleur par défaut du texte).

3. En-tête et liens de navigation.

4. Bannière (représentant le pont de San Francisco).

5. Section principale du corps de page, au centre.

Les polices personnalisées

Pour les besoins du design, mon graphiste a utilisé trois polices sur sa maquette :

Vous trouverez ces polices dans le fichier que je vous ai fait télécharger un peu plus haut. Si ce n'est pas encore fait, je vous encourage fortement à le télécharger.

La plupart des ordinateurs sont équipés de Trebuchet MS (quoique pas nécessairement tous ; on pourrait la faire télécharger). Par contre, les deux autres polices sont un peu originales et ne sont sûrement pas présentes sur les ordinateurs de vos visiteurs. Nous allons les leur faire télécharger.

Comme vous le savez, il faut proposer plusieurs versions de ces polices pour les différents navigateurs. Dafont ne propose que le .ttf en téléchargement. Par contre, FontSquirrel propose un générateur de polices à utiliser en CSS3 avec @font-face : vous lui envoyez un .ttf , l'outil transforme le fichier dans tous les autres formats nécessaires, et vous fournit même le code CSS prêt à l'emploi !

Je m'en suis servi pour générer les différentes versions des deux polices exotiques que je vais utiliser. Ensuite, dans mon fichier CSS, je rajoute ce code qui m'a été fourni par FontSquirrel pour déclarer les nouvelles polices :

En plus de cela, il faut bien entendu mettre à disposition les fichiers des polices. Comme vous le voyez, j'ai créé un sous-dossier polices dans lequel j'ai mis les différentes versions de mes polices.

Définition des styles principaux

On peut maintenant s'attaquer à définir quelques styles globaux pour tout le design de notre page. On va définir une image de fond, une police et une couleur de texte par défaut, et surtout on va dimensionner notre page et la centrer à l'écran.

Avec #bloc_page , le bloc qui englobe toute la page, j'ai fixé les limites à 900 pixels de large. Avec les marges automatiques, le design sera centré.

Si vous souhaitez créer un design qui s'adapte aux dimensions de l'écran du visiteur, définissez une largeur en pourcentage plutôt qu'en pixels.

J'ai utilisé la propriété CSS text-transform: uppercase; (que nous n'avons pas vue auparavant) pour faire en sorte que mes titres soient toujours écrits en majuscules. Cette propriété transforme en effet le texte en majuscules (elle peut aussi faire l'inverse avec lowercase ). Notez qu'on aurait aussi pu écrire les titres directement en majuscules dans le code HTML.

La figure suivante vous montre ce qu'on obtient pour le moment avec le code CSS. On est encore loin du résultat final, mais on se sent déjà un petit peu plus " chez soi ".

Le fond et les limites de la page commencent à apparaître

En-tête et liens de navigation

D'après la structure que j'ai proposée, l'en-tête contient aussi les liens de navigation. Commençons par définir l'en-tête et, en particulier, le logo en haut à gauche. Nous verrons ensuite comment mettre en forme les liens de navigation.

L'en-tête

Nous créons une distinction entre l'en-tête et le corps de page grâce à une image de fond. Les éléments sont positionnés avec Flexbox : il y a plusieurs niveaux d'imbrication, certains sont positionnés verticalement, d'autres horizontalement. Nous personnalisons aussi les polices et les dimensions.

Les liens de navigation

La mise en forme des liens de navigation est intéressante. Vous l'avez vu, j'ai créé une liste à puces pour les liens... mais une telle liste s'affiche habituellement en hauteur, et non en largeur. Heureusement, cela se change facilement, vous allez voir :

La principale nouveauté est la définition CSS list-style-type: none; , qui permet de retirer l'image ronde servant de puce. Chaque élément de la liste ( <li> ) est positionné dans une Flexbox, ce qui nous permet de placer les liens côte à côte comme nous le souhaitions.

Le reste des définitions ne contient rien d'extraordinaire : des dimensions, des couleurs, des bordures... Autant de choses que vous connaissez déjà. Notez que je ne trouve pas forcément les bonnes valeurs du premier coup, il me faut parfois tâtonner un peu pour trouver une apparence proche de la maquette d'origine.

La figure suivante représente le résultat que nous obtenons avec les derniers ajouts de CSS.

L'en-tête est mis en page

La bannière

Bien, passons maintenant à un exercice un peu plus difficile mais très intéressant : la bannière ! Notre maquette comporte une jolie bannière représentant le pont de San Francisco. Cette bannière, sur votre site, peut être amenée à évoluer. Ici, elle peut servir à illustrer, par exemple, le dernier billet de blog de notre ami Zozor, qui vient de visiter San Francisco.

La bannière est intéressante à plus d'un titre :

elle comporte des angles arrondis ;

la description est écrite sur un fond légèrement transparent ;

le bouton " Voir l'article " est réalisé en CSS, avec des angles arrondis ;

une ombre vient donner du volume à la bannière.

Voici le code que j'ai utilisé pour réaliser toute la bannière :

Ce code est assez technique et riche en fonctionnalités CSS. C'est peut-être la partie la plus délicate à réaliser dans cette page.

Vous pouvez constater que j'ai choisi d'afficher l'image du pont sous forme d'image de fond dans le bloc <div> de la bannière.

J'ai aussi donné une position relative à la bannière, sans utiliser de propriétés pour en modifier le décalage... Pourquoi ? A priori, une position relative sans décalage ne sert à rien... Et pourtant, cela m'a été particulièrement utile pour placer le bouton " Voir l'article " en bas à droite de la bannière. En effet, j'ai placé le bouton en absolu à l'intérieur.

Le bouton ne devrait-il pas se placer en bas à droite de la page ?

Non, souvenez-vous ce que je vous avais dit : si un bloc est positionné en absolu dans un autre bloc lui-même positionné en absolu, fixe ou relatif, alors il se positionne à l'intérieur de ce bloc.
Notre bannière est positionnée en relatif (sans décalage). Comme le bouton est positionné en absolu à l'intérieur, il se place donc en bas à droite de la bannière !

C'est une technique particulièrement utile et puissante dans la réalisation d'un design, souvenez-vous-en !

Dernier détail : pour la légende de la bannière, j'ai choisi d'utiliser la transparence avec la notation RGBa plutôt que la propriété opacity . En effet, opacity aurait rendu tout le contenu du bloc transparent, y compris le bouton " Voir l'article " à l'intérieur. J'ai trouvé préférable de rendre transparente seulement la couleur de fond plutôt que tout le bloc.

Le résultat est plutôt sympathique (figure suivante).

La bannière est mise en forme

Cela en jette, vous ne trouvez pas ?

Pour réaliser le dégradé du bouton " Voir l'article ", j'ai utilisé une image de fond représentant le dégradé, et j'ai répété cette image horizontalement. Sachez qu'il existe une propriété CSS3 , linear-gradient , qui permet de réaliser des dégradés sans avoir à recourir à une image de fond. Son usage étant un peu complexe, j'ai choisi de ne pas l'utiliser dans cet exemple, mais vous pouvez vous documenter à son sujet si vous le souhaitez !

Le corps

Le corps, au centre de la page, est dans notre cas constitué d'une unique balise <section> (mais il pourrait y en avoir plusieurs, bien sûr).

Le positionnement du bloc " À propos de l'auteur " se fait grâce à Flexbox. J'ai choisi de répartir la taille des éléments avec la propriété flex , ce qui permet à l'article et au bloc sur le côté d'équilibrer leurs largeurs.

On joue avec les angles arrondis et les ombres, on ajuste un peu les marges et les dimensions du texte, et nous y voilà !

La petite difficulté ici était de réussir à placer la flèche à gauche du bloc <aside> " À propos de l'auteur ", pour donner l'effet d'une bulle. Là encore, notre meilleur ami est le positionnement absolu. La technique est la même : je positionne le bloc <aside> en relatif (sans effectuer de décalage), ce qui me permet ensuite de positionner l'image de la flèche en absolu par rapport au bloc <aside> (et non par rapport à la page entière). En jouant sur le décalage de l'image, je peux la placer avec précision où je veux, au pixel près (figure suivante) !

Le corps de la page est mis en forme

Le pied de page

Il ne nous reste plus que le pied de page à mettre en forme. Celui-ci est constitué de trois sous-blocs que j'ai matérialisés par des <div> auxquels j'ai donné des id pour mieux les repérer. Ces blocs sont positionnés, grâce à une Flexbox, les uns à côté des autres.

Deux petites particularités à signaler sur le pied de page :

j'ai utilisé la fonctionnalité des images de fond multiples de CSS3, ce qui m'a permis de réaliser le séparateur entre le corps et le pied de page. Il est constitué de trois images : le séparateur, la petite flèche vers le haut et un léger dégradé ;

j'ai modifié la puce de la liste " Mes amis ", en bas à droite, avec la propriété list-style-image qui m'a permis d'utiliser une image personnalisée plutôt que les puces standard. Il existe de nombreuses propriétés CSS spécifiques comme celle-ci et nous ne pouvons pas toutes les voir une par une dans ce cours mais, maintenant que vous êtes un habitué du CSS, vous n'aurez aucun mal à apprendre à les utiliser simplement en lisant l' annexe listant les principales propriétés CSS.

Et voilà, notre design est terminé (figure suivante) !

Le pied de page est mis en forme

Ah, vous pensez en avoir fini ? Il reste hélas encore un peu de travail : il faut tester notre site sur différents navigateurs. Idéalement, il vaut mieux le faire au fur et à mesure de la mise en place du design. Ouvrez-le donc sur d'autres navigateurs pour vérifier que tout est en ordre !

Ouf ! Le site s'affiche bien aussi sur Firefox !

# data[].attributes.attachment_link.description
Les choses se compliquent un peu plus lorsqu'on arrive au CSS. En effet, il faut du travail (et parfois un peu d'astuce) pour obtenir un résultat se rapprochant de la maquette. Je dis bien " se rapprochant ", car vous ne pourrez jamais obtenir un résultat identique au pixel près.

# data[].attributes.attachment_link.title
Découvrez d’autres techniques de mise en page

# data[].attributes.attachment_link.description
Vous rêvez d’apprendre à créer des sites web ? Débutez avec ce cours qui vous enseignera tout ce qu’il faut savoir sur le développement de sites web en HTML5 et CSS3 !

# data[].attributes.attachment_link.readable_text
Reprenons. Les éléments sont organisés soit horizontalement (par défaut), soit verticalement. Cela définit ce qu'on appelle l'axe principal. Il y a aussi un axe secondaire ( cross axis) :

si vos éléments sont organisés horizontalement, l'axe secondaire est l'axe vertical ;

si vos éléments sont organisés verticalement, l'axe secondaire est l'axe horizontal.

Pourquoi je vous raconte ça ? Parce que nous allons découvrir comment aligner nos éléments sur l'axe principal et sur l'axe secondaire.

Aligner sur l'axe principal

Pour faire simple, partons sur des éléments organisés horizontalement (c'est le cas par défaut).

Pour changer leur alignement, on va utiliser justify-content , qui peut prendre ces valeurs :

flex-start : alignés au début (par défaut) ;

flex-end : alignés à la fin ;

center : alignés au centre ;

space-between : les éléments sont étirés sur tout l'axe (il y a de l'espace entre eux) ;

space-around : idem, les éléments sont étirés sur tout l'axe, mais ils laissent aussi de l'espace sur les extrémités.

Par exemple :

Le mieux est encore de tester toutes les valeurs possibles pour voir ce que ça donne, vous pensez pas ?

Les différentes valeurs possibles pour l'alignement avec justify-content

Vous voyez comment les éléments s'alignent différemment selon les cas ? Avec une simple propriété, on peut intelligemment agencer nos éléments comme on veut !

Maintenant, voici ce qu'il faut bien comprendre : ça marche aussi si vos éléments sont dans une direction verticale. Dans ce cas, l'axe vertical devient l'axe principal, et justify-content s'applique aussi :

Avec une direction verticale (column), le centrage fonctionne de la même façon, cette fois en hauteur !

Essayez, à vous de jouer !

Aligner sur l'axe secondaire

Comme je vous le disais, si nos éléments sont placés dans une direction horizontale (ligne), l'axe secondaire est... vertical. Et inversement : si nos éléments sont dans une direction verticale (colonne), l'axe secondaire est horizontal.

Avec align-items , nous pouvons changer leur alignement sur l'axe secondaire. Il peut prendre ces valeurs :

stretch : les éléments sont étirés sur tout l'axe (valeur par défaut) ;

flex-start : alignés au début ;

flex-end : alignés à la fin ;

center : alignés au centre ;

baseline : alignés sur la ligne de base (semblable à flex-start).

Pour ces exemples, nous allons partir du principe que nos éléments sont dans une direction horizontale (mais n'hésitez pas à tester aussi dans la direction verticale !).

Un alignement sur l'axe secondaire avec align-items nous permet de centrer complètement l'élément dans le conteneur !

Saint Graal du développeur web, le centrage vertical et horizontal peut d'ailleurs être obtenu encore plus facilement. Dites que votre conteneur est une flexbox et établissez des marges automatiques sur les éléments à l'intérieur. C'est tout ! Essayez !

Aligner un seul élément

Il est possible de faire une exception pour un seul des éléments sur l'axe secondaire avec align-self :

Résultat :

Un élément aligné différemment des autres avec align-self. Tiens, je crois que j'ai dessiné une tête en pixel art !

# data[].attributes.attachment_link.description
Reprenons. Les éléments sont organisés soit horizontalement (par défaut), soit verticalement. Cela définit ce qu'on appelle l'axe principal . Il y a aussi un axe secondaire ( cross axis) : si vos éléments sont organisés horizontalement, l'axe secondaire est l'axe vertical ; si vos éléments sont organisés verticalement, l'axe secondaire est l'axe horizontal.

# data[].attributes.headline
Tout s'aligne auto #conteneur{    display: flex;}.element{    margin: auto;}

# data[].attributes.subject
Tout s'aligne auto #conteneur{    display: flex;}.element{    margin: auto;}

# data[].attributes.body
<div id="conteneur">
<div class="element 1">Element </div>
<div class="element 2">Element </div>
<div class="element 3">Element </div>
</div>

# data[].attributes.body
S'il y a trop de texte à l'intérieur d'un bloc de dimensions fixes, il y a un risque de débordement. Dans ce cas, il peut être judicieux de rajouter des barres de défilement avec la propriété overflow  , ou de forcer la césure avec word-wrap  .

# data[].attributes.attachment_link.description
Vous rêvez d'apprendre à créer des sites web ? Débutez avec ce cours qui vous enseignera tout ce qu'il faut savoir sur le développement de sites web en HTML5 et CSS3 !

# data[].attributes.body
Plusieurs balises ont été introduites avec HTML5 pour délimiter les différentes zones qui constituent la page web :

<header>  : en-tête ;

<footer>  : pied de page ;

<nav>  : liens principaux de navigation ;

<section>  : section de page ;

<aside>  : informations complémentaires ;

<article>  : article indépendant.

Ces balises peuvent être imbriquées les unes dans les autres. Ainsi, une section peut avoir son propre en-tête.

# data[].attributes.attachment_link.title
Les balises sémantiques en HTML5 - HTML | Ronan HELLO

# data[].attributes.attachment_link.description
Découvrez comment mettre en place un balisage sémantique sur votre site web en quelques minutes.

# data[].attributes.body
Chaque section peut avoir son titre de niveau 1 ( <h1>  ), de même que l'en-tête peut contenir un titre <h1>  lui aussi. Chacun de ces blocs étant indépendant des autres, il n'est pas illogique de retrouver plusieurs titres <h1>  dans le code de la page web. On a ainsi « le titre <h1>  du <header>  », « le titre <h1>  de cette <section>  », etc.

# data[].attributes.attachment_link.description
Vous rêvez d'apprendre à créer des sites web ? Débutez avec ce cours qui vous enseignera tout ce qu'il faut savoir sur le développement de sites web en HTML5 et CSS3 !

# data[].attributes.attachment_link.description
Vous rêvez d’apprendre à créer des sites web ? Débutez avec ce cours qui vous enseignera tout ce qu’il faut savoir sur le développement de sites web en HTML5 et CSS3 !

# data[].attributes.body
Il existe en fait une propriété CSS qui permet de dire : « Stop, ce texte doit être en-dessous du flottant et non plus à côté ». C'est la propriété clear  , qui peut prendre ces trois valeurs :

left  : le texte se poursuit en dessous après un float: left;

right  : le texte se poursuit en dessous après un float: right;

both  : le texte se poursuit en dessous, que ce soit après un float: left;  ou après un float: right;

# data[].attributes.body
@font-face {
font-family: 'MaSuperPolice';
src: url('MaSuperPolice.eot') format('eot'),
url('MaSuperPolice.woff') format('woff'),
url('MaSuperPolice.ttf') format('truetype'),
url('MaSuperPolice.svg') format('svg');
}

# data[].attributes.attachment_link.readable_text
Font Squirrel relies on advertising in order to keep bringing you great new free fonts and to keep making improvements to the web font generator. If you are seeing this message, you probably have an ad blocker turned on. Please consider disabling it to see content from our partners.

Alternatively, you can support Font Squirrel by purchasing a paid license from our sister site,Fontspring.

# data[].attributes.attachment_link.title
Free Fonts! Legit Free & Quality " Font Squirrel

# data[].attributes.attachment_link.description
Font Squirrel scours the internet for high quality, legitimately free fonts . Download thousands of completely legal, high quality, free fonts.

# data[].attributes.headline
Si le nom de la police comporte des espaces, je conseille de l'entourer de guillemets, comme je l'ai fait pour « Arial Black ».

# data[].attributes.subject
Si le nom de la police comporte des espaces, je conseille de l'entourer de guillemets, comme je l'ai fait pour « Arial Black ».

# data[].attributes.body
p{    font-family: Impact, "Arial Black", Arial, Verdana, sans-serif;}

# data[].attributes.body
https://openclassrooms.com/fr/courses/1603881-apprenez-a-creer-votre-site-web-avec-html5-et-css3/1605060-mettez-en-place-le-css#/id/r-1610093

# data[].attributes.attachment_link.readable_text
La petite histoire du CSS

Je vous avais averti dès le début de ce cours : nous allons apprendre deux langages. Nous avons déjà bien entamé notre découverte du HTML, même s'il reste encore de nombreuses choses à apprendre (nous y reviendrons dans quelques chapitres). En revanche, il est temps maintenant de nous intéresser au CSS.

CSS ( Cascading Style Sheets), c'est cet autre langage qui vient compléter le HTML.
Vous vous souvenez de son rôle ? Gérer la mise en forme de votre site.

Petit rappel : à quoi sert CSS ?

CSS ? C'est lui qui vous permet de choisir la couleur de votre texte.
Lui qui vous permet de sélectionner la police utilisée sur votre site.
Lui encore qui permet de définir la taille du texte, les bordures, le fond...

Et aussi, c'est lui qui permet de faire la mise en page de votre site. Vous pourrez dire : je veux que mon menu soit à gauche et occupe telle largeur, que l'en-tête de mon site soit calé en haut et qu'il soit toujours visible, etc.

Souvenez-vous de ce petit comparatif que nous avions vu dès le premier chapitre (figure suivante).

La même page HTML, sans et avec CSS (www.csszengarden.com)

Grâce au HTML, nous avons pu rédiger le contenu de notre site, mais il est brut de décoffrage. Le CSS vient compléter ce code pour mettre en forme tout cela et donner au contenu l'apparence que l'on souhaite.

CSS : des débuts difficiles

Il faut savoir qu'aux débuts du Web, CSS n'existait pas. En fait, il n'y avait initialement que le langage HTML.
Le HTML est né en 1991, et CSS en 1996. Alors, vous vous dites sûrement : comment faisait-on la mise en forme, de 1991 à 1996 ? Eh bien, uniquement en HTML ! Il y avait en effet des balises HTML dédiées à la mise en forme. <font color="#aab1c3"> , par exemple, permettait de définir la couleur du texte.

Cependant, les pages HTML commençaient à devenir assez complexes. Il y avait de plus en plus de balises et c'était un joyeux mélange entre le fond et la forme, qui rendait la mise à jour des pages web de plus en plus complexe. C'est pour cela que l'on a créé le langage CSS.

Cependant, le CSS n'a pas été adopté immédiatement par les webmasters, loin de là. Il fallait se défaire de certaines mauvaises habitudes et cela a pris du temps. Encore aujourd'hui, on peut trouver des sites web avec des balises HTML de mise en forme anciennes et obsolètes, comme <font> !

CSS : la prise en charge des navigateurs

Tout comme le HTML, le CSS a évolué. Je vous avais indiqué qu'il y avait quatre versions importantes de CSS :

CSS 1 ;

CSS 2.0 ;

CSS 2.1 ;

CSS 3.

Ce sont les navigateurs web qui font le travail le plus complexe : ils doivent lire le code CSS et comprendre comment afficher la page.

Au début des années 2000, Internet Explorer était le navigateur le plus répandu, mais sa gestion du CSS est longtemps restée assez médiocre (pour ne pas dire carrément mauvaise). C'était la grande époque de la version 6 (IE6).

Depuis, de nombreux navigateurs sont arrivés et ont chahuté Internet Explorer : Mozilla Firefox bien sûr, mais aussi Google Chrome. Et je ne vous parle pas du succès des Mac et iPhone avec leur navigateur Safari. Cela a incité Microsoft à réagir et publier (après une longue période d'inactivité) IE 7, puis IE 8 et IE 9, 10, 11... et maintenant, Edge.

Bon, ton cours d'histoire, c'est bien joli, mais en quoi cela me concerne-t-il aujourd'hui ?

Que faut-il retenir de tout cela ? Que les navigateurs ne connaissent pas toutes les propriétés CSS qui existent. Plus le navigateur est vieux, moins il connaît de fonctionnalités CSS.

Je vais vous présenter dans ce cours un certain nombre de fonctionnalités de CSS qui ne marchent pas forcément sur les navigateurs les plus vieux. Je ne peux pas l'éviter, c'est comme cela : aucun navigateur ne connaît parfaitement toutes les fonctionnalités CSS de toute façon ! Au pire, si le navigateur ne connaît pas une propriété CSS, il l'ignore et ne met pas en forme, mais cela ne fait pas planter votre page : celle-ci sera donc toujours lisible.

Je vous recommande fortement de mettre dans vos favoris le site www.caniuse.com qui propose des tables de compatibilité des fonctionnalités de HTML et CSS sur différents navigateurs (et sur leurs différentes versions) :

Table de compatibilité CSS sur caniuse.com

Pour valider vos compétences avec un diplôme bac+2, suivez la formation développeur web avec OpenClassrooms. 6 mois en moyenne sont nécessaires pour finaliser cette formation à distance, qui peut aussi être suivie en alternance ou contrat d'apprentissage.

Où écrit-on le CSS ?

Vous avez le choix car on peut écrire du code en langage CSS à trois endroits différents :

dans un fichier .css ( méthode la plus recommandée) ;

dans l'en-tête <head> du fichier HTML ;

directement dans les balises du fichier HTML via un attribut style ( méthode la moins recommandée).

Je vais vous présenter ces trois méthodes, mais sachez d'ores et déjà que la première... est la meilleure.

Dans un fichier .css (recommandé)

Comme je viens de vous le dire, on écrit le plus souvent le code CSS dans un fichier spécial ayant l'extension .css (contrairement aux fichiers HTML qui ont l'extension .html ). C'est la méthode la plus pratique et la plus souple. Cela nous évite de tout mélanger dans un même fichier. J'utiliserai cette technique dans toute la suite de ce cours.

Commençons à pratiquer dès maintenant ! Nous allons partir du fichier HTML suivant :

Vous noterez le contenu de la ligne 5, <link rel="stylesheet" href="style.css" /> : c'est elle qui indique que ce fichier HTML est associé à un fichier appelé style.css et chargé de la mise en forme.

Enregistrez ce fichier sous le nom que vous voulez (par exemple, page.html ). Pour le moment, rien d'extraordinaire à part la nouvelle balise que nous avons ajoutée.

Maintenant, créez un nouveau fichier vide dans votre éditeur de texte (par exemple Sublime Text) et copiez-y ce bout de code CSS (rassurez-vous, je vous expliquerai tout à l'heure ce qu'il veut dire) :

Pour obtenir la coloration du code dans Sublime Text, enregistrez bien votre fichier avec l'extension .css d'abord.

Enregistrez le fichier en lui donnant un nom qui se termine par .css , comme style.css . Placez ce fichier .css dans le même dossier que votre fichier .html .

Dans Sublime Text, vous devriez observer quelque chose de similaire à la figure suivante.

Fichiers HTML et CSS dans Sublime Text

Dans votre explorateur de fichiers, vous devriez les voir apparaître côte à côte. D'un côté le .html , de l'autre le .css , comme à la figure suivante.

Fichiers HTML et CSS dans l'explorateur de fichiers

Ouvrez maintenant votre fichier page.html dans votre navigateur pour le tester, comme vous le faites d'habitude. Regardez, c'est magique : vos paragraphes sont écrits en bleu, comme dans la figure suivante !

Le texte est écrit en bleu

Il est inutile d'ouvrir directement le fichier style.css dans le navigateur. Il faut ouvrir le fichier page.html (il fera automatiquement appel au fichier style.css ).

Dans l'en-tête <head> du fichier HTML

Il existe une autre méthode pour utiliser du CSS dans ses fichiers HTML : cela consiste à insérer le code CSS directement dans une balise <style> à l'intérieur de l'en-tête <head> .

Voici comment on peut obtenir exactement le même résultat avec un seul fichier .html qui contient le code CSS (lignes 5 à 10) :

Testez, vous verrez que le résultat est le même.

Directement dans les balises (non recommandé)

Dernière méthode, à manipuler avec précaution : vous pouvez ajouter un attribut style à n'importe quelle balise. Vous insérerez votre code CSS directement dans cet attribut :

Cette fois, seul le texte du premier paragraphe (ligne 11), dont la balise contient le code CSS, sera coloré en bleu (figure suivante).

Le premier paragraphe est écrit en bleu

Quelle méthode choisir ?

Je trouve que la première méthode que tu recommandes est plus compliquée que les deux autres ! Pourquoi nous conseilles-tu de créer deux fichiers, j'étais bien, moi, avec juste un fichier .html !

Je vous recommande fortement de prendre l'habitude de travailler avec la première méthode parce que c'est celle utilisée par la majorité des webmasters... Pourquoi ?

Pour le moment, vous faites vos tests sur un seul fichier HTML. Cependant, votre site sera plus tard constitué de plusieurs pages HTML, on est d'accord ?
Imaginez : si vous placez le code CSS directement dans le fichier HTML, il faudra copier ce code dans tous les fichiers HTML de votre site ! Et si demain vous changez d'avis, par exemple si vous voulez que vos paragraphes soient écrits en rouge et non en bleu, il faudra modifier chaque fichier HTML un à un, comme le montre la figure suivante.

Le code CSS est répété dans chaque fichier HTML

Si vous travaillez avec un fichier CSS externe, vous n'aurez besoin d'écrire cette instruction qu'une seule fois pour tout votre site, comme le montre la figure suivante.

Le code CSS est donné une fois pour toutes dans un fichier CSS

Appliquer un style : sélectionner une balise

Maintenant que nous savons où placer le code CSS, intéressons-nous de plus près à ce code. Je vous ai donné, sans vous l'expliquer, un premier bout de code CSS :

Dans un code CSS comme celui-ci, on trouve trois éléments différents :

des noms de balises : on écrit les noms des balises dont on veut modifier l'apparence. Par exemple, si je veux modifier l'apparence de tous les paragraphes <p> , je dois écrire p ;

des propriétés CSS : les " effets de style " de la page sont rangés dans des propriétés. Il y a par exemple la propriété color qui permet d'indiquer la couleur du texte, font-size qui permet d'indiquer la taille du texte, etc. Il y a beaucoup de propriétés CSS et, comme je vous l'ai dit, je ne vous obligerai pas à les connaître toutes par cœur ;

les valeurs : pour chaque propriété CSS, on doit indiquer une valeur. Par exemple, pour la propriété color , il faut indiquer le nom de la couleur. Pour font-size , il faut indiquer quelle taille on veut, etc.

Schématiquement, une feuille de style CSS ressemble donc à cela :

Vous repérez dans cet extrait de code les balises, propriétés et valeurs dont je viens de vous parler.

Comme vous le voyez, on écrit le nom de la balise (par exemple h1 ) et on ouvre des accolades pour, à l'intérieur, mettre les propriétés et valeurs que l'on souhaite. On peut mettre autant de propriétés que l'on veut à l'intérieur des accolades. Chaque propriété est suivie du symbole " deux-points " ( : ) puis de la valeur correspondante. Enfin, chaque ligne se termine par un point-virgule ( ; ).

Je vous apprendrai de nombreuses propriétés dans les chapitres suivants. Pour le moment, dans les exemples, on va juste changer la couleur pour s'entraîner.

Le code CSS que nous avons utilisé jusqu'ici :

... signifie donc en français : " Je veux que tous mes paragraphes soient écrits en bleu. ". Le résultat est visible à la figure suivante.

Paragraphes écrits en bleu

Essayez de changer le nom de la balise affectée par le code CSS. Par exemple, si j'écris h1 , c'est le titre qui sera écrit en bleu. Modifiez votre fichier style.css comme ceci :

Maintenant, ouvrez à nouveau votre page HTML (souvenez-vous, c'est la page HTML qu'on ouvre dans le navigateur, pas le fichier CSS !) : vous devriez voir son titre s'afficher en bleu (figure suivante) !

Titre écrit en bleu

Appliquer un style à plusieurs balises

Prenons le code CSS suivant :

Il signifie que nos titres <h1> et nos textes importants <em> doivent s'afficher en bleu. Par contre, c'est un peu répétitif, vous ne trouvez pas ?

Heureusement, il existe un moyen en CSS d'aller plus vite si les deux balises doivent avoir la même présentation. Il suffit de combiner la déclaration en séparant les noms des balises par une virgule, comme ceci :

Le résultat se trouve à la figure suivante.

Titre et texte important écrits en bleu

Cela signifie : " Je veux que le texte de mes <h1> et <em> soit écrit en bleu ".

Vous pouvez indiquer autant de balises à la suite que vous le désirez.

Des commentaires dans du CSS

Comme en HTML, il est possible de mettre des commentaires. Les commentaires ne seront pas affichés, ils servent simplement à indiquer des informations pour vous, par exemple pour vous y retrouver dans un looong fichier CSS.

D'ailleurs, vous allez vous en rendre compte, en général le fichier HTML est assez court et la feuille CSS assez longue (si elle contient tous les éléments de style de votre site, c'est un peu normal). Notez qu'il est possible de créer plusieurs fichiers CSS pour votre site si vous ressentez le besoin de séparer un peu votre code CSS (en fonction des différentes sections de votre site, par exemple).

... De quoi on parlait déjà ? Ah oui, les commentaires en CSS.

Donc, pour faire un commentaire, c'est facile ! Tapez /* , suivi de votre commentaire, puis */ pour terminer votre commentaire.
Vos commentaires peuvent être écrits sur une ou plusieurs lignes. Par exemple :

Il est possible que j'utilise les commentaires dans la suite du cours, pour vous donner des explications à l'intérieur même des fichiers .css .

Appliquer un style : class et id

Ce que je vous ai montré jusqu'ici a quand même un défaut : cela implique par exemple que TOUS les paragraphes possèdent la même présentation (ici, ils seront donc tous écrits en bleu).
Comment faire pour que certains paragraphes seulement soient écrits d'une manière différente ? On pourrait placer le code CSS dans un attribut style sur la balise que l'on vise (c'est la technique que je vous ai présentée un peu plus tôt) mais, comme je vous l'ai dit, ce n'est pas recommandé (il vaut mieux utiliser un fichier CSS externe).

Pour résoudre le problème, on peut utiliser ces attributs spéciaux qui fonctionnent sur toutes les balises :

l'attribut class ;

l'attribut id .

Que les choses soient claires dès le début : les attributs class et id sont quasiment identiques. Il y a seulement une petite différence que je vous dévoilerai plus bas.
Pour le moment, et pour faire simple, on ne va s'intéresser qu'à l'attribut class .

Comme je viens de vous le dire, c'est un attribut que l'on peut mettre sur n'importe quelle balise, aussi bien titre que paragraphe, image, etc.

Oui, mais que met-on comme valeur à l'attribut class ?

En fait, vous devez écrire un nom qui sert à identifier la balise. Ce que vous voulez, du moment que le nom commence par une lettre.

Par exemple, je vais associer la classe introduction à mon premier paragraphe (ligne 12) :

Maintenant que c'est fait, votre paragraphe est identifié. Il a un nom : introduction . Vous allez pouvoir réutiliser ce nom dans le fichier CSS pour dire : " Je veux que seules les balises qui ont comme nom 'introduction' soient affichées en bleu ".

Pour faire cela en CSS, indiquez le nom de votre classe en commençant par un point, comme ci-dessous :

Testez le résultat : seul votre paragraphe appelé introduction va s'afficher en bleu (figure suivante) !

Seul le premier paragraphe s'affiche en bleu

Et l'attribut id , alors ?

Lui, il fonctionne exactement de la même manière que class , à un détail près : il ne peut être utilisé qu'une fois dans le code.

Quel intérêt ? Il y en a assez peu pour tout vous dire ; cela vous sera utile si vous faites du JavaScript plus tard, pour reconnaître certaines balises. D'ailleurs, nous avons déjà vu l'attribut id dans le chapitre sur les liens (pour réaliser des ancres). En pratique, nous ne mettrons des id que sur des éléments qui sont uniques dans la page, comme par exemple le logo :

Si vous utilisez des id , lorsque vous définirez leurs propriétés dans le fichier CSS, il faudra faire précéder le nom de l' id par un dièse (#) :

Je ne vous propose pas de le tester, cela fonctionne exactement comme class .

Si vous vous emmêlez les pinceaux entre class et id , retenez que deux balises peuvent avoir le même nom avec l'attribut class . Un nom d' id doit en revanche être unique dans la page HTML.

Les balises universelles

Il arrivera parfois que vous ayez besoin d'appliquer une class (ou un id ) à certains mots qui, à l'origine, ne sont pas entourés par des balises.

En effet, le problème de class , c'est qu'il s'agit d'un attribut. Vous ne pouvez donc en mettre que sur une balise. Si, par exemple, je veux modifier uniquement " bienvenue " dans le paragraphe suivant :

Bonjour et bienvenue sur mon site !

Cela serait facile à faire s'il y avait une balise autour de " bienvenue " , mais malheureusement, il n'y en a pas. Par chance, on a inventé... la balise-qui-ne-sert-à-rien.

En fait, on a inventé deux balises dites universelles, qui n'ont aucune signification particulière (elles n'indiquent pas que le mot est important, par exemple). Il y a une différence minime (mais significative !) entre ces deux balises :

<span> </span> : c'est une balise de type inline, c'est-à-dire une balise que l'on place au sein d'un paragraphe de texte pour sélectionner certains mots uniquement. Les balises <strong> et <em> sont de la même famille. Cette balise s'utilise donc au milieu d'un paragraphe et c'est celle dont nous allons nous servir pour colorer " bienvenue " ;

<div> </div> : c'est une balise de type block, qui entoure un bloc de texte. Les balises <p> , <h1> , etc., sont de la même famille. Ces balises ont quelque chose en commun : elles créent un nouveau " bloc " dans la page et provoquent donc obligatoirement un retour à la ligne. <div> est une balise fréquemment utilisée dans la construction d'un design, comme nous le verrons plus tard.

Pour le moment donc, nous allons utiliser plutôt la balise <span> . On la met autour de " bienvenue ", on lui ajoute une classe (du nom qu'on veut), on crée le CSS et c'est gagné !

Vous pouvez voir le résultat à la figure suivante.

Le mot " bienvenue " est écrit en bleu

Appliquer un style : les sélecteurs avancés

En CSS, le plus difficile est de savoir cibler le texte dont on veut changer la forme. Pour cibler (on dit " sélectionner ") les éléments de la page à modifier, on utilise ce qu'on appelle des sélecteurs. Vous en avez déjà utilisé quelques-uns un peu plus tôt dans ce chapitre, résumons-les pour commencer.

Les sélecteurs que vous connaissez déjà

Ces sélecteurs, que nous avons vus précédemment, sont de loin les plus couramment utilisés. Il faut les connaître par cœur. Commençons par la base de la base :

... signifie " Je veux toucher tous les paragraphes ". Après, c'est à vous de dire ce que vous faites à ces paragraphes (vous les écrivez en bleu, par exemple).

Nous avons aussi vu :

... qui signifie " Tous les titres et tous les textes importants ". Nous avons sélectionné deux balises d'un coup.

Et enfin, nous avons vu comment sélectionner des balises précises à qui nous avons donné un nom, grâce aux attributs class et id :

Vous savez quoi ? Il existe des dizaines d'autres façons de cibler des balises en CSS ! Nous n'allons pas toutes les voir car il y en a beaucoup et certaines sont complexes, mais voici déjà de quoi vous permettre d'être plus efficace en CSS !

Les sélecteurs avancés

* : sélecteur universel

Sélectionne toutes les balises sans exception. On l'appelle le sélecteur universel.

A B : une balise contenue dans une autre

Sélectionne toutes les balises <em> situées à l'intérieur d'une balise <h3> . Notez qu'il n'y a pas de virgule entre les deux noms de balises.

Exemple de code HTML correspondant :

A + B : une balise qui en suit une autre

Sélectionne la première balise <p> située après un titre <h3> .

Exemple :

A[attribut] : une balise qui possède un attribut

Sélectionne tous les liens <a> qui possèdent un attribut title .

Exemple :

A[attribut="Valeur"] : une balise, un attribut et une valeur exacte

Idem, mais l'attribut doit en plus avoir exactement pour valeur " Cliquez ici ".

Exemple :

A[attribut*="Valeur"] : une balise, un attribut et une valeur

Idem, l'attribut doit cette fois contenir dans sa valeur le mot " ici " (peu importe sa position).

Exemple :

D'autres sélecteurs existent !

Je ne vous ai présenté ici qu'une partie des sélecteurs CSS, mais sachez qu'il en existe beaucoup d'autres. Si vous voulez une liste complète, vous pouvez vous renseigner directement à la source : sur le site du W3C ! C'est très complet.

Sachez que nous découvrirons certains de ces autres sélecteurs dans la suite de ce cours !

En résumé

CSS est un autre langage qui vient compléter le HTML. Son rôle est de mettre en forme votre page web.

Il faut être vigilant sur la compatibilité des navigateurs avec certaines fonctionnalités récentes de CSS3. Quand un navigateur ne connaît pas une instruction de mise en forme, il l'ignore simplement.

On peut écrire le code CSS à plusieurs endroits différents, le plus conseillé étant de créer un fichier séparé portant l'extension .css (exemple : style.css ).

En CSS, on sélectionne quelles portions de la page HTML on veut modifier, et on change leur présentation avec des propriétés CSS :

Que pensez-vous de ce cours ?

Entraînez-vous en structurant votre CV Formatez du texte

Créez un compte
OpenClassrooms

Très heureux de voir que nos cours vous plaisent, déjà 5 pages lues aujourd'hui ! Vous pouvez continuer la lecture de nos cours en devenant un membre de la communauté d'OpenClassrooms. C'est gratuit !

Vous pourrez aussi suivre votre avancement dans le cours, faire les exercices et discuter avec les autres membres.

# data[].attributes.attachment_link.description
Je vous avais averti dès le début de ce cours : nous allons apprendre deux langages. Nous avons déjà bien entamé notre découverte du HTML, même s'il reste encore de nombreuses choses à apprendre (nous y reviendrons dans quelques chapitres). En revanche, il est temps maintenant de nous intéresser au CSS.

# data[].attributes.attachment_link.readable_text
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. Ce document de travail décrit les sélecteurs proposés pour CSS level 3. Il comprend et étend les sélecteurs de CSS level 2.

Statut de ce document

Ce document est une version de travail de l'un des "modules" de la future spécification CSS3. Il ne décrit pas seulement les sélecteurs déjà présents en CSS1 et CSS2, mais propose également de nouveaux sélecteurs pour CSS3 ainsi que pour les autres langages qui pourraient en avoir besoin. Le Groupe de Travail ne s'attend pas à ce que toutes les implémentations des CSS3 implémentent tous les types de sélecteurs. A la place, il y aura probablement un petit nombre de variantes des CSS3, aussi appelées "profils". Par exemple, il est possible que seul le profil pour les Agents Utilisateurs non interactifs contienne l'ensemble des sélecteurs proposés ici.

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. Si le retour est positif, la spécification deviendra une Recommendation Candidate du W3C. Les commentaires doivent être reçus avant le 1er Mars 2001.

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). Les Membres du W3C peuvent également envoyer leurs commentaires directement au Groupe de Travail CSS & FP.

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. Il est inapproprié d'utiliser les Documents de Travail du W3C en tant que documents de référence ou de les citer autrement qu'en tant que "travaux en cours". Sa publication n'implique pas son acceptation officielle par les membres du W3C ou par le Groupe de Travail CSS & FP (Accès réservé au membres du W3C).

La dernière version de ce document de travail est disponible en suivant le lien "Dernière version" ci-dessus, ou en visitant la liste des Rapports Techniques du W3C.

Des traductions de ce document sont disponibles. La version anglaise de cette spécification est la seule version normative.

Dépendances aux autres Modules CSS3

Syntaxe Générale (Module 1)

Assignation de Valeur, Cascade et Héritage (Module 4)

Contenu Généré / Marqueurs (Module 14)

Interface Utilisateur (Module 17)

Les membres du CSS & FP Working Group ont décidé durant leur réunion de Clamart de la modularisation de la spécification CSS.

Cette modularisation des CSS, associée à l'externalisation de la syntaxe générale, va diminuer la taille de la spécification et va permettre à de nouveaux langages de réutiliser les sélecteurs et/ou la syntaxe générale des CSS. Par exemple pour la définition de comportements ou de transformations d'arbre.

Cette spécification contient sa propre suite de tests, un test par concept introduit dans ce document. Ces tests ne sont pas des tests de conformité absolue mais se proposent de fournir aux usagers un moyen simple de vérifier si une partie de cette spécification est implémentée au moins a minima ou, au contraire, pas du tout.

1.1. Changements par rapport à CSS 2

Les principales différences entre les Sélecteur CSS 2 et les Sélecteurs W3C sont :

la liste des définitions de base (sélecteur, groupe de sélecteurs, sélecteur simple, etc.) a été clarifiée,

un composant optionel d'espace de noms est désormais autorisé dans les sélecteurs de type, le sélecteur universel et les sélecteurs d'attribut,

un nouveau combinateur,

de nouveaux sélecteurs simples comme les sélecteurs de sous-chaîne dans une valeur d'attribut ou de nouvelles pseudo-classes,

de nouveaux pseudo-éléments,

une ré-écriture de la grammaire des sélecteurs,

des profils à ajouter aux spécifications intégrant les Sélecteurs W3C et définissant le jeu de sélecteurs reconnu et accepté par ces spécifications,

les Sélecteurs W3C sont désormais un Module CSS 3 et une spécification indépendante. D'autres spécifications peuvent se référer à ce document indépendamment des CSS,

la spécification contient désormais sa propre suite de tests.

2. Sélecteurs

Un sélecteur W3C représente une structure. Cete structure peut être vue par exemple comme une condition (p.ex. dans une règle CSS) qui détermine quels éléments de l'arbre documentaire sont sélectionnés par le sélecteur, ou comme une description plate du fragment HTML ou XML correspondant à cette structure.

Les sélecteurs W3C vont de la simple représentation du nom d'un élément jusqu'à des représentations contextuelles complexes.

La table qui suit résume la syntaxe des sélecteurs W3C :

Exemple : en CSS, la signification réelle de chaque sélecteur est déterminée à partir de la table ci-dessus en faisant précéder le mot "sélectionne" au contenu de chaque cellule de la colonne "Signification".

La sensibilité à la casse des noms d'éléments d'un langage de documents donné dans les sélecteurs W3C dépend du langage de documents en question. Par exemple, en HTML, les noms d'éléments ne sont pas senbibles à la casse, alors qu'ils le sont en XML

La sensibilité à la casse des noms d'attribus et des valeurs d'attributs dépend également du langage de documents.

Un sélecteur est une chaîne d'une ou plusieurs séquences de sélecteurs simples séparés par des combinateurs.

Une séquence de sélecteurs simples est une chaîne de sélecteurs simples qui ne sont pas séparés par des combinateurs. Ele commence toujours par un sélecteur de type d'élément ou un sélecteur universel. Aucun autre sélecteur de type d'élément ou sélecteur universel n'est autorisé dans la séquence.

Un sélecteur simple est soit un sélecteur de type d'élément, un sélecteur universel, un sélecteur d'attribut, un sélecteur d'ID, un sélecteur de contenu ou une pseudo-classe. Un pseudo-élément peut suivre la dernière séquence de sélecteurs simples.

Les combinateurs sont : l'espace, ">", "+" et "~". Un espace peut être présent entre un combinateur et les sélecteurs simples qui l'entourent. Seuls les caractères "espace" (code Unicode 32), "tab" (9), "saut de ligne" (10), "retour chariot" (13), and "saut de page" (12) peuvent composer un espace. Les autres caractères de type espace, comme "em-space" (8195) et "ideographic space" (12288), ne peuvent composer un espace.

Quand plusieurs sélecteurs sont associés aux mêmes déclarations, ils peuvent être groupés en les séparant par des virgules.

Exemples CSS :

Dans cette exemple, les trois règles CSS sont réduites à une seule :

h1 { font-family: sans-serif }
h2 { font-family: sans-serif }
h3 { font-family: sans-serif }

est équivalent à :

h1, h2, h3 { font-family: sans-serif }

Attention : cette équivalence est vérifiée dans cet exemple car les trois sélecteurs initiaux sont des sélecteurs valides. Si l'un ou plus de ces sélecteurs est invalide, le groupe composé des trois sélecteurs est lui-même invalide, invalidant l'ensemble de la règle ; il n'y a alors pas équivalence.

Un sélecteur de type d'élément est le nom d'un type d'élement du langage de documents. Un sélecteur de type d'élement représente une occurence d'un élément du type donné dans l'arbre du document.

Exemple(s):

Le sélecteur suivant représente un élément h1 dans l'arbre du document :

h1

Les sélecteurs de type d'élément peuvent contenir un composant optionel d'espace de noms. Un préfixe d'espace de noms préalablement déclaré (via une règle-at @namespace) peut être préfixé à un nom d'élément en les séparant par le séparateur d'espace de noms "|". Le composant d'espace de noms peut être laissé vide pour indiquer que le sélecteur ne représente que des éléments sans espace de noms déclaré. De plus, une étoile peut être utilisée comme préfixe d'espace de noms, indiquant alors que le sélecteur représente des élements dans quelque espace de noms que ce soit (y compris les éléments sans espace de noms déclaré). Les sélecteurs de type d'élément qui n'ont pas de composant d'espace de noms (pas de séparateur d'espace de noms) représentent les éléments sans considération d'espace de noms (équivalent à "*|") sauf si un espace de noms par défaut à été déclaré, auquel cas le sélecteur représente les éléments dans cet espace de noms par défaut.

Une autre approche serait d'associer les sélecteurs de type d'élément n'ayant pas de composant d'espace de noms qu'aux éléments n'ayant pas d'espace de noms (sauf si un espace de noms par défaut a été déclaré). Dans ce cas, le sélecteur " h1"serait équivalent au sélecteur "|h1" et non pas au sélecteur "*|h1". L'aspect négatif de cette approche est que les feuilles de styles existantes (écrites dans usage d'espaces de noms) serait inopérantes dans tous les documents faisant usage des espaces de noms, c'est-à-dire dans tous les documents XHTML.

Il doit être noté que si un préfixe d'espace de noms utilisé dans un sélecteur n'a pas été préalablement déclaré, le sélecteur doit alors être considéré comme invalide et l'ensemble de la règle est alors ignorée en conformité avec les règles standard de gestion d'erreur.

Il doit être de plus noté que dans un outil gérant les espaces de noms, les sélecteurs de type d'élément sont comparés seulement à la partie locale du nom qualifié d'un élément. Voir ci-dessous pour les comparaisons effectuées dans un outils ne gérant pas les espaces de noms.

En résumé :

ns|E

éléments E dans l'espace de nom ns

*|E

éléments E dans tout espace de noms, y compris ceux sans espace de noms déclaré

|E

éléments E sans espace de noms déclaré

E

si aucun espace de noms par défaut n'a été déclaré, ceci est équivalent à *|E. Sinon, c'est équivalent à ns|E où ns est l'espace de noms par défaut.

Exemples CSS :

@namespace foo url(http://www.foo.com);

foo|h1 { color: blue }

foo|* { color: yellow }

|h1 { color: red }

*|h1 { color: green }

h1 { color: green }

La première règle sélectionnera uniquement les éléments h1 dans l'espace de noms "http://www.foo.com".

La seconde règle sélectionnera tous les éléments de l'espace de noms "http://www.foo.com".

La troisième règle sélectionnera uniquement les éléments h1 elements sans déclaration d'espace de noms.

La quatrième règle sélectionnera les éléments h1 dans tout espace de noms (y compris ceux sans espace de noms déclaré).

La dernière règle est équivalente à la quatrième car aucun espace de noms par défaut n'a été défini.

Le sélecteur universel, dénoté"*", represente le nom qualifié de tout type d'élément. Il représente donc tout élément de l'arbre du document dans tout espace de noms (y compris les éléments sans espace de noms déclaré) si aucune espace de noms par défaut n'a été déclaré. Si un espace de noms par défaut a été déclaré, consultez ci-dessous Sélecteur universel et Espaces de noms.

Si le sélecteur universel n'est pas le seul composant d'une séquence de sélecteurs simples, le * peut être omis. Par exemple:

*[LANG=fr] et [LANG=fr] sont équivalents,

*.warning et .warning sont équivalents,

*#myid et #myid sont équivalents.

Attention : il est recommandé de ne pas omettre le *, representant le sélecteur universel.

Le sélecteur universel peut contenir un composant optionel d'espace de noms

ns|*

tous les éléments de l'espace de noms ns

*|*

tous les éléments

|*

tous les éléments sans espace de noms déclaré

*

si aucun espace de noms par défaut n'a été spécifié, ceci est équivalent à *|*. Dans le cas contraire, c'est équivalent à ns|* où ns est l'espace de noms par défaut.

Les sélecteurs W3C permettent de représenter les attributs attachés à un élément.

6.3.1 Représentation des attributs et des valeurs d'attributs

Quatre différents sélecteurs d'attribut sont disponibles :

[att]

Représente l'attribut att, quelque soit la valeur de l'attribut.

[att=val]

Représente l'attribut att, sa valeur étant exactement égale à "val".

[att~=val]

Représente l'attribut att, sa valeur étant une liste de mots séparés par des espaces, l'un de ces mots étant exactement "val". En cas d'usage de ce sélecteur, les mots dans la valeur ne doivent pas être séparés par des espaces (puisqu'ils sont séparés par des espaces).

[att|=val]

Représente l'attribut att, sa valeur étant une liste de mots séparés par des tirets et commençant par "val". La comparaison se fait toujours au début de la valeur de l'attribut. Ceci est principalement destiné à la sélection de sous-codes linguistiques (p.ex. l'attributLANG en HTML) conformément à la RFC 1766 ([RFC1766]).

Les valeurs d'attributs doivent être des identificateurs ou des chaînes de caractères. La sensibilité à la casse des noms d'attributs et de leurs valeurs dépend du langage de documents.

Exemple(s):

Par exemple, le sélecteur suivant représente un élément h1 portant l'attribut title, quelque soit sa valeur:

h1[title]

Exemple(s):

Dans l'exemple suivant, le sélecteur représente un élément span dont l'attribut class a exactement la veleur "exemple":

span[class=exemple]

Plusieurs sélecteurs d'attribut peuvent être utilisés pour représenter plusieurs attributs d'un élément, ou plusieurs fois le même attribut.

Exemple(s):

Ici, le sélecteur représente un élément span dont l'attribut hello a exactement la valeur "Cleveland" et dont l'attribut goodbye a exactement la valeur "Columbus":

span[hello="Cleveland"][goodbye="Columbus"]

Exemple(s):

Les sélecteurs suivants illustrent les différences entre "=" et "~=". Le premier sélecteur représentera, par exemple, la valeur "copyright copyleft copyeditor" pour l'attribut rel. Le second sélecteur représentera uniquement un élément a dont l'attribut href a exactement la veleur "http://www.w3.org/".

a[rel~="copyright"]
a[href="http://www.w3.org/"]

Exemple(s):

Le sélecteur suivant représente un élément quelconque dont l'attribut lang a la valeur "fr" (p.ex. dont la langue est le Français).

*[lang=fr]

Exemple(s):

Le sélecteur qui suit représente un élément quelconque dont l'attribut lang a une valeur commençant par "en", par exemple "en", "en-US" ou "en-cockney":

*[lang|="en"]

Exemple(s):

De même, les sélecteurs qui suivent représentent un élément DIALOGUE ayant deux valeurs différentes pour le même attribut character:

DIALOGUE[character=romeo]

DIALOGUE[character=juliet]

6.3.2 Sélecteurs de sous-chaîne dans la valeur d'un attribut

Trois différents sélecteurs d'attribut sont disponibles pour la représentation d'une séquence dans la valeur d'un attribut :

[att^="val"]

Représente l'attribut att, sa valeur commençant exactement par le préfixe "val"

[att$=ident]

Représente l'attribut att, sa valeur finissant exactement par le préfixe "ident"

[att*="val"]

Représente l'attribut att, sa valeur contenant au moins une fois la sous-chaîne "val"

Les valeurs d'attributs doivent être des identificateurs ou des chaîne de caractères. La sensibilité à la casse des noms d'attributs et de leurs valeurs dépend du langage de documents.

Exemple(s) :

Le sélecteur suivant représente un élément HTML object, ciblant une image.

object[type^="image/"]

Le sélecteur suivant représente un élément XML foo1 portant l'attribut bar, la valeur de cet attribut finissant par "cpg".

foo1[bar$="cpg"]

Le sélecteur suivant représente un paragraphe HTML dont la valeur de l'attribut title contient la sous-chaîne "hello".

p[title*="hello"]

Les sélecteurs d'attribut peuvent contenir un composant optionel d'espace de noms. Un préfixe correspondant à un espace de noms préalablement déclaré (via la règle-at @namespace) peut précéder le nom d'un attribut en les séparant par le séparateur d'espace de noms "|". En conformité avec la recommandation Namespaces in XML, les espaces de noms par défaut ne s'appliquent pas aux attributs, et les sélecteurs d'attributs sans composant d'espace de noms représentent donc seulement les attributs sans espace de noms déclaré (équivalent à "|attr"). Une étoile peut être utilisée comme composant d'espace de noms pour indiquer que le sélecteur représente tous les attributs sans considération d'espaces de noms.

Exemples CSS :

@namespace foo "http://www.foo.com";

[foo|att=val] { color: blue }

[*|att] { color: yellow }

[|att] { color: green }

[att] { color: green }

La première règle s'appliquera uniquement aux éléments portant l'attribut att dans l'espace de noms "http://www.foo.com" avec la valeur "val".

La second règle s'appliquera uniquement aux éléments portant l'attribut att sans considération d'espace de noms (incluant ceux sans espace de noms déclaré).

Les deux dernières règles sont équivalentes et s'appliqueront uniquement aux éléments portant l'attribut att sans déclaration d'espace de noms.

Les sélecteurs d'attribut représentent des valeurs d'attribut dans l'arbre documentaire. Des valeurs d'attribut par défaut peuvent être définies dans la DTD ou ailleurs. Les Sélecteurs W3C doivent être implémentés de manière à fonctionner même si les valeurs par défaut ne sont pas présentes dans l'arbre documentaire.

Exemple(s):

Par exemple, considérons un élément EXAMPLE avec un attribut notation ayant la valeur par défaut "decimal". Le fragment de DTD pourrait être:

<!ATTLIST EXAMPLE notation (decimal,octal) "decimal">

Si les sélecteurs suivants représentent un élément EXAMPLE dont la valeur de l'attribut notation est explicitement définie

EXAMPLE[notation=decimal]
EXAMPLE[notation=octal]

on pourra utiliser le sélecteur qui suit pour représenter le cas où l'attribut est défini par défaut, et non explicitement:

EXAMPLE

En HTML, les auteurs peuvent utiliser la notation point (.) comme alternative à la notation~= notation dans le cas de l'attribut class. En HTML, div.value et div[class~=value] ont donc la même signification. La valeur de l'attribut doit suivre immédiatement le ".".

Exemple(s):

On pourra représenter un élément quelconque portant class~="pastoral" de la manière suivante:

*.pastoral

ou tout simplement

.pastoral

Le sélecteur suivant représente un élément h1 portant class~="pastoral":

h1.pastoral

Exemple(s):

Le sélecteur suivant représente un élément p dont l'attribut class contient une liste de valeurs séparées par des espaces et contenant "pastoral" et "marine":

p.pastoral.marine

Il est absolument identique à :

p.marine.pastoral

Ce sélecteur représente par exemple un élément p avec class="pastoral blue aqua marine" ou class="marine blue pastoral aqua" mais pas avec class="pastoral blue".

Les langages de documents peuvent contenir des attributs qui sont déclarés être de type ID. Les attributs de type ID sont spéciaux en ce sens que deux tels attributs ne peuvent pas avoir la même valeur dans un document, sans considération du type des éléments qui les portent ; quelque soit le langage, un attribut ID peut être utilisé pour identifier de façon unique les éléments. En HTML, tous les attributs ID sont nommés "id" ; les applications XML peuvent nommer les attributs ID différemment, mais avec les mêmes contraintes.

L'attribut ID d'un langage de documents permet aux auteurs d'assigner un identificateur à une instance d'élément dans l'arbre documentaire. Les sélecteurs W3C d'ID représentent une instance d'élément en se basant sur son identificateur. Un sélecteur d'ID contient un "#" immédiatement suivi de la valeur d'ID.

Exemple(s):

Le sélecteur d'ID qui suit représente un élément h1 dont l'attribut id a la valeur "chapter1" :

h1#chapter1

Le sélecteur d'ID ci-dessous représente tout élément dont l'attribut id a la valeur "chapter1" :

#chapter1

Le sélecteur d'ID suivant représente tout élément dont l'ID a la valeur "z98y".

*#z98y

Note. En XML 1.0 [XML10], l'information déterminant quels attributs contiennent les IDs d'éléments est contenue dans une DTD. Lors du parsing XML, les Agents Utilisateurs ne lisent pas toujours la DTD, and peuvent donc ne pas savoir ce qu'st l'ID d'un élément. Si un auteur de feuille de styles sait ou soupçonne que tel est le cas, il doit alors plutôt utiliser les sélecteurs d'attributs usuels :[name=p371] au lieu de #p371. Bien entendu, les éléments de documents XML 1.0 sans DTD n'ont pas d'ID du tout.

Le concept de pseudo-classe est introduit pour permettre une sélection basée sur des informations qui résident à l'extérieur de l'arbre documentaire ou qui ne peuvent pas être exprimées à l'aide des autres sélecteurs simples.

Une pseudo-classe contient toujours deux-points (:) suivis du nom de la pseudo-classe et optionnellement d'une valeur entre parenthèses.

Les pseudo-classes sont autorisées dans toutes les séquences de sélecteurs simples contenues dans un sélecteur. Les pseudo-classes sont autorisées partout dans une séquence de sélecteurs simples, après le sélecteur de type ou le sélecteur universel (éventuellement omis) initial. Les noms des pseudo-classes sont insensibles à la casse. Quelques pseudo-classes sont mutuellement exclusives, alors que d'autres peuvent être appliquées simultanément au même élément. Des pseudo-classes peuvent être dynamiques, en ce sens qu'un élément peut acquérir ou perdre une pseudo-classe lorsqu'un usager interagit avec le document.

Les pseudo-classes dynamiques classent les éléments selon des caractéristiques autres que le nom, les attributs ou le contenu, caractéristiques qui en principe ne peuvent pas être déduites de l'arbre documentaire.

Les pseudo-classes dynamiques n'apparaissent pas dans le source du document ni dans l'arbre documentaire.

Les Agents Utilisateurs restituent les liens non visités différemment des liens visités. Les Sélecteurs W3C offrent les pseudo-classes :link et :visited pour les distinguer :

La pseudo-classe :link caractérise les liens qui n'ont pas encore été visité,.

La pseudo-classe :visited s'applique une fois que le lien a été visité par l'usager.

Note. Après un certain délai, les Agents Utilisateurs peuvent choisir de ramener un lien à l'état (non visité) ':link'.

Les deux états sont mutuellement exclusives.

Exemple(s):

Le sélecteur suivant représente des liens portant la classe external et déjà visités :

a.external:visited

Les Agents Utilisateurs interactifs changent parfois la restitution en réponse à des actions de l'usager. Les Sélecteurs W3C offrent trois pseudo-classes pour la sélection d'un élément sur lequel l'usager agit.

La pseudo-classe:hover s'applique quand l'utilisateur désigne un élément (avec un périphérique de pointage), mais ne l'active pas. Par exemple, un Agent Utilisateur visuel pourrait appliquer cette pseudo-classe quand le curseur (le pointeur de la souris) se trouve au-dessus d'une boîte générée par l'élément. Les Agents Utilisateurs ne supportant pas lesmedia interactifs n'ont pas à supporter cette pseudo-classe. Certains Agents Utilisateurs conformes et supportant lesmedia interactifs peuvent ne pas être capable de supporter cette pseudo-classe (par exemple, un stylet de pointage).

La pseudo-classe :active s'applique pendant qu'un élément est activé par l'utilisateur. Par exemple, entre le moment où l'utilisateur appuie sur le bouton de la souris et celui où il le relache.

La pseudo-classe :focus s'applique pendant qu'un élément a le focus (accepte les évènements clavier ou souris, ou d'autres formes d'entrée).

Seuls les éléments dont la propriété 'user-input' (Cf. [UI]) a pour valeur "enabled" peuvent devenir:active ou acquérir :focus.

Ces pseudo-classes ne sont pas mutuellement exclusives. Un élément peut déclencher plusieurs d'entre elles en même temps.

Exemple(s):

a:link    /* liens non visites */
a:visited /* liens visites     */
a:hover   /* survol            */
a:active  /* liens actifs      */

Exemple(s):

Un exemple de pseudo-classes dynamiques combinées :

a:focus
a:focus:hover

Le dernier sélecteur représente les éléments A qui ont la pseudo-classe :focus et la pseudo-classe :hover.

Note. Un élément peut être à la fois ':visited' et ':active' (ou ':link' et ':active').

Certains URIs se réfèrent à un point bien déterminé dans une ressource. Ce type d'URI se termine par "#" suivi par un identificateur d'ancre (appelé l'identificateur de fragment).

Les URIs avec un identificateur de fragment ciblent un élément donné dans le document, appelé élément cible. Par exemple, voici un URI ciblant une ancre nommée section_2 dans un document HTML :

http://somesite.com/html/top.html#section_2

Un élément cible peut être représenté par la pseudo-classe:target :

p.bar:target

représente un élément p de classe bar qui est la cible deURI.

Exemple CSS d'usage de la pseudo-classe :target :

*:target { color : red }

*:target:before { content : url(target.png) }

Si le langage de documents spécifie comment est déterminée la langue humaine d'un élément, il est possible d'écrire des sélecteurs qui représentent un élément sur la base de sa langue. Par exemple, en HTML [HTML40], la langue est déterminée par la combinaison de l'attribut lang, de l'élément meta, et potentiellement d'informations venant du protocole (comme les en-têtes HTTP). XML utilise un attribut appelé XML:LANG, et il peut y avoir d'autres méthodes spécifiques au langage de documents pour déterminer la langue.

La pseudo-classe :lang(C) représente un élément dans la langue C. C est ici un code linguistique comme spécifié par HTML 4.0[HTML40] et RFC 1766[RFC1766]. Il est sélectionné de la même manière que par le sélecteur d'attribut linguistique[att |= "C"].

Exemple(s):

Les deux premiers sélecteurs ci-dessous représentent un document HTML qui est en Français ou en Allemand. Les deux sélecteurs suivants représentent des citations q contenues dans un élément quelconque dont la langue est le Français ou l'Allemand.

html:lang(fr)
html:lang(de)
:lang(fr) > q
:lang(de) > q

La pseudo-classe :enabled permet aux auteurs de modifier le style des éléments d'interface qui sont actifs - que l'utilisateur peut sélectionner/activer d'une manière ou d'une autre (par exemple en cliquant sur un bouton avec la souris). Une telle pseudo-classe est utile parce qu'il est autrement impossible de spécifier programmatiquement l'apparence par défaut de disons un élément input actif sans spécifier également son allure s'il est inactif.

Parallèlement à :enabled, :disabled permet aux auteurs de spécifier exactement comment un élément d'interface inactif ou inactivé doit être restitué.

Notez que la plupart des éléments ne sont ni actifs ni inactifs. Un élément est actif si l'utilisateur peut l'activer ou lui transférer le focus. Un élément est inactif s'il peut être actif, mais que l'utilisateur ne peut à ce moment précis l'activer ou lui transférer le focus.

La pseudo-classe :checked ne s'applique aux éléments qui ont 'user-input: enabled' ou 'user-input : disabled' (voyez [UI] à propos de la propriété 'user-input'). L'utilisateur peut changer l'état des éléments radio et cases à cocher. Quelques entrées de menu sont "cochées" quand l'utilisateur les sélectionne. Quand de tels éléments passent dans l'état "allumé", la pseudo-classe:checked s'applique. La pseudo-classe:checked s'applique initialement à de tels éléments qui possèdent l'attribut HTML4 selected tels que décrits dans la Section 17.2.1 de HTML4, mais bien entendu l'utilisateur peut faire passer à "éteint" ces éléments auquel car la pseudo-classe:checked ne s'applique plus. Alors que la pseudo-classe :checked est dynamique par nature, et est modifiée par l'action de l'utilisateur, elle s'applique à tous les media puisqu'elle peut aussi se fonder sur la présence de l'attribut sémantique HTML4 selected.

La pseudo-classe :indeterminate s'applique aux éléments qui ont 'user-input: enabled' ou 'user-input: disabled' (voyez [UI] à propos de la propriété 'user-input'). Les éléments radio et cases à cocher peuvent être changés d'état par l'utilisateur, mais sont parfois dans un état indéterminé, ni coché ni non-coché. Cela peut être causé par un attribut de l'élément, ou par une manipulation du DOM. La pseudo-classe:indeterminate s'applique à de tels éléments. Alors que la pseudo-classe:indeterminate est dynamique par nature, et est modifiée par l'action de l'utilisateur, elle s'applique à tous les media puisqu'elle peut aussi se fonder sur la présence de l'attribut sémantique HTML4 selected.

Les composants d'un radio-groupe sans choix pré-sélectionné sont un exemple d'état :indeterminate.

Les Sélécteurs W3C introduisent la notion de pseudo-classes structurelles qui permettent la sélection sur la base d'informations supplémentaires se trouvant dans l'arbre documentaire mais qui ne peuvent être représentées par d'autres sélecteurs simples ou par des combinateurs.

Veuillez noter que le texte seul PCDATA n'est pas compté lors du calcul de la position d'un élément dans la liste des enfants de son parent. Lors du calcul de la position d'un élément dans la liste des enfants de son parent, la numérotation commence à 1.

La pseudo-classe :root représente un élément qui est la racine du document. En HTML 4, il s'agit de l'élément html. En XML, c'est ce qui est spécifié par la DTD, le schéma, l'espace de noms pour le document XML en question.

La notation de pseudo-classe :nth-child(an+b) représente un élément qui a an+b-1 éléments frères devant lui dans l'arbre documentaire, pour une valeur entière positive ou nulle de n. En d'autres mots, cela sélectionne chaque b-ième fils d'un élément après que tous ses enfants aient été séparés en groupes de a éléments chacun. Par exemple, cela permet de sélectionner les lignes paires dans un tableau, et peut être utilisé, par exemple, pour alterner la couleur du texte d'un paragraphe sur quatre couleurs. Les valeurs de a et b doivent être des entiers négatifs, positifs ou nuls. L'index du premier enfant d'un élément esr 1.

De plus, :nth-child() peut prendre pour argument 'odd' et 'even'. 'odd' a la même signification que 2n+1, et 'even' a la même signification que 2n.

Exemples:

tr:nth-child(2n+1) /* represents every odd row of a HTML table */
tr:nth-child(odd)  /* same */
tr:nth-child(2n)   /* represents every even row of a HTML table */
tr:nth-child(even) /* same */

/* Alternate paragraph colours in CSS */
p:nth-child(4n+1) { color: navy; }
p:nth-child(4n+2) { color: green; }
p:nth-child(4n+3) { color: maroon; }
p:nth-child(4n+4) { color: purple; }

Lorsque a=0, il n'y a pas de répétition, et donc par exemple :nth-child(0n+5) représente uniquement le cinquième enfant. Quand a=0, la partie a n'est pas obligatoire, et la syntaxe se simplifie alors en:nth-child(b), l'exemple précédent devenant:nth-child(5).

Autres exemples:

foo:nth-child(0n+1)   /* represents an element foo, first child of its parent element */
foo:nth-child(1)      /* same */

Quand a=1, le nombre peut être omis.

Les exemples suivants sont donc équivalents :

bar:nth-child(1n+0)   /* represents all bar elements, specificity (0,1,1) */
bar:nth-child(n+0)    /* same */
bar:nth-child(n)      /* same */
bar                   /* same but lower specificity (0,0,1) */

Si b=0, alors tous les éléments dont l'index est multiple de a sont sélectionnés.

Par exemple :

tr:nth-child(2n) /* represents every even row of a HTML table */

Si a et b sont tous deux égaux à 0, la pseudo-classe ne représente aucun élément dans l'arbre documentaire.

La valeur a peut être négative, mais seules les valeurs positives de an+b, pour n=0, peuvent représenter un élément dans l'arbre documentaire, bien entendu.

Par exemple:

html|tr:nth-child(-n+6)  /* represents the 6 first rows of XHTML tables */

La notation de pseudo-classe :nth-last-child(an+b) représente un élément qui an+b-1 frères après lui dans l'arbre documentaire, pour une valeur entière positive ou nulle de n. Voyez la pseudo-classe:nth-child() pour la syntaxe de son argument. Elle accepte également les valeurs 'even' et 'odd' pour argument.

Exemples:

tr:nth-last-child(-n+2)    /* represents the two last rows of a HTML table */

foo:nth-last-child(odd)    /* represents all odd foo elements in their parent element,
                              counting from the last one */

La notation de pseudo-classe :nth-of-type(an+b) représente un élément qui a an+b-1 frères du même type d'élément devant lui dans l'arbre documentaire, pour une valeur entière positive ou nulle de n. En d'autres mots, cela sélectionne chaque b-ième fils du type d'élément donné d'un élément après que tous ses enfants aient été séparés en groupes de a éléments chacun. Voyez la pseudo-classe:nth-child() pour la syntaxe de son argument. Elle accepte également les valeurs 'even' et 'odd' pour argument.

Par exemple, cela permet en CSS d'alterner la position des images flotantes :

img:nth-of-type(2n+1) { float: right; }
img:nth-of-type(2n) { float: left; }

La notation de pseudo-classe :nth-last-of-type(an+b) représente un élément qui a an+b-1 frères du même type d'élément après lui dans l'arbre documentaire, pour une valeur entière positive ou nulle de n. Voyez la pseudo-classe:nth-child() pour la syntaxe de son argument. Elle accepte également les valeurs 'even' et 'odd' pour argument.

Par exemple, pour représenter tous les h2 fils d'un élément XHTML body sauf le premier et le dernier, on pourra écrire le sélecteur suivant :

body > h2:nth-of-type(n+2):nth-last-of-type(n+2)

Dans ce cas, on peut aussi utiliser :not(), malgré que le sélecteur ne soit pas moins long :

body > h2:not(:first-of-type):not(:last-of-type)

Identique à :nth-child(1). La pseudo-classe :first-child représente un élément qui est le premier fils d'un autre élément.

Exemple(s):

Dans l'exemple qui suit, le sélecteur représente un élément p qui est le premier fils d'un élément div.

div > p:first-child

Ce sélecteur peut représenter un p à l'intérieur d'un div du fragment suivant ::

<p> The last P before the note.</p>
<div class="note">
   <p> The first P inside the note.</p>
</div>

mais ne peut pas représenter le second p du fragment suivant :

<p> The last P before the note.</p>
<div class="note">
   <h2>Note</h2>
   <p> The first P inside the note.</p>
</div>

Les deux sélecteurs qui suivent sont équivalents :

* > a:first-child   /* a is first child of any element */
a:first-child       /* Same */

Identique à :nth-last-child(1). La pseudo-classe :last-child pseudo-class représente un élément qui est le dernier fils d'un autre élément.

Exemple:

Le sélecteur suivant représente une entrée de liste li qui est le dernier enfant d'une liste ordonnée ol.

ol li:last-child

Identique à :nth-of-type(1). La pseudo-classe :first-of-type pseudo-class représente un élément qui est le premier enfant de son type dans la liste des enfants de son élément parent.

Exemple:

Le sélecteur qui suit représente un titre de définition dt à l'intérieur d'une liste de définitions dl, cette dt étant le premier enfant de son type dans la liste des enfants de l'élément parent.

dl dt:first-of-type

C'est une description valide pour les deux premiers dt dans l'exemple qui suit mais pas pour le troisième ::

<dl><dt>gigogne</dt>
        <dd><dl><dt>fus&eacute;e</dt>
                    <dd>multistage rocket</dd>
                <dt>table</dt>
                    <dd>nest of tables</dd>
            </dl></dd>
</dl>

Identique à :nth-last-of-type(1). La pseudo-classe :last-of-type pseudo-class représente un élément qui est le premier enfant de son type dans la liste des enfants de son élément parent.

Exemple:

Le sélecteur suivant représente la dernière cellule de données td d'une ligne de tableau..

tr > td:last-of-type

Représente un élément qui n'a aucun frère. Identique à :first-child:last-child ou :nth-child(1):nth-last-child(1), mais avec une spécificité inférieure.

Représente un élément qui n'a pas de frère avec le même nom d'élément. Identique à :first-of-type:last-of-type or:nth-of-type(1):nth-last-of-type(1), mais avec une spécificité inférieure.

:empty pseudo-class

La pseudo-classe empty représente un élément qui n'a aucun enfant, y compris les noeuds textuels.

Exemples:

p:empty est une représentation valide du fragment ci-dessous :

<p></p>

foo:empty n'est pas une représentation valide des fragments ci-dessous :

<foo>bar</foo>

<foo><bar>bla</bar></foo>

<foo>this is not <bar>:empty</bar></foo>

La notation de pseudo-classe :contains("foo") représente un élément dont le contenu textuel contient la sous-chaîne donnée. L'argument de cette pseudo-classe peut être une chaîne de caractères (entourée par des guillemets) ou un mot-clé.

L'usage de la pseudo-classe de contenu est restreint aux media statiques.

Le contenu textuel d'un élément donné est déterminé par la concaténation de tous les PCDATA contenus dans l'élément et ses sous-éléments.

Exemple:

p:contains("Markup")

est une description correcte et valide, mais partielle, de :

<p><strong>H</strong>yper<strong>t</strong>ext
   <strong>M</strong><em>arkup</em>
   <strong>L</strong>anguage</p>

Des caracatères spéciaux peuvent être insérés dans l'argument de la pseudo-classe de contenu par usage du mécanisme d'échappement pour les caractères Unicode et caractères spéciaux.

Note : :contains() est une pseudo-classe, pas un pseudo-élément. La règle CSS suivante appliquée au fragment HTML ci-dessus n'ajoutera pas un fond rouge au seul mot "Markup" mais ajoutera ce fond à tout le paragraphe.

P:contains("Markup") { background-color : red }

6.6.7 La pseudo-classe de negation

La pseudo-classe de négation est une notation fonctionnelle prenant un sélecteur simple (à l'exclusion de la pseudo-classe de négation elle-même) pour argument. Elle représente un élément qui n'est pas représenté par l'argument.

Exemple(s) :

Le sélecteur CSS suivant sélectionne tous les éléments button qui ne sont pas désactivés dans un document HTML :

button:not([DISABLED])

Le sélecteur suivant représente tous les éléments sauf les éléments FOO :

*:not(FOO)

Le groupe de sélecteurs suivant représente tous les éléments sauf les liens HTML :

html|*:not(:link):not(:visited)

Note: la pseudo-classe :not() permet d'écrire des sélecteurs inutiles. Par exemple,:not(*|*), qui ne représente aucun élément du tout, or foo:not(bar), qui est équivalent à foo mais avec une spécificité supérieure.

Les pseudo-éléments créent des abstractions hors de l'arbre documentaire qui ne sont pas spécifiables par le langage de documents. Par exemple, les langages de documents n'offrent aucun moyen d'accéder à la première lettre ou la première ligne du contenu d'un élément. Les pseudo-éléments permettent aux auteurs de se référer à ces données inaccessibles autrement. Les pseudo-éléments peuvent aussi fournir aux auteurs un moyen de se référer à du contenu qui n'existe pas dans le source du document (par exemple, les pseudo-éléments :before et:after donnent accés au contenu généré).

Un pseudo-élément est formé de deux deux-points (::) suivis du nom du pseudo-élément.

Attention : cette notation :: est introduite par le présent document dans le but d'établir une discrimination entre les pseudo-classes et les pseudo-éléments. Pour des raisons de compatibilité avec les feuilles de styles existantes, les Agents Utilisateurs doivent aussi accepter la notation précédente avec un seul deux-points. Cepedant cette compatibilité n'est pas requise pour les nouveaux pseudo-élémentsp introduits dans CSS level 3.

Les pseudo-éléments peuvent apparaître une fois seulement dans la séquence de sélecteurs simples représentant les sujets du sélecteur.

Les noms des pseudo-éléments sont insensibles à la casse.

Le pseudo-élément ::first-line décrit la première ligne formatée d'un élément.

Par exemple en CSS :

p::first-line { text-transform: uppercase }

La règle ci-dessus signifie "changer les lettres de la première ligne de chaque paragraphe en majuscules". Cependant, le sélecteur p::first-line ne sélectionne aucun élément HTML réel. Il sélectionne un pseudo-élément que les Agents Utilisateurs conformes vont insérer au début de chaque paragraphe.

Veuillez noter que la longueur de la première ligne dépend d'un grand nombre de facteurs, y compris de la largeur de la page, la taille de fonte, etc. Ainsi, dans un paragraphe HTML ordinaire tel que :

<p>This is a somewhat long HTML
paragraph that will be broken into several
lines. The first line will be identified
by a fictional tag sequence. The other lines
will be treated as ordinary lines in the
paragraph.</p>

les lignes qui seront découpées de la manière suivante :

THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT
will be broken into several lines. The first
line will be identified by a fictional tag
sequence. The other lines will be treated as
ordinary lines in the paragraph.

peuvent être "réécrites" par les Agents Utilisateurs pour y inclure la séquence de balises fictives pour ::first-line. Cette séquence de balises fictives aide à montrer comment les propriétés sont héritées.

<p><p::first-line> This is a somewhat long HTML paragraph that will</p::first-line> be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</p>

Si un pseudo-element scinde un élément réel, l'effet désiré peut souvent être décrit par une séquence de balises fictives qui ferme et ré-ouvre l'élément. Ainsi, si l'on balise le paragraphe précédent avec un élément span :

<p><span class="test"> This is a somewhat long HTML paragraph that will be broken into several lines.</span> The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</p>
l'Agent Utilisateur pourra générer les balises de début et de fin appropriées pour span lors de l'insertion de la séquence de balises fictives pour::first-line.

<p><p::first-line><span class="test"> This is a somewhat long HTML paragraph that will</span></p::first-line><span class="test"> be broken into several lines.</span> The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</p>

Le pseudo-élément ::first-line ne peut être attaché qu'à des éléments de niveau bloc.

Le pseudo-élément ::first-line est similaire à un élément de niveau flot de texte, mais avec certaines restrictions, en fonction de l'usage. Seules les propriétés suivantes s'appliquent aux pseudo-éléments::first-line : propriétés de fontes, propriétés de couleurs, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow', et 'clear'.

Le pseudo-élément ::first-letter la première lettre formatée d'un élément.

Le pseudo-élément ::first-letter peut être attaché à tout élément.

Le pseudo-élément ::first-letter peut être utilisé pour des "initiales en capitales" et des "lettrines", qui sont des effets typographiques usuels. Ce type de lettre initiale est similaire à un élément de niveau flot de texte si sa propriété CSS 'float' a pour valeur 'none', mais avec certaines restrictions, en fonction de l'usage. Autrement, il est similaire à un élément flottant.

Voici les propriétés CSS qui s'appliquent aux pseudo-éléments ::first-letter : propriétés de fontes, propriétés de couleurs, propriétés de fonds, 'text-decoration', 'vertical-align' (seulement si 'float' est 'none'), 'text-transform', 'line-height', propriétés de marges externes, propriétés de marges internes, propriétés de cadres, 'float', 'text-shadow', et 'clear'.

L'exemple CSS 2 suivant génèrera une initiale "lettrine" courant sur deux lignes :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
 <HEAD>
  <TITLE>Drop cap initial letter</TITLE>
  <STYLE type="text/css">
   P               { font-size: 12pt; line-height: 12pt }
   P::first-letter { font-size: 200%; font-style: italic;
                     font-weight: bold; float: left }
   SPAN            { text-transform: uppercase }
  </STYLE>
 </HEAD>
 <BODY>
  <P><SPAN>The first</SPAN> few words of an article
    in The Economist.</P>
 </BODY>
</HTML>

Cet exemple pourra être formaté de la manière qui suit :

La séquence de balises fictives est :

<P>
<SPAN>
<P::first-letter>
T
</P::first-letter>he first
</SPAN>
few words of an article in the Economist.
</P>

Veuillez noter que les balises du pseudo-élément ::first-letter entourent le contenu (i.e. le caractère initiale), alors que la balise de début de::first-line est insérée immédiatement la balise de début de l'élément auquel il est attaché.

Pour réaliser le formatage traditionnel des "lettrines", les Agents Utilisateurs pourront approximer les tailles de fontes, par exemple pour aligner les lignes de base. De même, le contour des glyphes peut être pris en compte lors du formatage.

Les ponctuations (c'est-à-dire les caractères définis dans Unicode [UNICODE] dans les classes de ponctuation "open" (Ps), "close" (Pe), et "other" (Po)), qui précèdent la première lettre doivent être incluses, comme dans :

Le pseudo-élément ::first-letter sélectionne des parties d'élément seulement.

Quelques langues ont des règles spécifiques de traitement de certaines combinaisons de lettres. En Néerlandais, par exemple, si la combinaison de lettres "ij" apparait en début de mot, les deux lettres doivent être prises en compte dans le pseudo-élément ::first-letter.

L'exemple suivant illustre comment des pseudo-éléments superposés peuvent interagir. La première lettre de chaque élément P sera verte avec une taille de fonte de '24pt'. Le reste de la première ligne formatée sera 'blue' alors que le reste du paragraphe sera 'red'.

P { color: red; font-size: 12pt }
P::first-letter { color: green; font-size: 200% }
P::first-line { color: blue }

<P>Some text that ends up on two lines</P>

En supposant qu'un saut de ligne se produira avant le mot "ends", la séquence de balises fictives pour ce fragment pourra alors être:

<P>
<P::first-line>
<P::first-letter>
S
</P::first-letter>ome text that
</P::first-line>
ends up on two lines
</P>

Veuillez noter que les éléments ::first-letter se trouvent à l'intérieur de l'élément ::first-line. Les propriétés assignées à::first-line sont héritées par::first-letter, mais sont surclassées si la même propriété est assignée à::first-letter.

Le pseudo-élément ::selection s'applique à la portion du document qui a été mise en exergue par l'utilisateur. Cela s'applique aussi, par exemple, au texte sélectionné dans un champ de texte éditable. Seuls les éléments qui ont une propriété 'user-select' différente de 'none' peuvent avoir un::selection. Ce pseudo-élément ne doit pas être confondu avec la pseudo-classe:checked (qui s'appelait auparavant:selected).

Malgré que le pseudo-élément ::selection soit dynamique par nature, et soit modifié par l'action de l'utilisateur, il est raisonnable de s'attendre à ce que, quand un Agent Utilisateur re-restitue sur un medium statique (comme une page imprimée) ce qui était initialement restitué sur un medium dynamique (comme un écran), l'Agent Utilisateur puisse souhaiter transférer la::selection courante à cet autre medium, at disposer de tout le formatage et la restitution appropriés également. Cela n'est pas requis - certains Agents Utilisateurs peuvent omettre le pseudo-élément::selection pour les media statiques.

Voici les propriétés CSS qui s'appliquent aux pseudo-éléments ::selection : couleur, fond, contour. La couleur de 'background-image' sur::selection peut être ignorée.

Les pseudo-éléments ::before et ::after peuvent être utilisés pour décrire du contenu généré devant ou après le contenu d'un élément. Ils sont expliqués dans le Module CSS 3 Contenu Généré et Marqueurs (module 14).

Quand les pseudo-éléments ::first-letter et ::first-line sont combinés avec::before et ::after, ils 'appliquent à la première lettre iy ligne de l'élément y compris le texte inséré.

Parfois, les auteurs veulent des sélecteurs pour décrire un élément qui est le descendant d'un autre élément dans l'arbre documentaire (par exemple "un élément EM qui est contenu dans un élément H1") . Les combinateurs de descendance expriment ce type de relation. Un combinateur de descendance est un espace séparant deux séquences de sélecteurs simples. Un sélecteur de la forme " A B" représente un élément B qui est un descendant quelconque d'un élément ancêtre A.

Exemple(s):

Par exemple, considérons le sélecteur suivant :

h1 em

C'est une description correcte et valide, mais partielle, du fragment suivant :

<h1>This <span class="myclass">headline
is <em>very</em> important</span></h1>

Le sélecteur suivant :

div * p

représente un élément p qui est le petit-fils ou un descendant ultérieur d'un élément div. Veuillez noter les espaces entourant le "*".

Le sélecteur sui suit, qui combine des sélecteurs de descendance et des sélecteurs d'attributs, représente un élement qui (1) possède l'attribut href assigné (2) est à l'intérieur d'un p lui-même dans un div.

div p *[href]

Un combinateur filial décrit une relation de filiation entre deux éléments. Un combinateur filial est composé du caractère ">" et sépare deux séquences de sélecteurs simples.

Exemple(s):

Le sélecteur suivant représente un élément p qui est le fils de body :

body > p

Exemple(s):

L'exemple qui suit combine des combinateurs de descendance et des combinateurs filiaux :

div ol>li p

Il représente un élément p qui est le descendant d'un li ; l'élément li doit être le fils d'un élément ol ; l'élément ol doit être le descendant d'un div. Veuillez noter que les espaces optionnels autour du ">" ont été omis.

Pour toute information sur la sélection du premier fils d'un élément, veuillez s'il-vous-plait voir la section sur la pseudo-classe :first-child ci-dessus.

Il y a deux différents combinateurs d'adjacence : le combinateur d'adjacence directe et le combinateur d'adjacence indirecte.

Les combinateurs d'adjacence directe sont composés du caractère "+" séparant deux séquences de sélecteurs simples. Les éléments représentés par les deux séquences partagent le même parent dans l'arbre documentaire et l'élément représenté par la première séquence précède immédiatement l'élément représenté par la seconde.

Exemple(s):

Ainsi, le sélecteur suivant représente un élément p suivant immédiatement un élement math :

math + p

Exemple(s):

Le sélecteur suivant est conceptuellement similaire à celui de l'exemple précédent, à ceci près qu'il ajoute un sélecteur d'attribut. Ainsi, il ajoute une contrainte à l'élément h1 qui doit avoir class="opener" :

h1.opener + h2

Les combinateurs d'adjacence indirecte sont composés du caractère "~" séparant deux séquences de sélecteurs simples. Les éléments représentés par les deux séquences partagent le même parent dans l'arbre documentaire et l'élément représenté par la première séquence précède (pas nécessairement immédiatement) l'élément représenté par la seconde.

Exemple(s):

h1 ~ pre

représente un élément pre suivant un h1. C'est une description correcte et valide, mais partielle, de :

<h1>Definition of the function a</h1>
<p>Function a(x) has to be applied to all figures in the table.</p>
<pre>function a(x) = 12x/13.5</pre>

La spécificité d'un sélecteur se calcule de la manière suivante :

les sélecteurs de négation sont comptés comme le sélecteur simple qui est leur argument

comptez le nombre d'attributs ID dans le sélecteur (=a)

comptez le nombre d'autres attributs et de pseudo-classes dans le sélecteur (=b)

comptez le nombre de noms d'éléments dans le sélecteur (= c)

ignorez les pseudo-éléments.

La concaténation des trois nombres a-b-c (dans un système de numération avec une grande base) fournit la spécificité.

Quelques exemples:

*               /* a=0 b=0 c=0 -> specificity =   0 */
LI              /* a=0 b=0 c=1 -> specificity =   1 */
UL LI           /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
#x34y           /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */

Note: la spécificité des styles spécifiés dans un attribut HTML style est décrite dans le module CSS 3 "Cascade et Héritage".

La grammaire ci-dessous définit la syntaxe des sélecteurs W3C. Elle est globalement LL(1) et peut être localement LL(2) (mais veuillez noter que la plupart des Agents Utilisateurs ne devraient pas l'utiliser directement, car elle n'exprime pas les conventions d'analyse). Le format des productions est optimisé pour la compréhension humaine et quelques notations raccourcies de Yacc (voyez [YACC]) sont utilisées :

*: 0 ou plus

+: 1 ou plus

?: 0 ou 1

|: sépare des choix

[ ]: groupe

Les productions sont :

selectors_group
  : selector [ ',' S* selector ]*
  ;

selector
  /* there is at least one sequence of simple selectors in a */
  /* selector and the pseudo-elements occur only in the last */
  /* sequence ; only pseudo-element may occur */
  : [ simple_selector_sequence combinator ]*
       simple_selector_sequence [ pseudo_element ]?
  ;

combinator
  /* combinators can be surrounded by whitespace */
  : S* [ '+' | '>' | '~' | /* empty */ ] S*
  ;

simple_selector_sequence
  /* the universal selector is optional */
  : [ type_selector | universal ]?
        [ HASH | class | attrib | pseudoclass | negation ]+ |
    type_selector | universal
  ;

type_selector
  : [ namespace_prefix ]? element_name
  ;

namespace_prefix
  : [ IDENT | '*' ]? '|'
  ;

element_name
  : IDENT
  ;

universal
  : [ namespace_prefix ]? '*'
  ;

class
  : '.' IDENT
  ;

attrib
  : '[' S* [ namespace_prefix ]? IDENT S*
        [ [ PREFIXMATCH |
            SUFFIXMATCH |
            SUBSTRINGMATCH |
            '=' |
            INCLUDES |
            DASHMATCH ] S* [ IDENT | STRING ] S*
        ]? ']'
  ;

pseudoclass
  /* a pseudo-class is an ident, or a function taking an */
  /* ident or a string or a number or a simple selector  */
  /* (excluding negation and pseudo-elements) */
  /* or a an+b expression for argument */
  : ':' [ IDENT | functional_pseudo ]
  ;

functional_pseudo
  : FUNCTION S* [ IDENT | STRING | NUMBER |
                  expression | negation_arg ] S* ')'
  ;

expression
  :  [ [ '-' | INTEGER ]? 'n' [ SIGNED_INTEGER ]? ] | INTEGER
  ;

negation_arg
  : type_selector | universal | HASH | class | attrib | pseudoclass
  ;

pseudoelement
  : [ ':' ]? ':' IDENT
  ;

Ci-dessous se trouve le tokenizer, écrit en notation Flex (voyez [FLEX]). Le tokenizer est insensible à la casse.

Les deux occurences de "\377" représetent le plus haut numéro de caractère que les versions actuelles de Flex sachent traiter (255 en décimal). Elles doivent être lues "\4177777" (1114111 en décimal), qui est le plus haut code possible dans Unicode/ISO-10646.

%option case-insensitive

h                       [0-9a-f]
nonascii                [\200-\377]
unicode                 \\{h}{1,6}[ \t\r\n\f]?
escape                  {unicode}|\\[ -~\200-\377]
nmstart                 [a-z]|{nonascii}|{escape}
nmchar                  [a-z0-9-]|{nonascii}|{escape}
string1                 \"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"
string2                 \'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'

ident                   {nmstart}{nmchar}*
name                    {nmchar}+
integer                 [-]?[0-9]+
signed_integer          [-+][0-9]+
num                     {integer}|[0-9]*"."[0-9]+
string                  {string1}|{string2}
nl                      \n|\r\n|\r|\f
%%

[ \t\r\n\f]+    {return S;}

\/\*[^*]*\*+([^/][^*]*\*+)*\/   /* ignore comments */

"~="                    {return INCLUDES;}
"|="                    {return DASHMATCH;}
"^="                    (return PREFIXMATCH;)
"$="                    (return SUFFIXMATCH;)
"*="                    (return SUBSTRINGMATCH;)
{string}                {return STRING;}
{ident}                 {return IDENT;}
{ident}"("              {return FUNCTION;}
{num}                   {return NUMBER;}
{signed_integer}        {return SIGNED_INTEGER;}
{integer]               {return INTEGER;}
"#"{name}               {return HASH;}

.                       {return *yytext;}

Une importante question ouverte est l'interaction entre les sélecteurs CSS et les documents XML dans les clients web qui ont été développés avant le présent document. Malheureusement, parce que les espaces de noms doivent être sélectionnées sur la base de l'URI qui identifie l'espace de noms, et pas sur la base du préfixe d'espace de noms, un mécanisme d'identification des espaces de noms par leur URI est aussi nécessaire en CSS. Sans un tél mécanisme, il est impossible de construire une feuille de styles CSS qui sélectionnera correctement dans tous les cas dans un ensemble quelconque de documents XML. Cependant, avec la connaissance complète du document XML sur lequel s'applique une feuille de styles, et avec un usage limité des espace de noms dans le document XML, il est possible de construire une feuille de styles dans laquelle les sélecteurs sélectionneront correctement les éléments et les attributs.

Il doit être noté qu'un outil CSS de bas niveau (s'il est correctement conforme aux règles d'analyse compatible ascendante CSS) ignore toutes les règles @namespace, de même que toutes les règles stylistiques qui font usage des sélecteurs de types ou sélecteurs d'attributs avec espaces de noms. La syntaxe de séparation des préfixes d'espaces de noms en CSS a été délibérément choisie pour que les outils CSS de bas niveau ignorent les règles stylistiques plutôt que de les sélectionner incorrectement.

L'usage de l'espace de noms par défaut en CSS rend possible l'écriture de sélecteurs de types d'élément qui fonctionneront tant dans les outils reconnaissant les espaces de noms que dans les outils de bas niveau. Il doit être noté que les outils de bas niveau peuvent sélectionner incorrectement des éléments XML dans d'autres espaces de noms.

Ci-dessous se trouvent des scenarii et exemples de construction de feuilles de styles qui fonctionneraient correctement dans des clients web n'implémentant pas la présent proposition.

1. Le document XML n'utilise pas les espaces de noms.

Dans ce cas, il n'est bien entendu pas nécessaire de déclarer ou d'utiliser des espaces de noms dans la feuille de styles. Des sélecteurs de types et d'attributs classiques fonctionneront correctement dans un client de bas niveau.

Dans un client CSS reconnaissant les espaces de noms, le comportement par défaut des sélecteurs d'éléments sélectionnant sans considération pour l'espace de noms suffira pour la sélection de tous les éléments, puisqu'aucun espace de noms n'est présent. Cependant, l'usage de sélecteurs de types d'élément qui sélectionneraient uniquement les éléments qui n'ont pas d'espace de noms ("|name") garantira que les sélecteurs sélectionnent uniquement les éléments XML qui n'ont pas d'espace de noms déclaré.

2. Le document XML définit un unique espace de noms par défaut utilisé dans tout le document. Il n'y a pas de préfixe d'espace de noms dans les noms d'éléments.
Dans ce cas, un client de bas niveau fonctionnera comme si les espaces de noms n'étaient pas utilisés du tout dans le document. Les sélecteurs standards de type d'élément et d'attributs suffiront pour tous les éléments.

3. Le document XML ne définit pas d'espace de noms par défaut, tous les préfixes d'espaces de noms sont connus de l'auteur de la feuille de styles et il y a un corrélation directe entre les préfixes d'espaces de noms et les URIs d'espaces de noms (un préfixe donné ne peut être associé qu'à un URI d'espace de noms à travers le document XML, il peut y avoir plusieurs préfixes associés au même URI).

Dans ce cas, le client de bas niveau montrera et appliquera les sélecteurs de types d'élément et d'attributs sur la base di nom complètement qualifié, et non pas sur la base de la partie locale comme c'est souligné dans la section Sélecteurs de types et Espaces de noms. Le sélecteurs CSS peuvent être déclarés en utilisant un deux-points avec séquence d'échappement "\:" pour décrire les noms complètement qualifiés, c'est-à-dire que "html\:h1" sélectionnera<html:h1>. Les sélecteurs utilisant le nom qualifié ne sélectionneront que les éléments XML utilisant le même préfixe. Les autres préfixes d'espaces de noms utilisés dans le XML qui sont associés au même URI ne sélectionneront pas comme convenu sauf si des règles stylistiques CSS additionnelles sont déclarés pour eux.

Veuillez noter que les sélecteurs déclarés de cette manière fonctionneront uniquement dans les outils de bas niveau. Un outil CSS reconnaissant les espaces de noms fera fonctionner les sélecteurs de types d'éléments sur la base de la partie locale du nom.. Et donc les sélecteurs déclarés avec un nom complèetement qualifié ne sélectionneront rien (sauf s'il n'y a pas de préfixe d'espace de noms dans le nom complètement qualifié, bien entendu).

Dans d'autres scenarii : quand les préfixes d'espaces de noms utilisés dans le XML ne sont pas connus d'avance de l'auteur de la feuille de styles ; ou qu'une combinaison d'éléments sans espaces de noms est utilisée en conjonction avec des éléments utilisant un espace de noms par défaut ; ou quand le préfixe d'espace de noms est associé à plusieurs URIs d'espaces de noms dans le même document, ou dans plusieurs documents ; il est impossible de construire une feuille de styles CSS qui fonctionnera correctement avec tous les éléments dans ces documents à moins que la feuille de styles ne soit écrite en utilisant une syntaxe d'URI d'espace de noms (comme signalé par ce document ou similairement) et que ce document soit traité par un client reconnaissant les espaces de noms CSS et XML.

Chaque spécification utilisant les Sélecteurs W3C doit définir le sous-ensemble des Sélecteurs W3C qu'elle accepte et exclut, et décrire la signification locale de chacun des composants de ce sous-ensemble.

Exemples non normatifs :

profil Sélecteurs W3C

Spécification

CSS level 1

Accepte

sélecteurs de types
sélecteurs de classes
sélecteurs d'ID
pseudo-classes :link, :visited et :active
combinateur de descendance
pseudo-éléments :first-line et :first-letter

Exclut

sélecteur universel
sélecteurs d'attributs
pseudo-classes :hover et :focus
pseudo-classe :target
pseudo-classe :lang()
toutes les pseudo-classes d'état d'élément d'interface
toutes les pseudo-classes structurelles
pseudo-classe :contains()
pseudo-classe de negation
tous les pseudo-éléments de fragments d'élément d'interface
les pseudo-éléments ::before et ::after
combinateur filial
combinateurs d'adjacence

espaces de noms

Contraintes supplémentaires

un seul sélecteur de classe autorisé par séquence de sélecteurs simples

profil Sélecteurs W3C

Spécification

CSS level 2

Accepte

sélecteurs de types
sélecteur universel
sélecteurs de présence et de valeurs d'attributs
sélecteurs de classe
sélecteurs d'ID
pseudo-classes :link, :visited, :active, :hover, :focus, :lang() et :first-child
combinateur de descendance
combinateur filial
combinateur d'adjacence directe
pseudo-éléments ::first-line et ::first-letter
pseudo-éléments ::before et ::after

Exclut

Sélecteurs de sous-chaîne dans la valeur d'un attribut
pseudo-classe :target
toutes les pseudo-classes d'état d'élément d'interface
toutes les pseudo-classes structurellesautre que :first-child
pseudo-classe :contains()
pseudo-classe de négation
tous les pseudo-éléments de fragments d'élément d'interface
combinateur d'adjacence indirecte

espace de noms

Contraintes supplémentaires

plus d'un sélecteur de classe autorisé par séquence de sélecteurs simples (contrainte CSS 1)

En CSS, les sélecteurs expriment des règles de sélection sur modèle qui déterminent quelles règles stylistiques s'appliquent aux éléments dans l'arbre documentaire.

Le sélecteur suivant (CSS level 2) sélectionnera toutes les ancres a portant un attribut href et étant à l'intérieur d'un titre de section de niveau 1 h1 :

h1 a[name]

Toutes les déclarations CSS attachées à un tel sélecteur s'appliqueront aux éléments le vérifiant.

Exemple non normatif :

profil Selecteurs W3C

Spécification

STTS

Accepte

sélecteurs de types
sélecteur universel
sélecteurs d'attribut
sélecteurs de classes
sélecteurs d'ID
toutes les pseudo-classes structurelles
pseudo-classe :contains()
tous les combinateurs

espaces de noms

Exclut

pseudo-classes non acceptées
pseudo-éléments

Contraintes supplémentaires

quelques sélecteurs et combinateurs ne sont pas autorisés dans les descriptions de fragments dans la partie droite des déclarations STTS.

En STTS, les sélecteurs W3C peuvent être utilisés de deux différentes manières :

1. un mécanisme de sélection équivalent à celui des CSS : les déclarations attachées à un sélecteur donné sont appliquées aux éléments vérifiant ledit sélecteur,

2. des descriptions de fragments qui apparaissent sur la partie droite des déclarations.

13. Conformité et Critères de convergence

Cette section définit la conformité à la présente spécification.

L'incapacité d'un Agent Utilisateur à implémenter une partie de cette spécifications due aux limitations d'un périphérique particulier (par exemple, les Agents Utilisateurs non interactifs ne vont probablement pas implémenter les pseudo-classes dynamiques car elles ne n'ont pas de sens sans interactivité) n'implique pas la non-conformité.

Toute spécification réutilisant les Sélecteurs W3C doit contenir un Profil détaillant le sous-ensemble des Sélecteurs W3C qu'elle accepte et exclut, et décrivant les contraintes qu'elle ajoute à la présente spécification.

Les Agents Utilisateurs doivent respecter les règles de gestion des erreurs d'analyse :

un sélecteur contenant un sélecteur simple invalide, un combinateur invalide ou un mot-clé invalide est invalide.

un groupe de sélecteurs contenant un sélecteur invalide est invalide.

14. Tests

Cette spécification contient une suite de tests permettants aux Agents Utilisateurs de vérifier leur conformité de base à cette spécification. Cette suite de tests ne prétend pas être exhaustive et ne couvre pas tous les usages combinés possibles des Sélecteurs W3C.

Ces tests sont disponibles [lien à venir].

15. Remerciements

Cette spécificiation est le produit du Groupe de Travail du W3C sur les Cascading Style Sheets et Propriétés de Formatage. S'ajoutant aux éditeurs de cette spécification, les membres du Groupe de Travail sont :

Marc Attinasi (Netscape/AOL)

Bert Bos (W3C)

Tantek Çelik (Microsoft Corp.)

Don Day (IBM)

Martin Dürst (W3C)

Angel Diaz (IBM)

Daniel Glazman (Netscape/AOL depuis nov. 2000, et Electricité de France jusqu'en fév. 2000)

Håkon W. Lie (Opera Software depuis avril 1999, and W3C jusqu'en avril 1999)

Chris Lilley (W3C)

Dave Raggett (W3C/Openwave Systems Inc.)

Pierre Saslawsky (Netscape/AOL)

Michel Suignard (Microsoft Corp.)

Ted Wugofski (Openwave Systems Inc.)

Steve Zilles (Adobe)

Plusieurs experts invités dans le Groupe de Travail ont contribué de manière significative aux CSS 3 : David. L Baron, Tim Boland (NIST), Todd Fahrner, Daniel Glazman, Ian Hickson, Eric Meyer (The OPAL Group), Jeff Veen.

Anciens membres du Groupe de Travail :

Chris Brichford (Adobe)

Troy Chevalier (Netscape/AOL)

Dwayne Dicks (Softquad)

Ian Jacobs (W3C)

Lorin Jurow (Quark)

Sho Kuwamoto (Macromedia)

Peter Linss (Netscape/AOL)

Steven Pemberton (W3C)

Robert Pernett (Lotus)

Douglas Rand (SGI)

Nisheeth Ranjan (Netscape/AOL)

Ed Tecot (Microsoft Corp.)

Jared Sorensen (Novell)

Robert Stevahn (Hewlett-Packard)

Mike Wexler (Adobe)

John Williams (Quark)

Chris Wilson (Microsoft Corp.)

Nous les remercions tous (membres, experts invités et anciens membres) pour leurs efforts.

Bien entendu, ce document dérive des Recommandations CSS Level 1 et CSS Level 2. Nous remercions tous les auteurs, éditeurs et contributeurs de/aux CSS 1 et CSS 2.

Le Dr. Hasan Ali Çelik a suggéré la simple et puissante syntaxe de l'argument de :nth-child() alors que le Groupe de Travail s'orientait vers ses solutions bien plus complexes.

Les discussions tenues en www-style@w3.org ont eu beaucoup d'influence sur de nombreux points critiques. En particulier, nous voudrions remercier Ian Hickson, Ian Graham, David Baron, Björn Höhrmann, fantasai, Jelks Cabanis et Matthew Brealey pour leur participation active et utile.

[UNICODE] "The Unicode Standard: Version 3.0.1", The Unicode Consortium, Addison Wesley Longman, 2000, ISBN 0-201-61633-5.
URL:http://www.unicode.org/unicode/standard/versions/Unicode3.0.1.html.
La dernière version de Unicode. Pour plus d'informations, consultez la page d'acceuil du Consortium Unicode enhttp://www.unicode.org/.

# data[].attributes.attachment_link.description
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.

# data[].attributes.headline
Si une image illustre le texte (et n'est pas seulement décorative), il est conseillé de la placer au sein d'une balise    . La balise    permet d'écrire la légende de l'image.

# data[].attributes.subject
Si une image illustre le texte (et n'est pas seulement décorative), il est conseillé de la placer au sein d'une balise    . La balise    permet d'écrire la légende de l'image.

# data[].attributes.attachment_link.readable_text
Pourquoi redimensionner une image ?

Pour afficher ou partager une image en ligne, il est souvent nécessaire de la redimensionner pour qu'elle tienne entièrement sur l'écran du spectateur ou modifier la taille du fichier. Il peut notamment être nécessaire de réduire la taille de l'image lors de son envoi en pièce jointe à un courriel ou de sa publication sur un site. Les plateformes telles que Facebook et Instagram, avec leurs limitations de taille d'image, ne font pas exception à cette règle.

Redimensionner une photo sans perdre en qualité n'a rien d'assuré. Techniquement, un redimensionnement modifie les informations sous-jacentes des pixels. Par exemple, lorsque la largeur et la hauteur d'une photo sont réduites, toute information inutile sur les pixels est supprimée. Pour agrandir la photo, le redimensionneur d'image doit ajouter de nouveaux pixels en fonction des pixels d'origine, ce qui donne des photos d'aspect flou. L'essence du redimensionnement d'image sans perte de qualité consiste donc à capturer la photo avec la résolution la plus élevée et à la réduire.

Redimensionner des images en ligne avec ResizePixel

Il existe une grande variété de logiciels d'édition d'images offrant toutes sortes de fonctions, telles que le rendu 3D, le traitement d'images par intelligence artificielle, etc. Presque tous ces outils offrent des fonctions d'édition d'images de base, y compris le redimensionnement des images. Cependant, les logiciels avancés peuvent être coûteux et difficiles à adopter en raison de leur courbe d'apprentissage très raide. Pour la plupart des utilisateurs, à la recherche d'une application gratuite et facile à utiliser pour redimensionner des photos en ligne, ResizePixel peut être une solution.

Le redimensionneur d'images en ligne de ResizePixel offre un service simple mais puissant pour modifier la taille de l'image en pixels. Vous pouvez redimensionner des images PNG, JPG, GIF, WEBP, TIFF et BMP avec l'option pratique de conserver le format d'origine. Pour réduire encore plus la taille d'un fichier image, essayez de faire redimensionner l'image en Ko/Mo. Modifiez la taille de l'image en ligne en quelques clics seulement, sans installer de logiciel supplémentaire, directement sur votre navigateur !

Comment redimensionner une image ?

1. Pour redimensionner une image en ligne, téléchargez-la depuis votre appareil sur le site de ResizePixel.

2. Ensuite, entrez une nouvelle largeur et une nouvelle hauteur en pixels dans les champs à cet effet pour redimensionner l'image.

3. Appliquez la nouvelle taille et téléchargez l'image finale sur la page de téléchargement.

Gratuit et sécurisé

ResizePixel est un outil gratuit de redimensionnement de photos en ligne dont les maîtres mots sont simplicité et efficacité. C'est un service facile à utiliser, convivial et sécurisé permettant de redimensionner vos photos dans le strict respect de votre vie privée. Nous ne collectons ni ne distribuons les photos téléchargées à des tiers.

# data[].attributes.attachment_link.description
Redimensionnez les images en ligne à n'importe quelle taille en pixels sans perdre la qualité de la photo originale. C'est facile, rapide, et gratuit !

# data[].attributes.attachment_link.readable_text
Test a feature

Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices.

Test on:

Did you know?

Next

If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself!

You can import usage data from your Google Analytics account and see exactly how well a feature is supported among your own site's visitors. Look under the Settings panel to get started!

Usage data for all countries and continents can be imported via the Settings panel.

By default, older browser versions are only shown if they have >= 0.5% usage share. You can increase or decrease this value from the Settings panel.

Each feature support table includes a "Usage relative" button. This will resize each browser version cell to be relative to the amount of support it has for the selected usage source.

# data[].attributes.attachment_link.keywords[]
web browser compatibility support html css svg html5 css3 opera chrome firefox safari internet explorer

# data[].attributes.attachment_link.title
Can I use... Support tables for HTML5, CSS3, etc

# data[].attributes.attachment_link.description
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

# data[].attributes.attachment_link.provider_name
Nicolas Brondin-Bernard - Blog d'un développeur web freelance

# data[].attributes.attachment_link.title
Connaissez-vous le kebab-case ? Et le snake-case alors ? - Nicolas Brondin-Bernard

# data[].attributes.attachment_link.description
Un petit tour d’horizon des conventions de nommage au niveau de la casse des caractères !

# data[].attributes.attachment_link.title
Les balises sémantiques en HTML5 - HTML | Ronan HELLO

# data[].attributes.attachment_link.description
Découvrez comment mettre en place un balisage sémantique sur votre site web en quelques minutes.

# data[].attributes.attachment_link.title
A Complete Guide to Flexbox | CSS-Tricks

# data[].attributes.attachment_link.description
Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser suppor…

# data[].attributes.attachment_link.title
Alsacréations : Actualités et tutoriels web, HTML, CSS, JavaScript

# data[].attributes.attachment_link.description
Conception de sites web de qualité en HTML, CSS, JavaScript, grâce aux standards W3C, accessibilité

# data[].attributes.attachment_link.readable_text
Application - Lancé en 2012, le groupe de travail du W3C sur le HTML5 avait prévu de rendre sa copie en 2014. Au vu de la publication d'un dernier appel, on peut effectivement espérer une recommandation complète d'HTML 5.0 avant la fin de l'année.

# data[].attributes.attachment_link.title
HTML 5 : toutes les news et analyses - ZDNet

# data[].attributes.attachment_link.description
Suivez les dernières actualités, vidéos et articles sur le thème HTML 5. Analyses, dossiers, aide à la décision et livres blancs : Retrouvez les dernières tendances du business et de l'innovation informatique pour mieux identifier les opportunités du numérique et comprendre ses enjeux.

# data[].attributes.attachment_link.readable_text
Pourquoi utiliser la recherche Google ?

Parcourez les études de cas spécifiques au SEO et découvrez comment d'autres sites ont attiré davantage d'internautes en améliorant leur présence dans la recherche Google.

# data[].attributes.attachment_link.title
Google Search Central (anciennement Webmasters) | Ressources sur le SEO pour le Web | Google Developers

# data[].attributes.attachment_link.description
Google Search Central propose des ressources SEO pour vous aider à promouvoir votre site Web sur la recherche Google. Découvrez dès maintenant comment améliorer la visibilité de votre site Web.

# data[].attributes.attachment_link.title
33 Webmestre Freelance jobs in United States (1 new)

# data[].attributes.attachment_link.description
Today's top 33 Webmestre Freelance jobs in United States. Leverage your professional network, and get hired. New Webmestre Freelance jobs added daily.

# data[].attributes.attachment_link.readable_text
J'accompagne les petites et moyennes entreprises et les indépendants dans la création de leur identité visuelle et dans le développement de leur communication pour qu'elles soient visibles et puissent se démarquer de la concurrence.

Je vous aide à mettre en avant votre communication print et web et je vous guide pour créer votre image sur mesure ou je décline votre charte graphique existante sur vos différents supports.

En tant que graphiste webdesigner freelance, je suis votre unique interlocutrice.
Gain de temps et efficacité, je synthétise vos besoins de communication et j'assure la mise en place de vos projets, de la création à l'exécution en gérant la relation avec le fournisseur.
Réactive, flexible, je prends le temps de vous écouter, et de comprendre votre problématique, et nous devenons partenaires dans la réalisation de votre projet.

Je suis ouverte à tous les secteurs d'activité, avec une appétence pour les domaines de la restauration, de l'artisanat, de la nature, du bien-être et de l'enfance principalement.

J'aime rendre service à mes clients au travers de solutions adaptées et personnalisées, apporter une réponse à leurs questions et interagir avec eux pour les aider à résoudre leurs problèmes.
Nous entretenons une relation de confiance où les échanges sont nécessaires pour mener à bien leurs projets.

Réactive, flexible, à l'écoute
Travail soigné, délais respectés
Interlocutrice unique
Relation de confiance

Création/refonte de site web vitrine
Webmaster (mise à jour de site WordPress existant)
Communication : logo, affiche, flyer, plaquette, roll-up, bâche...
Particuliers : cartes et affiches naissance, remerciements...

Retrouvez mes travaux sur :
Site web : https://severine-allart.fr
Facebook : https://www.facebook.com/BySave51
Instagram : https://www.instagram.com/by_save

# data[].attributes.attachment_link.title
Séverine Allart * Graphiste Webdesigner - Graphiste Webdesigner - SET UP | LinkedIn

# data[].attributes.attachment_link.description
J'accompagne les petites et moyennes entreprises et les indépendants dans la création de leur identité visuelle et dans le développement de leur communication pour qu'elles soient visibles et puissent se démarquer de la concurrence.

# data[].attributes.attachment_link.description
Média de décryptage, Futura vous emmène à la rencontre des découvertes et innovations qui changent le monde. Autour de 5 rubriques (Sciences, Santé, Tech, Maison et Planète), nos journalistes vous proposent un contenu exclusif : actualités, vidéos, dossiers, photos...

# data[].attributes.attachment_link.title
01net - Actualité tech, tests produits, astuces & téléchargements

# data[].attributes.attachment_link.description
Actualités, tests produits, astuces, reportages et téléchargements. Vivez l'actualité tech décryptée par les journalistes de 01net, votre média spécialisé nouvelles technologies.

# data[].attributes.attachment_link.readable_text
Artisan enregistré auprès de la CMA (Chambres de Métiers et de l'Artisanat), je suis également labellisé par la CMA et l'ADEME (Agence De l'Environnement et de la Maîtrise de l'Énergie) en tant que répar'acteur. Je m'engage ainsi à réparer un maximum de matériel pour limiter l'impact sur l'environnement et permettre à mes clients de faire des économies.

N° SIREN : 799 516 638

Immatriculation au répertoire des métiers
799 516 638 RM 76

# data[].attributes.attachment_link.description
Artisan enregistré auprès de la CMA (Chambres de Métiers et de l'Artisanat), je suis également labellisé par la CMA et l'ADEME (Agence De l'Environnement et de la Maîtrise de l'Énergie) en tant que répar'acteur. Je m'engage ainsi à réparer un maximum de matériel pour limiter l'impact sur l'environnement et permettre à mes clients de faire des économies.

# data[].attributes.attachment_link.description
Le projet commenté Partenaires Pourquoi ce site ? Ce site a été réalisé dans un but non lucratif, apolitique et indépendant pour favoriser les échanges entre collègues et impulser les nouveaux usages pédagogiques. Les partenaires cités ont contribué à la réalisation de ce projet mais ne sont pas responsables des contenus publiés.

# data[].attributes.attachment_link.provider_name
Formation continuité pédagogique via le numérique

# data[].attributes.attachment_link.description
Documentation réalisé par un enseignant/RRUPN : tout est gratuit, libre et donc modifiable.

# data[].attributes.attachment_link.description
Technique 1 - Tai-otoshi Technique 2 - Ippon-seio-nage Technique 3 - O-goshi Technique 4 - O-soto-gari Technique 5 - Harai-goshi Technique 6 - O-uchi-gari Technique 7 - Uchi-mata Technique 8 - Sasae-tsuri-komi-ashi Technique 9 - Okuri-ashi-barai Technique 10 - Koshi-guruma Technique 11 - De-ashi-barai Technique 12 - Kata-guruma Technique 13

# data[].attributes.attachment_link.readable_text
About

phpMyAdmin is a free software tool written in PHP, intended to handle the administration of MySQL over the Web. phpMyAdmin supports a wide range of operations on MySQL and MariaDB. Frequently used operations (managing databases, tables, columns, relations, indexes, users, permissions, etc) can be performed via the user interface, while you still have the ability to directly execute any SQL statement.

phpMyAdmin comes with a wide range of documentation and users are welcome to update our wiki pages to share ideas and howtos for various operations. The phpMyAdmin team will try to help you if you face any problem; you can use a variety of support channels to get help.

phpMyAdmin is also very deeply documented in a book written by one of the developers - Mastering phpMyAdmin for Effective MySQL Management, which is available in English and Spanish.

To ease usage to a wide range of people, phpMyAdmin is being translated into 72 languages and supports both LTR and RTL languages.

phpMyAdmin is a mature project with a stable and flexible code base; you can find out more about the project and its history and the awards it earned. When the project turned 15, we published a celebration page.

The phpMyAdmin project is a member of Software Freedom Conservancy. SFC is a not-for-profit organization that helps promote, improve, develop, and defend Free, Libre, and Open Source Software (FLOSS) projects.

Features

Intuitive web interface

Support for most MySQL features:

browse and drop databases, tables, views, fields and indexes

create, copy, drop, rename and alter databases, tables, fields and indexes

maintenance server, databases and tables, with proposals on server configuration

execute, edit and bookmark any SQL-statement, even batch-queries

manage MySQL user accounts and privileges

manage stored procedures and triggers

Import data from CSV andSQL

Administering multiple servers

Creating graphics of your database layout in various formats

Creating complex queries using Query-by-example (QBE)

Searching globally in a database or a subset of it

Transforming stored data into any format using a set of predefined functions, like displaying BLOB-data as image or download-link

And much more...

# data[].attributes.attachment_link.description
phpMyAdmin is a free software tool written in PHP, intended to handle the administration of MySQL over the Web. phpMyAdmin supports a wide range of operations on MySQL and MariaDB. Frequently used operations (managing databases, tables, columns, relations, indexes, users, permissions, etc) can be performed via the user interface, while you still have the ability to directly execute any SQL statement.

# data[].attributes.attachment_link.readable_text
The Apache HTTP Server Project is an effort to develop and maintain an open-source HTTP server for modern operating systems including UNIX and Windows. The goal of this project is to provide a secure, efficient and extensible server that provides HTTP services in sync with the current HTTP standards.

The Apache HTTP Server ("httpd") was launched in 1995 and it has been the most popular web server on the Internet since April 1996. It has celebrated its 25th birthday as a project in February 2020.

The Apache HTTP Server is a project of The Apache Software Foundation.

The Apache Software Foundation and the Apache HTTP Server Project are pleased to announce the release of version 2.4.56 of the Apache HTTP Server ("httpd").

This latest release from the 2.4.x stable branch represents the best available version of Apache HTTP Server.

Apache HTTP Server version 2.4.43 or newer is required in order to operate a TLS 1.3 web server with OpenSSL 1.1.1.

Download | ChangeLog for 2.4.56 | Complete ChangeLog for 2.4 | New Features in httpd 2.4

As previously announced, the Apache HTTP Server Project has discontinued all development and patch review of the 2.2.x series of releases.

The Apache HTTP Server Project had long committed to provide maintenance releases of the 2.2.x flavor through June of 2017. The final release 2.2.34 was published in July 2017, and no further evaluation of bug reports or security risks will be considered or published for 2.2.x releases.

Great! We have updated our download page in an effort to better utilize our mirrors. We hope that by making it easier to use our mirrors, we will be able to provide a better download experience.

Please ensure that you verify your downloads using PGP or MD5 signatures.

Awesome! Have a look at our current 'Help Wanted' listings then:

# data[].attributes.attachment_link.title
Welcome! - The Apache HTTP Server Project

# data[].attributes.attachment_link.description
The Apache HTTP Server Project is an effort to develop and maintain an open-source HTTP server for modern operating systems including UNIX and Windows. The goal of this project is to provide a secure, efficient and extensible server that provides HTTP services in sync with the current HTTP standards.

# data[].attributes.attachment_link.title
Compresser des images de 90% - PNG, JPG, WEBP, GIF (2022)

# data[].attributes.attachment_link.description
Compresse des centaines d'images, directement sur ordinateur, à l'aide de puissantes bibliothèques WebAssembly contenant les algorithmes de compression les plus sophistiqués du moment. Notre technologie Sans Serveur permet de compresser les images instantanément - jusqu'à 11x plus vite que d'autres outils de compression d'images en ligne similaires - même avec un débit Internet lent.

# data[].attributes.attachment_link.description
Easy & visual compression of SVG images.

# data[].attributes.attachment_link.title
Réduisez le poids de vos images png avec pngnq et optipng ! - Ludovic ROLAND - Le blog

# data[].attributes.attachment_link.description
Actuellement, je travaille sur l’intégration du thème WordPress d’un client. Le problème c’est que certaines images au format png …

# data[].attributes.attachment_link.title
Codrops | Keeping web professionals inspired & up-to-date since 2009

# data[].attributes.attachment_link.description
Founded in 2009, Codrops is a destination for web design and development enthusiasts. Our team is dedicated to providing high-quality, innovative content that explores the latest trends and techniques in the field, keeping web professionals up-to-date on the latest developments in the industry.

# data[].attributes.attachment_link.title
Le règlement général sur la protection des données - RGPD

# data[].attributes.attachment_link.description
Modifié par Rectificatif au règlement (UE) 2016/679 du Parlement européen et du Conseil du 27 avril 2016 relatif à la protection des personnes physiques à l’égard du traitement des données à caractère personnel et à la libre circulation de ces données, et abrogeant la directive 95/46/CE (règlement général sur la protection des données) JOUE L127 2 du 23/05/2018

# data[].attributes.attachment_link.description
Administrateur systèmes et technicien informatique en Freelance, vous trouverez ici astuces, tutoriaux et présentation de produits.

# data[].attributes.attachment_link.description
Improve your performance on Google Search Search Console tools and reports help you measure your site's Search traffic and performance, fix issues, and make your site shine in Google Search results Improve your performance on Google Search Search Console tools and reports help you measure your site's Search traffic and performance, fix issues, and make your site shine in Google Search results Learn how to optimize your search appearance on Google and increase organic traffic to your website Optimize and enhance your site: Monitor, test, and track your AMP pages with Search Console tools and reports.

# data[].attributes.attachment_link.keywords[]
abs alfawise anet artisanale artisanat axelle bigoût bobine bois buse "circuit imprimé" conception courroie creality dagoma diy "do it yourself" electronique...

# data[].attributes.attachment_link.description
L'avenir appartient à ceux qui sont curieux ! :)

# data[].attributes.attachment_link.title
Comment DEVENIR DÉVELOPPEUR WEB : 7 étapes INDISPENSABLES

# data[].attributes.attachment_link.description
Check Cascading Style Sheets (CSS) and (X)HTML documents with style sheets

# data[].attributes.attachment_link.description
The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.