Page title

Syntax

Syntaxe

Use soft tabs with two spaces—they're the only way to guarantee code renders the same in any environment.
Nested elements should be indented once (two spaces).
Always use double quotes, never single quotes, on attributes.
Don't include a trailing slash in self-closing elements—the HTML5 spec says they're optional.
Don’t omit optional closing tags (e.g. </li> or </body>).
utilisez des indentations douces avec deux espaces — c'est le seul moyen de garantir que le code s'affichera de la même manière sous tous les environnements.
les éléments imbriqués doivent être indentés une fois (deux espaces).
utilisez toujours des guillements doubles, jamais de guillemets simples, sur les attributs.
n'utilisez pas de slash terminal sur les éléments auto-fermants — la spécification html5 indique qu'ils sont optionnels.
n'omettez pas les balises optionnelles de fermeture (e.g. </li> ou </body>).

@@ -79,8 +79,8 @@

Syntax

HTML5 doctype

Enforce standards mode and more consistent rendering in every browser possible with this simple doctype at the beginning of every HTML page.

Doctype HTML6

Forcez le mode standard et donc un affichage plus cohérent dans tous les navigateurs possibles avec ce simple doctype au début de chaque page HTML.

{% highlight html %}{% include html/doctype.html %}{% endhighlight %} @@ -89,13 +89,13 @@

HTML5 doctype

Language attribute

From the HTML5 spec:

Attributs de langue

D'après la spec HTML5:

-
Authors are encouraged to specify a lang attribute on the root html element, giving the document's language. This aids speech synthesis tools to determine what pronunciations to use, translation tools to determine what rules to use, and so forth.
+
Les auteurs sont encouragés à spécifier un attribut de langue sur l'élément racine html, afin de donner une langue au document. Ceci aide les outils de synthèse vocale à déterminer la prononciation à utiliser, les outils de traductions à choisir les règles à utiliser, etc.

Read more about the lang attribute in the spec.

Head to Sitepoint for a list of language codes.

Vous pouvez en savoir plus sur l'attribut lang en lisant la spec.

Rendez-vous sur Sitepoint pour une liste des codes de langue.

{% highlight html %}{% include html/lang.html %}{% endhighlight %} @@ -104,9 +104,9 @@

Language attribute

IE compatibility mode

Internet Explorer supports the use of a document compatibility <meta> tag to specify what version of IE the page should be rendered as. Unless circumstances require otherwise, it's most useful to instruct IE to use the latest supported mode with edge mode.

For more information, read this awesome Stack Overflow article.

Mode de compatibilité IE

Interne Explorer supporte l'utilisation d'une balise de compatibilité <meta> pour spécifier sous quelle version de IE la page devrait être rendue. Sauf cas exceptionnel, il est préférable de dire à IE d'utiliser le dernier mode de rendu supporté avec edge mode.

Pour plus d'informations, vous pouvez lire cet extraordinaire article sur Stack Overflow.

{% highlight html %}{% include html/ie-compatibility-mode.html %}{% endhighlight %} @@ -115,8 +115,8 @@

IE compatibility mode

Character encoding

Quickly and easily ensure proper rendering of your content by declaring an explicit character encoding. When doing so, you may avoid using character entities in your HTML, provided their encoding matches that of the document (generally UTF-8).

Encodage des caractères

Assurez vous rapidement et facilement d'un bon rendu de votre contenu en déclarant de manière explicite l'encodage des caractères. En faisant ainsi, vous pouvez éviter d'utiliser des entités HTML, pour peu que leur encoding corresponde à celui du document (généralement UTF-8)

{% highlight html %}{% include html/encoding.html %}{% endhighlight %} @@ -125,13 +125,13 @@

Character encoding

CSS and JavaScript includes

Per HTML5 spec, typically there is no need to specify a type when including CSS and JavaScript files as text/css and text/javascript are their respective defaults.

HTML5 spec links

Inclusions CSS et Javascript

Selon la spec HTML, il n'est pas nécessaire de spécifier un type lorsque vous incluez des fichiers CSS ou Javascript puisque text/css et text/javascript sont leurs valeurs par défaut respectives.

Liens vers la spec HTML5

@@ -141,15 +141,15 @@

HTML5 spec links

Practicality over purity

Strive to maintain HTML standards and semantics, but not at the expense of practicality. Use the least amount of markup with the fewest intricacies whenever possible.

Praticité plutôt que pureté

Tendez à maintenir les standards et la sémantique HTML, mais pas au dépends de la praticité. Autant que possible, cherchez à utiliser le moins de markup possible, avec le moins d'imbrication possible.

Attribute order

HTML attributes should come in this particular order for easier reading of code.

Ordre des attributs

Les attributs HTML devraient apparaitre dans cet ordre, afin de faciliter la lecture du code.

class
id, name

Attribute order

title, alt
aria-*, role

Classes make for great reusable components, so they come first. Ids are more specific and should be used sparingly (e.g., for in-page bookmarks), so they come second.

Les classes sont de très bon composants réutilisables, ils doivent donc apparaitre en premier. Les Ids sont plus spécifiques et doivent donc être utilisés avec parcimonie (e.g. pour des liens internes à la page), ils viennent donc en seconde position.

{% highlight html %}{% include html/attribute-order.html %}{% endhighlight %} @@ -167,17 +167,17 @@

Attribute order

Boolean attributes

A boolean attribute is one that needs no declared value. XHTML required you to declare a value, but HTML5 has no such requirement.

For further reading, consult the WhatWG section on boolean attributes:

Attributs booléens

Un attribut booléen est un attribut qui ne nécessite pas de valeur. Il était nécessaire d'en ajouter un en XHTML, mais HTML5 n'a pas ce pré-requis.

Pour plus d'informations, consultez la section WhatWG sur les attributs booléens:

-
The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.
+
La présence d'un attribut booléen sur un élément représente la valeur vraie, et l'absence de l'attribut représente la valeur faux.

If you must include the attribute's value, and you don't need to, follow this WhatWG guideline:

Si vous devez inclure la valeur de l'attribut, mais que vous n'en avez pas besoin, suivez cette bonne pratique du WhatWG :

-
If the attribute is present, its value must either be the empty string or [...] the attribute's canonical name, with no leading or trailing whitespace.
+
Si l'attribut est présent, sa valeur doit soit être une chaine vide ou [...] le nom canonique de l'attribut, sans espace ni devant, ni derrière.

In short, don't add a value.

En clair, n'ajoutez pas de valeur.

{% highlight html %}{% include html/boolean-attributes.html %}{% endhighlight %} @@ -186,8 +186,8 @@

Boolean attributes

Reducing markup

Whenever possible, avoid superfluous parent elements when writing HTML. Many times this requires iteration and refactoring, but produces less HTML. Take the following example:

Réduire le markup

Autant que possible, évitez les éléments parents inutile quand vous écrivez du HTML. Bien souvent, cela nécessite plusieurs passes et du refactoring, mais cela produit moins de HTML. Prenez l'exemple suivant :

{% highlight html %}{% include html/reducing-markup.html %}{% endhighlight %} @@ -196,8 +196,8 @@

Reducing markup

JavaScript generated markup

Writing markup in a JavaScript file makes the content harder to find, harder to edit, and less performant. Avoid it whenever possible.

Markup généré par Javascript

Écrire du markup dans un fichier Javascript rends son contenu plus difficile à trouver, plus difficile à éditer et moins performant. Évitez autant que possible.

@@ -209,24 +209,24 @@

CSS

Syntax

Syntaxe

Use soft tabs with two spaces—they're the only way to guarantee code renders the same in any environment.
When grouping selectors, keep individual selectors to a single line.
Include one space before the opening brace of declaration blocks for legibility.
Place closing braces of declaration blocks on a new line.
Include one space after : for each declaration.
Each declaration should appear on its own line for more accurate error reporting.
End all declarations with a semi-colon. The last declaration's is optional, but your code is more error prone without it.
Comma-separated property values should include a space after each comma (e.g., box-shadow).
Don't include spaces after commas within rgb(), rgba(), hsl(), hsla(), or rect() values. This helps differentiate multiple color values (comma, no space) from multiple property values (comma with space).
Don't prefix property values or color parameters with a leading zero (e.g., .5 instead of 0.5 and -.5px instead of -0.5px).
Lowercase all hex values, e.g., #fff. Lowercase letters are much easier to discern when scanning a document as they tend to have more unique shapes.
Use shorthand hex values where available, e.g., #fff instead of #ffffff.
Quote attribute values in selectors, e.g., input[type="text"]. They’re only optional in some cases, and it’s a good practice for consistency.
Avoid specifying units for zero values, e.g., margin: 0; instead of margin: 0px;.
Utilisez une indentation douce avec deux espaces — c'est le seul moyen de garantir que le code s'affiche de la même manière sur tous les environnements.
Lorsque vous regroupez des sélecteurs, laissez chaque sélecteur sur sa propre ligne.
Ajouter un espace avant l'accolade d'ouverture de la déclaration pour la lisibilité.
Placez les accolades de fermeture de la déclaration sur une nouvelle ligne.
Ajouter un espace après : pour chaque déclaration.
Chaque déclaration doit apparaitre sur sa propre ligne pour un affichage des erreurs plus précis.
Terminez vos déclarations par un point-virgule. Celui sur la dernière déclaration est optionnel mais votre code sera plus robuste aux erreurs en l'ajoutant.
Les valeurs de propriétés séparées par des virgules doivent inclure un espace après chaque virgule (e.g., box-shadow).
N'ajoutez pas d'espace après les virgules à l'intérieur de rgb(), rgba(), hsl(), hsla(), ou rect(). Cela permet de différencier de multiples valeurs de couleurs (virgule, sans espace), de multiples valeurs de propriétés (virgule, avec espac multiples valeurs de propriétés (virgule, avec espace).
Ne préfixez pas les valeurs de propriétés ou les paramètres de couleur avec un zéro (e.g., .5 plutot que 0.5 et -.5px plutot que -0.5px).
Mettez toutes les valeurs hexadécimales en minuscule, e.g., #fff. Les lettres minuscules sont bien plus facile à repérer lorsqu'on scanne visuellement un document car elles ont des formes plus uniques.
Utilisez les valeurs réduits hexadécimales dès que possible, e.g., #fff plutot que #ffffff.
Mettez les valeurs des attributes entre double guillemets dans les sélecteurs, e.g., input[type="text"]. Ils sont optionnels dans certains cas, mais c'est une bonne pratique pour la cohérence.
Évitez d'ajouter des unités quand la valeur est zéro, e.g., margin: 0; plutot que margin: 0px;.

Questions on the terms used here? See the syntax section of the Cascading Style Sheets article on Wikipedia.

Vous avez des questions sur les termes employés ici ? Référez-vous à la section sur la syntaxe de l'article sur les Cascading Style Sheets sur Wikipedia.

{% highlight css %}{% include css/syntax.css %}{% endhighlight %} @@ -235,17 +235,17 @@

Syntax

Declaration order

Related property declarations should be grouped together following the order:

Ordre des déclarations

Les déclarations de propriétés similaires devraient être regroupées ensemble selon cet ordre :

Positioning
Box model
Typographic
Visual
Positionnement
Modèle de boite
Typographie
Visuel

Positioning comes first because it can remove an element from the normal flow of the document and override box model related styles. The box model comes next as it dictates a component's dimensions and placement.

Everything else takes place inside the component or without impacting the previous two sections, and thus they come last.

For a complete list of properties and their order, please see Recess.

Le positionnement vient en premier car cela peut retirer un élément du flux normal du document et overrider les styles relatifs au modèle de boite. Le modèles de boite vient ensuite car il influe sur les dimensions et le placement de l'élément.

Tout le reste agissant à l'intérieur de l'élement ou sans impacter les deux sections précédentes, ils viennent ensuite.

Pour une liste complète des propriétés et leur ordre, merci de vous référer à Recess.

{% highlight css %}{% include css/declaration-order.css %}{% endhighlight %} @@ -254,14 +254,14 @@

Declaration order

Don't use `@import`

Compared to <link>s, @import is slower, adds extra page requests, and can cause other unforeseen problems. Avoid them and instead opt for an alternate approach:

N'utilisez pas `@import`

Comparé à des <link>s, @import est plus lent, ajoute de nouvelles requêtes à la page et peut poser des problèmes imprévisibles. Évitez les autant que possible et optez plutot pour une approche alternative :

Use multiple <link> elements
Compile your CSS with a preprocessor like Sass or Less into a single file
Concatenate your CSS files with features provided in Rails, Jekyll, and other environments
Utilisez plusieurs éléments <link>/li> +
Compilez votre CSS avec un pré-processeur, comme Sass ou Less dans un seul fichier.
Concaténez votre CSS grâce aux fonctionnalités proposées par Rails, Jekyll ou d'autres environnements.

For more information, read this article by Steve Souders.

Pour plus d'informations, lisez cet article de Steve Souders.

{% highlight html %}{% include css/import.html %}{% endhighlight %} From 46391d90a5dc9f7531e44d846d878a69b8e9e094 Mon Sep 17 00:00:00 2001 From: Pixelastic Date: Fri, 30 May 2014 18:14:44 +0200 Subject: [PATCH 02/24] Finished translating index.html. --- index.html | 94 +++++++++++++++++++++++++++--------------------------- 1 file changed, 47 insertions(+), 47 deletions(-) diff --git a/index.html b/index.html index e4ef8f5a..ecef2678 100644 --- a/index.html +++ b/index.html @@ -31,9 +31,9 @@

CSS

N'utilisez pas @import

Emplacement des media queries

Propriétées prefixées

Règles avec une seule déclaration

Règles avec unique déclaration

Notation abrégées

Imbrication avec LESS et SASS

Imbrication avec Less et Sass

Commentaires

Classes

Sélecteurs

@@ -270,8 +270,8 @@

N'utilisez pas `@import`

Media query placement

Place media queries as close to their relevant rule sets whenever possible. Don't bundle them all in a separate stylesheet or at the end of the document. Doing so only makes it easier for folks to miss them in the future. Here's a typical setup.

Emplacement des media queries

Placez les media queries le plus proche possible des règles qu'elles impactent. Ne les mettez pas toutes dans une feuille de style différente ou à la fin du document. En faisant ainsi, vous rendez la chose plus aisée pour les autres de ne pas les rater. Voici un exemple typique :

{% highlight css %}{% include css/media-queries.css %}{% endhighlight %} @@ -280,9 +280,9 @@

Media query placement

Prefixed properties

When using vendor prefixed properties, indent each property such that the declaration's value lines up vertically for easy multi-line editing.

In Textmate, use Text → Edit Each Line in Selection (⌃⌘A). In Sublime Text 2, use Selection → Add Previous Line (⌃⇧↑) and Selection → Add Next Line (⌃⇧↓).

Propriétés prefixées

Lorsque vous utilisez des propriétés prefixées, indentez chaque propriété de telle manière que les déclarations s'alignent verticalement, de manière à rendre l'édition multi-ligne pour facile.

Sous TextMate, utilisez Text → Edit Each Line in Selection (⌃⌘A). Sous Sublime Text 2, utilisez Selection → Add Previous Line (⌃⇧↑) et Selection → Add Next Line (⌃⇧↓).

{% highlight css %}{% include css/prefixed-properties.css %}{% endhighlight %} @@ -291,9 +291,9 @@

Prefixed properties

Single declarations

In instances where a rule set includes only one declaration, consider removing line breaks for readability and faster editing. Any rule set with multiple declarations should be split to separate lines.

The key factor here is error detection—e.g., a CSS validator stating you have a syntax error on Line 183. With a single declaration, there's no missing it. With multiple declarations, separate lines is a must for your sanity.

Règles avec unique déclaration

Dans les cas où une règle ne contient qu'une seule déclaration, vous pouvez supprimer le saut de ligne pour faciliter la lecture et l'édition. Tout ensemble de règles avec plusieurs déclarations doit être découpé en plusieurs lignes.

L'élément important ici est la détection des erreurs — e.g., un validateur CSS qui vous indique que vous avez une erreur à la ligne 183. Avec une seule déclaration, vous ne pouvcez pas vous tromper. Avec plusieurs déclaration, il est indispensable de séparer les lignes si vous tenez à votre santé mentale.

{% highlight css %}{% include css/single-declarations.css %}{% endhighlight %} @@ -302,8 +302,8 @@

Single declarations

Shorthand notation

Strive to limit use of shorthand declarations to instances where you must explicitly set all the available values. Common overused shorthand properties include:

Notations abrégées

Essayez de limiter l'utilisation de notations abrégées pour les cas où vous devez specifier explicitement toutes les valeurs. Les notations abrégées trop souvent abusées sont les suivantes :

padding
margin

Shorthand notation

border
border-radius

Often times we don't need to set all the values a shorthand property represents. For example, HTML headings only set top and bottom margin, so when necessary, only override those two values. Excessive use of shorthand properties often leads to sloppier code with unnecessary overrides and unintended side effects.

The Mozilla Developer Network has a great article on shorthand properties for those unfamiliar with notation and behavior.

Bien souvent vous n'avez pas besoin de spécifier toutes les valeurs qu'une notation abrégée vous propose. Par exemple, les entêtes de titre HTML ne définissent que des marges top et bottom, vous n'avez donc besoin que d'overrider ces valeurs. L'utilisation excessive des notations abrégées mène bien souvent à du code de mauvaise facture avec des overrides inutiles et des effets de bords non sollicités.

Le Mozilla Developer Network possède un très bon article sur les notations abrégées pour ceux qui ne sont pas familier avec leur syntaxe et comportement.

{% highlight css %}{% include css/shorthand.css %}{% endhighlight %} @@ -322,8 +322,8 @@

Shorthand notation

Nesting in Less and Sass

Avoid unnecessary nesting. Just because you can nest, doesn't mean you always should. Consider nesting only if you must scope styles to a parent and if there are multiple elements to be nested.

Imbrication avec Less et Sass

Évitez les imbrications inutiles. Ce n'est pas parce que vous pouvez faire de l'imbrication que vous devez le faire. N'imbriquez que si vous devez définir un scope parent pour un style et s'il y a plusieurs éléments à imbriquer.

{% highlight scss %}{% include css/nesting.scss %}{% endhighlight %} @@ -332,9 +332,9 @@

Nesting in Less and Sass

Comments

Code is written and maintained by people. Ensure your code is descriptive, well commented, and approachable by others. Great code comments convey context or purpose. Do not simply reiterate a component or class name.

Be sure to write in complete sentences for larger comments and succinct phrases for general notes.

Commentaires

Le code est écrit et maintenu par des humains. Assurez-vous que votre code est auto-portant, bien commenté et compréhensible par d'autres. Les bons commentaires apportent du contexte et de l'information. Ne répétez pas simplement le nom du composant ou de la classe.

Assurez-vous d'écrire des phrases complètes pour les longs commentaires et des phrases simples pour les notes d'ordre général.

{% highlight css %}{% include css/comments.css %}{% endhighlight %} @@ -343,16 +343,16 @@

Comments

Class names

Nom des classes

Keep classes lowercase and use dashes (not underscores or camelCase). Dashes serve as natural breaks in related class (e.g., .btn and .btn-danger).
Avoid excessive and arbitrary shorthand notation. .btn is useful for button, but .s doesn't mean anything.
Keep classes as short and succinct as possible.
Use meaningful names; use structural or purposeful names over presentational.
Prefix classes based on the closest parent or base class.
Use .js-* classes to denote behavior (as opposed to style), but keep these classes out of your CSS.
N'utilisez que des minuscules et des tirets dans les noms des classes (pas d'underscore ou de camelCalse). Les tirets sont des séparateurs naturels dans les classes de même contexte (e.g., .btn et .btn-danger).
Évitez les notations abrégées excessives et arbitraires. .btn est utile pour un button, mais .s ne veut rien dire
Gardez les noms de classes aussi courts et succincts que possible.
Utilisez des noms qui ont du sens; préférez des noms expliquant la structure ou le but plutot que la présentation.
Préfixez les classes d'après le parent le plus proche ou la classe de base.
Utilisez des classes .js-* pour indiquer un comportement (par opposition à un style), mais laissez ces classes en dehors de votre CSS.

It's also useful to apply many of these same rules when creating Sass and Less variable names.

Il est aussi utilise d'appliquer la majorité de ces règles lorsque vous créez des nom de variable Less ou Sass.

{% highlight css %}{% include css/class-names.css %}{% endhighlight %} @@ -361,17 +361,17 @@

Class names

Selectors

Sélécteurs

Use classes over generic element tag for optimum rendering performance.
Avoid using several attribute selectors (e.g., [class^="..."]) on commonly occuring components. Browser performance is known to be impacted by these.
Keep selectors short and strive to limit the number of elements in each selector to three.
Scope classes to the closest parent only when necessary (e.g., when not using prefixed classes).
Préférez les classes plutot que les noms de balises pour une performance de rendu optimale.
Évitez d'utiliser plusieurs attributs de sélécteur (e.g., [class^="..."]) sur des éléments apparaissant souvent dans la page. La performance du navigateur est impactée par ces sélecteurs.
Gardez vos sélecteurs courts et limitez le nombre d'élément dans chaque sélecteur à trois.
Encadrez vos classes par le parent le plus proche seulement quand cela est nécessaire (e.g., quand vous n'utilisez pas les classes préfixées).

Additional reading:

Plus d'informations :

@@ -381,12 +381,12 @@

Selectors

Organization

Organisation

Organize sections of code by component.
Develop a consistent commenting hierarchy.
Use consistent white space to your advantage when separating sections of code for scanning larger documents.
When using multiple CSS files, break them down by component instead of page. Pages can be rearranged and components moved.
Organisez vos sections de code par composant.
Développez une hiérarchie de commentaires cohérente.
Utilisez les sauts de lignes de manière cohérente à votre avantage pour séparer les sections de code de manière à scanner le document plus facilement.
Lorsque vous utilisez plusieurs fichiers CSS, séparez-les par composant plutot que par pages. Les pages peuvent changer, et les composants sont plus flexibles.

@@ -396,14 +396,14 @@

Organization

Editor preferences

Set your editor to the following settings to avoid common code inconsistencies and dirty diffs:

Préférences de votre éditeur

Configurez votre éditeur avec la configuration suivante afin d'éviter les incohérences et les diffs sales :

Use soft-tabs set to two spaces.
Trim trailing white space on save.
Set encoding to UTF-8.
Add new line at end of files.
Utilisez une indentation douce de deux espaces.
Supprimez les espaces en fin de ligne à la sauvegarde du fichier.
Définissiez UTF-8 comme encodage.
Ajoutez un saut de ligne à la fin des fichiers.

Consider documenting and applying these preferences to your project's .editorconfig file. For an example, see the one in Bootstrap. Learn more about EditorConfig.

Pensez à documenter et à appliquer ces préférences dans le fichier .editorconfig de votre projet. Par exemple, voici celui de Bootstrap. En savoir plus à propos de EditorConfig.

From ea079d72839795a7994ec050280ed48f51a3f62a Mon Sep 17 00:00:00 2001 From: Pixelastic Date: Fri, 30 May 2014 18:49:26 +0200 Subject: [PATCH 03/24] Fully translated. --- _config.yml | 6 +- _includes/css/class-names.css | 4 +- _includes/css/comments.css | 8 +-- _includes/css/declaration-order.css | 10 ++-- _includes/css/import.html | 4 +- _includes/css/nesting.scss | 4 +- _includes/css/organization-comments.css | 8 +-- _includes/css/prefixed-properties.css | 2 +- _includes/css/selectors.css | 4 +- _includes/css/shorthand.css | 4 +- _includes/css/single-declarations.css | 4 +- _includes/css/syntax.css | 4 +- _includes/footer.html | 6 +- _includes/html/attribute-order.html | 2 +- _includes/html/lang.html | 2 +- _includes/html/reducing-markup.html | 4 +- _includes/html/style-script.html | 4 +- _includes/html/syntax.html | 4 +- index.html | 78 ++++++++++++------------- 19 files changed, 81 insertions(+), 81 deletions(-) diff --git a/_config.yml b/_config.yml index f313f10e..7b2fa76d 100644 --- a/_config.yml +++ b/_config.yml @@ -1,6 +1,6 @@ -name: Code Guide by @mdo -description: Standards for developing flexible, durable, and sustainable HTML and CSS. -url: http://codeguide.co +name: Guide de Code par @mdo +description: Standards pour des fichiers HTML et CSS flexibles, durables et maintenables. +url: http://pixelastic.github.io/code-guide/ markdown: rdiscount permalink: pretty diff --git a/_includes/css/class-names.css b/_includes/css/class-names.css index fdca375a..98616189 100644 --- a/_includes/css/class-names.css +++ b/_includes/css/class-names.css @@ -1,9 +1,9 @@ -/* Bad example */ +/* Mauvais exemple */ .t { ... } .red { ... } .header { ... } -/* Good example */ +/* Bon exemple */ .tweet { ... } .important { ... } .tweet-header { ... } diff --git a/_includes/css/comments.css b/_includes/css/comments.css index 2080b063..fb2875eb 100644 --- a/_includes/css/comments.css +++ b/_includes/css/comments.css @@ -1,11 +1,11 @@ -/* Bad example */ -/* Modal header */ +/* Mauvais exemple */ +/* Entête de modale */ .modal-header { ... } -/* Good example */ -/* Wrapping element for .modal-title and .modal-close */ +/* Bon exemple */ +/* Encadrement de l'élément pour .modal-title et .modal-close */ .modal-header { ... } diff --git a/_includes/css/declaration-order.css b/_includes/css/declaration-order.css index 01801d66..1a1175b2 100644 --- a/_includes/css/declaration-order.css +++ b/_includes/css/declaration-order.css @@ -1,5 +1,5 @@ .declaration-order { - /* Positioning */ + /* Positionnement */ position: absolute; top: 0; right: 0; @@ -7,23 +7,23 @@ left: 0; z-index: 100; - /* Box-model */ + /* Modèle de boîte */ display: block; float: right; width: 100px; height: 100px; - /* Typography */ + /* Typographie */ font: normal 13px "Helvetica Neue", sans-serif; line-height: 1.5; color: #333; text-align: center; - /* Visual */ + /* Visuel */ background-color: #f5f5f5; border: 1px solid #e5e5e5; border-radius: 3px; - /* Misc */ + /* Divers */ opacity: 1; } diff --git a/_includes/css/import.html b/_includes/css/import.html index aa44b5d0..d0e89b03 100644 --- a/_includes/css/import.html +++ b/_includes/css/import.html @@ -1,7 +1,7 @@ - + - + diff --git a/_includes/css/nesting.scss b/_includes/css/nesting.scss index bc863dba..07f6e129 100644 --- a/_includes/css/nesting.scss +++ b/_includes/css/nesting.scss @@ -1,8 +1,8 @@ -// Without nesting +// Sans imbrication .table > thead > tr > th { … } .table > thead > tr > td { … } -// With nesting +// Avec imbrication .table > thead > tr { > th { … } > td { … } diff --git a/_includes/css/organization-comments.css b/_includes/css/organization-comments.css index d7f29a1c..ff44f0c2 100644 --- a/_includes/css/organization-comments.css +++ b/_includes/css/organization-comments.css @@ -1,17 +1,17 @@ /* - * Component section heading + * Entête de section de composant */ .element { ... } /* - * Component section heading + * Entête de section de composant * - * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough. + * Parfois, vous avez besoin d'ajouter plus de contexte pour le composant. */ .element { ... } -/* Contextual sub-component or modifer */ +/* Sous-composant contextuel, ou modificateur */ .element-heading { ... } diff --git a/_includes/css/prefixed-properties.css b/_includes/css/prefixed-properties.css index fc61fa28..3423d829 100644 --- a/_includes/css/prefixed-properties.css +++ b/_includes/css/prefixed-properties.css @@ -1,4 +1,4 @@ -/* Prefixed properties */ +/* Propriétés prefixées */ .selector { -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); box-shadow: 0 1px 2px rgba(0,0,0,.15); diff --git a/_includes/css/selectors.css b/_includes/css/selectors.css index a3656731..4191aa65 100644 --- a/_includes/css/selectors.css +++ b/_includes/css/selectors.css @@ -1,9 +1,9 @@ -/* Bad example */ +/* Mauvais exemple */ span { ... } .page-container #stream .stream-item .tweet .tweet-header .username { ... } .avatar { ... } -/* Good example */ +/* Bon exemple */ .avatar { ... } .tweet-header .username { ... } .tweet .avatar { ... } diff --git a/_includes/css/shorthand.css b/_includes/css/shorthand.css index 19fa2057..ef9c002a 100644 --- a/_includes/css/shorthand.css +++ b/_includes/css/shorthand.css @@ -1,4 +1,4 @@ -/* Bad example */ +/* Mauvais exemple */ .element { margin: 0 0 10px; background: red; @@ -6,7 +6,7 @@ border-radius: 3px 3px 0 0; } -/* Good example */ +/* Bon exemple */ .element { margin-bottom: 10px; background-color: red; diff --git a/_includes/css/single-declarations.css b/_includes/css/single-declarations.css index 7b57a930..96b0b619 100644 --- a/_includes/css/single-declarations.css +++ b/_includes/css/single-declarations.css @@ -1,9 +1,9 @@ -/* Single declarations on one line */ +/* Déclarations uniques sur une seule ligne */ .span1 { width: 60px; } .span2 { width: 140px; } .span3 { width: 220px; } -/* Multiple declarations, one per line */ +/* Déclarations multiples, une par ligne */ .sprite { display: inline-block; width: 16px; diff --git a/_includes/css/syntax.css b/_includes/css/syntax.css index 4735d99a..8d7cfbce 100644 --- a/_includes/css/syntax.css +++ b/_includes/css/syntax.css @@ -1,4 +1,4 @@ -/* Bad CSS */ +/* Mauvais CSS */ .selector, .selector-secondary, .selector[type=text] { padding:15px; margin:0px 0px 15px; @@ -6,7 +6,7 @@ box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF } -/* Good CSS */ +/* Bon CSS */ .selector, .selector-secondary, .selector[type="text"] { diff --git a/_includes/footer.html b/_includes/footer.html index 8f1858ca..bd1d2729 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,7 +1,7 @@

@@ -30,9 +30,9 @@

CSS

Ordre des déclarations

N'utilisez pas @import

Emplacement des media queries

Propriétées prefixées

Propriétés prefixées

Règles avec unique déclaration

Notation abrégées

Notations abrégées

Imbrication avec Less et Sass

Commentaires

Classes

@@ -65,7 +65,7 @@

HTML

Syntaxe

utilisez des indentations douces avec deux espaces — c'est le seul moyen de garantir que le code s'affichera de la même manière sous tous les environnements.
utilisez deux espaces pour l'indentation — c'est le seul moyen de garantir que le code s'affichera de la même manière sous tous les environnements.
les éléments imbriqués doivent être indentés une fois (deux espaces).
utilisez toujours des guillements doubles, jamais de guillemets simples, sur les attributs.
n'utilisez pas de slash terminal sur les éléments auto-fermants — la spécification html5 indique qu'ils sont optionnels.

Syntaxe

Doctype HTML6

Doctype HTML5

Forcez le mode standard et donc un affichage plus cohérent dans tous les navigateurs possibles avec ce simple doctype au début de chaque page HTML.

@@ -105,7 +105,7 @@

Attributs de langue

Mode de compatibilité IE

Internet Explorer supporte l'utilisation d'une balise de compatibilité <meta> pour spécifier sous quelle version de IE la page devrait être rendue. Sauf cas exceptionnel, il est préférable de dire à IE d'utiliser le dernier mode de rendu supporté avec le edge mode.

Pour plus d'informations, vous pouvez lire cet extraordinaire article sur Stack Overflow.

@@ -115,8 +115,8 @@

Mode de compatibilité IE

Encodage des caractères

Codage des caractères

Assurez vous rapidement et facilement d'un bon rendu de votre contenu en déclarant de manière explicite le codage des caractères. En faisant ainsi, vous pouvez éviter d'utiliser des entités HTML, pour peu que leur encoding corresponde à celui du document (généralement UTF-8)

{% highlight html %}{% include html/encoding.html %}{% endhighlight %} @@ -141,8 +141,8 @@

Liens vers la spec HTML5

Praticité plutôt que pureté

Pragmatisme plutôt que pureté

Tendez à maintenir les standards et la sémantique HTML, mais pas au dépends du pragmatisme. Autant que possible, cherchez à utiliser le moins de balisage possible, avec le moins d'imbrication possible.

@@ -186,8 +186,8 @@

Attributs booléens

Réduire le markup

Réduire le balisage

Autant que possible, évitez les éléments parents inutiles quand vous écrivez du HTML. Bien souvent, cela nécessite plusieurs passes et du refactoring, mais cela produit moins de HTML. Prenez l'exemple suivant :

{% highlight html %}{% include html/reducing-markup.html %}{% endhighlight %} @@ -196,8 +196,8 @@

Réduire le markup

Markup généré par Javascript

Écrire du markup dans un fichier Javascript rends son contenu plus difficile à trouver, plus difficile à éditer et moins performant. Évitez autant que possible.

Balisage généré par Javascript

Écrire du balisage dans un fichier Javascript rends son contenu plus difficile à trouver, plus difficile à éditer et moins performant. Évitez autant que possible.

@@ -211,7 +211,7 @@

CSS

Syntaxe

Utilisez une indentation douce avec deux espaces — c'est le seul moyen de garantir que le code s'affiche de la même manière sur tous les environnements.
Utilisez deux espaces pour l'indentation — c'est le seul moyen de garantir que le code s'affiche de la même manière sur tous les environnements.
Lorsque vous regroupez des sélecteurs, laissez chaque sélecteur sur sa propre ligne.
Ajouter un espace avant l'accolade d'ouverture de la déclaration pour la lisibilité.
Placez les accolades de fermeture de la déclaration sur une nouvelle ligne.

Syntaxe

Chaque déclaration doit apparaitre sur sa propre ligne pour un affichage des erreurs plus précis.
Terminez vos déclarations par un point-virgule. Celui sur la dernière déclaration est optionnel mais votre code sera plus robuste aux erreurs en l'ajoutant.
Les valeurs de propriétés séparées par des virgules doivent inclure un espace après chaque virgule (e.g., box-shadow).
N'ajoutez pas d'espace après les virgules à l'intérieur de rgb(), rgba(), hsl(), hsla(), ou rect(). Cela permet de différencier de multiples valeurs de couleurs (virgule, sans espace), de multiples valeurs de propriétés (virgule, avec espac multiples valeurs de propriétés (virgule, avec espace).
Ne préfixez pas les valeurs de propriétés ou les paramètres de couleur avec un zéro (e.g., .5 plutot que 0.5 et -.5px plutot que -0.5px).
N'ajoutez pas d'espace après les virgules à l'intérieur de rgb(), rgba(), hsl(), hsla(), ou rect(). Cela permet de différencier les multiples valeurs de couleurs (virgule, sans espace) des multiples valeurs de propriétés (virgule, avec espace).
Ne préfixez pas les valeurs de propriétés ou les paramètres de couleur avec un zéro (e.g., .5 plutôt que 0.5 et -.5px plutôt que -0.5px).
Mettez toutes les valeurs hexadécimales en minuscule, e.g., #fff. Les lettres minuscules sont bien plus facile à repérer lorsqu'on scanne visuellement un document car elles ont des formes plus uniques.
Utilisez les valeurs réduits hexadécimales dès que possible, e.g., #fff plutot que #ffffff.
Utilisez les valeurs réduites hexadécimales dès que possible, e.g., #fff plutôt que #ffffff.
Mettez les valeurs des attributes entre double guillemets dans les sélecteurs, e.g., input[type="text"]. Ils sont optionnels dans certains cas, mais c'est une bonne pratique pour la cohérence.
Évitez d'ajouter des unités quand la valeur est zéro, e.g., margin: 0; plutot que margin: 0px;.
Évitez d'ajouter des unités quand la valeur est zéro, e.g., margin: 0; plutôt que margin: 0px;.

Vous avez des questions sur les termes employés ici ? Référez-vous à la section sur la syntaxe de l'article sur les Cascading Style Sheets sur Wikipedia.

@@ -239,12 +239,12 @@

Ordre des déclarations

Les déclarations de propriétés similaires devraient être regroupées ensemble selon cet ordre :

Positionnement
Modèle de boite
Modèle de boîte
Typographie
Visuel

Tout le reste agissant à l'intérieur de l'élement ou sans impacter les deux sections précédentes, ils viennent ensuite.

Le positionnement vient en premier car cela peut retirer un élément du flux normal du document et overrider les styles relatifs au modèle de boîte. Le modèle de boîte vient ensuite car il influe sur les dimensions et le placement de l'élément.

Tout le reste agissant à l'intérieur de l'élement ou sans impacter les deux sections précédentes, vient ensuite.

Pour une liste complète des propriétés et leur ordre, merci de vous référer à Recess.

@@ -255,9 +255,9 @@

Ordre des déclarations

N'utilisez pas `@import`

Comparé à des <link>s, @import est plus lent, ajoute de nouvelles requêtes à la page et peut poser des problèmes imprévisibles. Évitez-les autant que possible et optez plutôt pour une approche alternative :

Utilisez plusieurs éléments <link>/li> +
Utilisez plusieurs éléments <link>
Compilez votre CSS avec un pré-processeur, comme Sass ou Less dans un seul fichier.
Concaténez votre CSS grâce aux fonctionnalités proposées par Rails, Jekyll ou d'autres environnements.

@@ -281,7 +281,7 @@

Emplacement des media queries

Propriétés prefixées

Sous TextMate, utilisez Text → Edit Each Line in Selection (⌃⌘A). Sous Sublime Text 2, utilisez Selection → Add Previous Line (⌃⇧↑) et Selection → Add Next Line (⌃⇧↓).

@@ -293,7 +293,7 @@

Propriétés prefixées

Règles avec unique déclaration

L'élément important ici est la détection des erreurs — e.g., un validateur CSS qui vous indique que vous avez une erreur à la ligne 183. Avec une seule déclaration, vous ne pouvez pas vous tromper. Avec plusieurs déclarations, il est indispensable de séparer les lignes si vous tenez à votre santé mentale.

{% highlight css %}{% include css/single-declarations.css %}{% endhighlight %} @@ -346,13 +346,13 @@

Commentaires

Nom des classes

N'utilisez que des minuscules et des tirets dans les noms des classes (pas d'underscore ou de camelCalse). Les tirets sont des séparateurs naturels dans les classes de même contexte (e.g., .btn et .btn-danger).
Évitez les notations abrégées excessives et arbitraires. .btn est utile pour un button, mais .s ne veut rien dire
Évitez les notations abrégées excessives et arbitraires. .btn est utile pour un button, mais .s ne veut rien dire.
Gardez les noms de classes aussi courts et succincts que possible.
Utilisez des noms qui ont du sens; préférez des noms expliquant la structure ou le but plutot que la présentation.
Utilisez des noms qui ont du sens; préférez des noms expliquant la structure ou le but plutôt que la présentation.
Préfixez les classes d'après le parent le plus proche ou la classe de base.
Utilisez des classes .js-* pour indiquer un comportement (par opposition à un style), mais laissez ces classes en dehors de votre CSS.

Il est aussi utilise d'appliquer la majorité de ces règles lorsque vous créez des nom de variable Less ou Sass.

Il est aussi utile d'appliquer la majorité de ces règles lorsque vous créez des noms de variable Less ou Sass.

{% highlight css %}{% include css/class-names.css %}{% endhighlight %} @@ -361,12 +361,12 @@

Nom des classes

Sélécteurs

Sélecteurs

Préférez les classes plutot que les noms de balises pour une performance de rendu optimale.
Évitez d'utiliser plusieurs attributs de sélécteur (e.g., [class^="..."]) sur des éléments apparaissant souvent dans la page. La performance du navigateur est impactée par ces sélecteurs.
Gardez vos sélecteurs courts et limitez le nombre d'élément dans chaque sélecteur à trois.
Encadrez vos classes par le parent le plus proche seulement quand cela est nécessaire (e.g., quand vous n'utilisez pas les classes préfixées).
Préférez les classes plutôt que les noms de balises pour une performance de rendu optimale.
Évitez d'utiliser plusieurs attributs de sélecteur (e.g., [class^="..."]) sur des éléments apparaissant souvent dans la page. La performance du navigateur est impactée par ces sélecteurs.
Gardez vos sélecteurs courts et limitez le nombre d'éléments dans chaque sélecteur à trois.
Encadrez vos classes par le parent le plus proche uniquement lorsque cela est nécessaire (e.g., quand vous n'utilisez pas les classes préfixées).

Plus d'informations :

Organisation

Organisez vos sections de code par composant.
Développez une hiérarchie de commentaires cohérente.
Utilisez les sauts de lignes de manière cohérente à votre avantage pour séparer les sections de code de manière à scanner le document plus facilement.
Lorsque vous utilisez plusieurs fichiers CSS, séparez-les par composant plutot que par pages. Les pages peuvent changer, et les composants sont plus flexibles.
Lorsque vous utilisez plusieurs fichiers CSS, séparez-les par composant plutôt que par page. Les pages peuvent changer, et les composants sont plus flexibles.

@@ -401,7 +401,7 @@

Préférences de votre éditeur

Utilisez une indentation douce de deux espaces.
Supprimez les espaces en fin de ligne à la sauvegarde du fichier.
Définissiez UTF-8 comme encodage.
Définissez UTF-8 comme codage de caracères.
Ajoutez un saut de ligne à la fin des fichiers.

Pensez à documenter et à appliquer ces préférences dans le fichier .editorconfig de votre projet. Par exemple, voici celui de Bootstrap. En savoir plus à propos de EditorConfig.

From 9d9c29dd77f7ba2393878a25ef024a5240133e14 Mon Sep 17 00:00:00 2001 From: Pixelastic Date: Fri, 30 May 2014 18:56:52 +0200 Subject: [PATCH 04/24] Translation readme. --- README.md | 69 +++++++++++++++++++++++++++++-------------------------- 1 file changed, 37 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index d5e69164..732d249b 100644 --- a/README.md +++ b/README.md @@ -1,32 +1,37 @@ -# Code Guide - -Code Guide is a project for documenting standards for developing flexible, durable, and sustainable HTML and CSS. It comes from years of experience writing code on projects of all sizes. It's not the end-all be-all, but it's a start. - -**[Start reading ☞](http://mdo.github.io/code-guide)** - ---- - -### License - -Released under MIT by, and copyright 2014, @mdo. - -### Thanks - -Heavily inspired by [Idiomatic CSS](https://github.com/necolas/idiomatic-css) and the [GitHub Styleguide](http://github.com/styleguide). - -### Translations - -Translations are maintained by their creators and may not always be up to date with the original here. - -- [Chinese](http://zoomzhao.github.io/code-guide/) - Translated by [Zoom Zhao](https://github.com/ZoomZhao) -- [Chinese, Traditional](http://juanitofatas.github.io/code-guide/) - Translated by [Juanito Fatas](https://github.com/JuanitoFatas) -- [Czech](http://smedzlatko.github.io/) - Translated by [Martin Myslík](https://github.com/Smedzlatko) -- [Indonesian](http://diagramatics.github.io/code-guide-id) - Translated by [Steven Sinatra](http://diagramatics.me) -- [Italian](http://alessandro1997.github.io/code-guide/) - Translated by [Alessandro Desantis](https://github.com/alessandro1997) -- [Portuguese](http://diegoeis.github.io/code-guide/) - Translated by [Diego Eis](http://tableless.com.br/) -- [Russian](http://instanceofpro.github.io/code-guide/) - Translated by [Eugene Abrosimov](https://github.com/instanceofpro) -- [Spanish](http://adrianayala.mx/code-guide/es/) - Translated by [Adrian Ayala](http://adrianayala.mx/) - -Have a translation you'd like to link to? Open a pull request to add it here. Be sure to keep it alphabetical. - -<3 +# Guide de Code + +Le Guide de Code est un projet de documentation de standards pour développer +des fichiers HTML et CSS flexibles, durables et maintenables. Il provient +d'années d'expérience à écrire du code pour des projets de toute taille. Ce +n'est pas encore parfait, mais c'est un bon début. + +**[Commencer la lecture ☞](http://pixelastic.github.io/code-guide)** + +--- + +### Licence + +Paru sous licence MIT par, et copyright 2041, @mdo. + +### Remerciements + +Grandement inspiré par [Idiomatic CSS](https://github.com/necolas/idiomatic-css) et le [GitHub Styleguide](http://github.com/styleguide). + +### Traductions + +Les traductions sont maintenues par leurs créateurs et ne sont pas toujours +à jour avec l'original. + +- [Chinois, Traditionel](http://juanitofatas.github.io/code-guide/) - Traduit par [Juanito Fatas](https://github.com/JuanitoFatas) +- [Chinois](http://zoomzhao.github.io/code-guide/) - Traduit par [Zoom Zhao](https://github.com/ZoomZhao) +- [Espagnol](http://adrianayala.mx/code-guide/es/) - Traduit par [Adrian Ayala](http://adrianayala.mx/) +- [Indonésien](http://diagramatics.github.io/code-guide-id) - Traduit par [Steven Sinatra](http://diagramatics.me) +- [Italien](http://alessandro1997.github.io/code-guide/) - Traduit par [Alessandro Desantis](https://github.com/alessandro1997) +- [Portuguais](http://diegoeis.github.io/code-guide/) - Traduit par [Diego Eis](http://tableless.com.br/) +- [Russe](http://instanceofpro.github.io/code-guide/) - Traduit par [Eugene Abrosimov](https://github.com/instanceofpro) +- [Tchèque](http://smedzlatko.github.io/) - Traduit par [Martin Myslík](https://github.com/Smedzlatko) + +Vous avez une traduction que vous aimeriez ajouter ? Ouvrez une Pull Request, +et ajoutez là ici. Assurez-vous de garder l'ordre alphabétique. + +<3 From 37b647605d9121b7236413e673b0b5dc455c0dbc Mon Sep 17 00:00:00 2001 From: Pixelastic Date: Fri, 30 May 2014 19:01:07 +0200 Subject: [PATCH 05/24] Updating readme with links to original version. --- README.md | 7 +++++++ _includes/footer.html | 3 ++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 732d249b..13924e55 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,13 @@ n'est pas encore parfait, mais c'est un bon début. --- +### A propos de cette traduction + +Cette traduction française à été initiée par +[@pixelastic](https://twitter.com/pixelastic) d'après [le projet +original](http://codeguide.co/) de +[@mdo](https://twitter.com/mdo). + ### Licence Paru sous licence MIT par, et copyright 2041, @mdo. diff --git a/_includes/footer.html b/_includes/footer.html index bd1d2729..9353374f 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -1,6 +1,7 @@

Opérateurs avec Less et Sass

Pour une meilleure lisibilité, englobez toutes les opérations mathématiques dans des parenthèses avec un simple espace entre les valeurs, les variables et les opérateurs.

+ {% highlight scss %}{% include css/operators.scss %}{% endhighlight %} +

Commentaires

From 8f77bf190d61861f41a53af06a2474899a1fa6d1 Mon Sep 17 00:00:00 2001 From: Pixelastic Date: Fri, 1 May 2015 18:02:47 +0200 Subject: [PATCH 16/24] Adding Danish and Dutch translations (#134 and #135). --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 1ad01df3..3a6a87e2 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,9 @@ Les traductions sont maintenues par leurs créateurs et ne sont pas toujours - [Chinois](http://codeguide.bootcss.com/) - Traduit par [Wang Sai](https://github.com/wangsai) - [Chinois](http://zoomzhao.github.io/code-guide/) - Traduit par [Zoom Zhao](https://github.com/ZoomZhao) - [Coréen](http://code-guide.aliencube.org/) - Traduit par [Aliencube](https://github.com/aliencube) +- [Danois](http://ohm.sh/code-guide/) - Traduit par [Mads Ohm Larsen](https://github.com/omegahm) - [Espagnol](http://adrianayala.mx/code-guide/es/) - Traduit par [Adrian Ayala](http://adrianayala.mx/) +- [Hollandais](http://chunfeilung.github.io/code-guide/) - Traduit par [Chun Fei Lung](https://github.com/chunfeilung) - [Indonésien](http://diagramatics.github.io/code-guide-id) - Traduit par [Steven Sinatra](http://diagramatics.me) - [Italien](http://alessandro1997.github.io/code-guide/) - Traduit par [Alessandro Desantis](https://github.com/alessandro1997) - [Japonais](http://kia-king.com/code-guide/) - Traduit par [Kia King Ishii](https://github.com/kiaking) From 9c7115c763b26bf76c458221eef7ea28bfda249b Mon Sep 17 00:00:00 2001 From: Pixelastic Date: Mon, 1 Jun 2015 10:58:02 +0200 Subject: [PATCH 17/24] Merged original PR #137: data-modal was replaced by the data-toggle --- _includes/html/attribute-order.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_includes/html/attribute-order.html b/_includes/html/attribute-order.html index 73dcff5a..6e1d31ed 100644 --- a/_includes/html/attribute-order.html +++ b/_includes/html/attribute-order.html @@ -1,4 +1,4 @@ - + Lien d'exemple From a2b7b33f418e38ee9441b8aac3b190a4ea5f5562 Mon Sep 17 00:00:00 2001 From: Pixelastic Date: Thu, 30 Jul 2015 09:05:20 +0200 Subject: [PATCH 18/24] Merged original PR #149: Swap aria-*, role in Attribute order section --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index e510de24..76c29e00 100644 --- a/index.html +++ b/index.html @@ -157,7 +157,7 @@

Ordre des attributs

data-*

src, for, type, href, value

title, alt

aria-*, role

role, aria-*

From 9dffe7a0d61bc1c510afd0149944557809bbc292 Mon Sep 17 00:00:00 2001 From: Florian Date: Thu, 20 Aug 2015 09:01:13 +0200 Subject: [PATCH 19/24] =?UTF-8?q?correction=20d'une=20type=20(style=20->?= =?UTF-8?q?=20script=C3=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 76c29e00..c75dd869 100644 --- a/index.html +++ b/index.html @@ -132,7 +132,7 @@

Liens vers la spec HTML5

From 449967c7dd01874ae5ee2c84947357938c987de7 Mon Sep 17 00:00:00 2001 From: Pixelastic Date: Thu, 20 Aug 2015 14:30:39 +0300 Subject: [PATCH 20/24] Merged original PR #152: Add 'Additional Reading' to Nesting block --- index.html | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/index.html b/index.html index c75dd869..6a4bc167 100644 --- a/index.html +++ b/index.html @@ -325,6 +325,10 @@

Notations abrégées

Imbrication avec Less et Sass

Pour en savoir plus :

Imbrications en Sass et Less (anglais)

{% highlight scss %}{% include css/nesting.scss %}{% endhighlight %} From 07a9595a0834290916e86b17cdafcb233a500dfd Mon Sep 17 00:00:00 2001 From: Pixelastic Date: Wed, 23 Sep 2015 08:26:50 +0200 Subject: [PATCH 21/24] Merged original PR #139: Add Turkish translation --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 3a6a87e2..efc145a4 100644 --- a/README.md +++ b/README.md @@ -44,6 +44,7 @@ Les traductions sont maintenues par leurs créateurs et ne sont pas toujours - [Portuguais](http://diegoeis.github.io/code-guide/) - Traduit par [Diego Eis](http://tableless.com.br/) - [Russe](http://instanceofpro.github.io/code-guide/) - Traduit par [Eugene Abrosimov](https://github.com/instanceofpro) - [Tchèque](http://smedzlatko.github.io/) - Traduit par [Martin Myslík](https://github.com/Smedzlatko) +- [Turc](http://kod-rehberi.hayatbiralem.com/) - Traduit par [Ömür Yanıkoğlu](http://hayatbiralem.com/) Vous avez une traduction que vous aimeriez ajouter ? Ouvrez une Pull Request, et ajoutez là ici. Assurez-vous de garder l'ordre alphabétique. From 42c1581a5d8b8cafd39eb101b21bb50e52a76d09 Mon Sep 17 00:00:00 2001 From: Pixelastic Date: Mon, 30 Nov 2015 10:18:25 +0100 Subject: [PATCH 22/24] Merged original PR #159: Russian translation url changed --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index efc145a4..cc928592 100644 --- a/README.md +++ b/README.md @@ -42,7 +42,7 @@ Les traductions sont maintenues par leurs créateurs et ne sont pas toujours - [Japonais](http://kia-king.com/code-guide/) - Traduit par [Kia King Ishii](https://github.com/kiaking) - [Polonais](http://bondarewicz.github.io/code-guide/) - Traduit par [Łukasz Bondarewicz](https://github.com/bondarewicz) - [Portuguais](http://diegoeis.github.io/code-guide/) - Traduit par [Diego Eis](http://tableless.com.br/) -- [Russe](http://instanceofpro.github.io/code-guide/) - Traduit par [Eugene Abrosimov](https://github.com/instanceofpro) +- [Russe](http://sadcitizen.github.io/code-guide/) - Traduit par [Eugene Abrosimov](https://github.com/sadcitizen) - [Tchèque](http://smedzlatko.github.io/) - Traduit par [Martin Myslík](https://github.com/Smedzlatko) - [Turc](http://kod-rehberi.hayatbiralem.com/) - Traduit par [Ömür Yanıkoğlu](http://hayatbiralem.com/) From 760d039b4801660ffa363e3ebb6ddf9b733e29ab Mon Sep 17 00:00:00 2001 From: Pixelastic Date: Thu, 3 Mar 2016 11:39:43 +0100 Subject: [PATCH 23/24] fix(167): Fix french grammar issue --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 6a4bc167..52fe1eb2 100644 --- a/index.html +++ b/index.html @@ -198,7 +198,7 @@

Réduire le balisage

Balisage généré par Javascript

Écrire du balisage dans un fichier Javascript rends son contenu plus difficile à trouver, plus difficile à éditer et moins performant. Évitez autant que possible.

Écrire du balisage dans un fichier Javascript rend son contenu plus difficile à trouver, plus difficile à éditer et moins performant. Évitez autant que possible.

From 6c30f564d649d220161ef96c3ee2daf7dd3c372d Mon Sep 17 00:00:00 2001 From: Pixelastic Date: Tue, 31 Oct 2017 10:07:59 +0100 Subject: [PATCH 24/24] Update translation links --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index cc928592..85d05046 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ Les traductions sont maintenues par leurs créateurs et ne sont pas toujours - [Chinois](http://zoomzhao.github.io/code-guide/) - Traduit par [Zoom Zhao](https://github.com/ZoomZhao) - [Coréen](http://code-guide.aliencube.org/) - Traduit par [Aliencube](https://github.com/aliencube) - [Danois](http://ohm.sh/code-guide/) - Traduit par [Mads Ohm Larsen](https://github.com/omegahm) -- [Espagnol](http://adrianayala.mx/code-guide/es/) - Traduit par [Adrian Ayala](http://adrianayala.mx/) +- [Hindi](https://hidaytrahman.github.io/code-guide/) - Traduit par [Hidaytullah Rahmani](https://github.com/hidaytrahman) - [Hollandais](http://chunfeilung.github.io/code-guide/) - Traduit par [Chun Fei Lung](https://github.com/chunfeilung) - [Indonésien](http://diagramatics.github.io/code-guide-id) - Traduit par [Steven Sinatra](http://diagramatics.me) - [Italien](http://alessandro1997.github.io/code-guide/) - Traduit par [Alessandro Desantis](https://github.com/alessandro1997)

Table of contents

Table des matières

HTML

CSS

CSS

Golden rule

Règle d'or

HTML

Syntax

Syntaxe

Syntax

HTML5 doctype

Doctype HTML6

HTML5 doctype

Language attribute

Attributs de langue

Language attribute

IE compatibility mode

Mode de compatibilité IE

IE compatibility mode

Character encoding

Encodage des caractères

Character encoding

CSS and JavaScript includes

HTML5 spec links

Inclusions CSS et Javascript

Liens vers la spec HTML5

HTML5 spec links

Practicality over purity

Praticité plutôt que pureté

Attribute order

Ordre des attributs

Attribute order

Attribute order

Boolean attributes

Attributs booléens

Boolean attributes

Reducing markup

Réduire le markup

Reducing markup

JavaScript generated markup

Markup généré par Javascript

CSS

Syntax

Syntaxe

Syntax

Declaration order

Ordre des déclarations

Declaration order

Don't use @import

N'utilisez pas @import

CSS

N'utilisez pas @import

Media query placement

Emplacement des media queries

Media query placement

Prefixed properties

Propriétés prefixées

Prefixed properties

Single declarations

Règles avec unique déclaration

Single declarations

Shorthand notation

Notations abrégées

Shorthand notation

Shorthand notation

Nesting in Less and Sass

Imbrication avec Less et Sass

Nesting in Less and Sass

Comments

Commentaires

Comments

Class names

Nom des classes

Class names

Selectors

Sélécteurs

Selectors

Organization

Organisation

Don't use `@import`

N'utilisez pas `@import`

N'utilisez pas `@import`

N'utilisez pas `@import`