DokuWiki cfn

cfn:a_brief_history_of_css

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T17:53:09+00:00

<- Browser rendering differencesThe current state of CSS -> CSS : Bref rappel historique Aux débuts, chaque navigateur avait ses propres stylesheets * CSS1 : 1996 * CSS2 : 1998 * CSS2.1 : 2003 support css premiers * pas d'intérêts sur les standards ou l'interopérabilité * beaucoup d'éléments et fonctionnalités propriétaires

cfn:additional_resources

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T23:39:46+00:00

<- Online tools -> * web developper's handbook : alvit.de/handbook * reference.sitepoint.com/css * css-tricks.com

cfn:authoring_options

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T17:03:11+00:00

<- How CSS works with HTML structureHow browsers apply styles -> endroit où le css peut se trouver * styles externes (fichiers textes .css), on les lie avec une balise dans le * styles “embedded” : dans le head * styles “inlines” : dans les balises elles-même considération sur la rédaction du CSS

cfn:backgrounds

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T20:24:51+00:00

<- BordersColor -> background * background * background-color * background-image * background-position * background-origin * background-repeat * background-clip Par défaut, les background sont transparents. CSS3 : possibilité d'utiliser plusieurs background-images.

cfn:basic_layout_concepts

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T21:43:23+00:00

<- FloatsMedia types and media queries -> fluid layout : use em.

cfn:basic_selector_types

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T16:12:51+00:00

<- SyntaxHow CSS works with HTML structure -> * element selector (ex : p) : sélecteurs globaux basés sur des éléments html individuels * class selector (ex .classe) : sélecteur d'attribut basés sur l'attribut class appliqués aux éléments html * id selector (ex #id) : sélecteur d'attribut basés sur l'attribut id appliqués aux éléments html

cfn:borders

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T20:16:31+00:00

<- Margins and paddingBackgrounds -> border position: top,right,bottom,left * border : shorthand notation * border--style * border--width * border--color * border- : shorthand notation * border-style : solid, dotter, dashed, double, groove, ridge, inset, outset, none, hidden

cfn:browser_rendering_differences

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T17:39:32+00:00

<- How browsers apply stylesA brief history of CSS -> 1994 : W3C Aujourd'hui les navigateurs ont davantage en commun que de différences.

cfn:checking_browser_support

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T19:04:56+00:00

<- Reading specificationsWorking with fonts -> CSS est un “living standard”, responsabilité échoît donc à l'auteur de s'informer du support de celui-ci au sein des différents navigateurs. Vérifier le support des navigateurs * tester soi-même sur plusieurs navigateurs * Les versions anciennes ont parfois des rendus différents des versions actuelles

cfn:color

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T20:33:10+00:00

<- BackgroundsCommon units of measurement -> color * border-color * background-color * color color-keywords w3.org/TR/2011/REC-css3-color-20110607/#svg-color hex * #rrggbb * #rgb rgb * rgb(000-255,000-255,000-255) * rgb(0-100%,0-100%,0-100%) rgba * rgba(000-255,000-255,000-255,0-1)

cfn:common_units_of_measurement

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T20:55:22+00:00

<- ColorElement positioning -> unités de mesure valeurs Valeurs absolues ou fixées, et valeurs relatives. valeurs absolues * in:inches * cm:centimètres * mm:millimètres * pt:points * pc:picas valeurs relatives * em:ems * ex:exes * px:pixels (tricky)

cfn:default_browser_styles

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T15:47:30+00:00

<- What is CSSSyntax -> Le “aucun style” (CSS) proposé par les navigateur n'est en réalité pas exact : le navigateur utilisera alors des styles par défaut en lieu et place des feuilles de style du site. Lorsque l'on applique du css, on l'applique par-dessus ce

cfn:editors

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T23:28:09+00:00

<- PreprocessorsOnline tools ->

cfn:element_positioning

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T21:24:17+00:00

<- Common units of measurementFloats -> 3 types de positionnement en CSS : * normal flow * element floating * absolute positioning normal document flow Empile les éléments les uns après les autres. * position : static, relative, absolute, fixed, inherit absolute positioning

cfn:exploring_specifications

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T18:09:36+00:00

<- The current state of CSSReading specifications -> Check latest versions, browse table of content for what you're looking to. w3.org/TR/CSS/#selectors

cfn:floats

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T21:35:15+00:00

<- Element positioningBasic layout concepts -> * float : left,rigth, none, inherit; clearing floats * clear : left, right, both learning objectives * apprendre comment les éléments flottants impactent sur leurs parents * se focaliser sur comment le clearing fonctionne. * comment la largeur impacte la flotabilité des éléments

cfn:formatting_text

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T19:33:41+00:00

<- Working with fontsWhat is the box model -> Fixed units and relatives units Les unités fixes sont affichés à la taille demandé, indépendamment du device ou du context Les unités relatives sont affichés relativement à leur environnement font-size font-weight font-style font-variant

cfn:how_browsers_apply_styles

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T17:18:02+00:00

<- Authoring optionsBrowser rendering differences -> processus de lecture des sélecteurs par l'user-agent Une lecture de droite à gauche des sélecteurs, par ex : { prop:value;} L'user-agent va d'abord isoler les dans le html, puis regarder lesquels sont enfants d'un , et enfin parmi ceux-ci lesquels sont dans un

cfn:how_css_works_with_html_structure

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T16:57:24+00:00
<- Basic selector typesAuthoring options -> Dans l'apprentissage typique html puis css, l'importance de la relation entre ces deux technologies est parfois perdue. * commencer avec du html bien structuré quelques bonnes pratiques * utiliser des classes et id signifiants * utiliser une structure html

cfn:margins_and_padding

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T19:56:47+00:00
<- What is the box modelBorders -> marges intérieures (padding) * padding (shorthand notation). * padding-top * padding-right * padding-bottom * padding-left marges extérieures (margin) * les marges extérieures représentent l'espace entre deux éléments

cfn:media_types_and_media_queries

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T21:58:34+00:00
<- Basic layout conceptsWhat is CSS3 -> media types Changer la présentation selon le type de device. @media rule @media screen { //styles } @import syntax @import url("styles.css") screen; link element syntax Le plus commun

cfn:online_tools

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T23:36:15+00:00
<- EditorsAdditional resources -> * l'évolution conitnue de la syntaxe CSS rend difficile le fait d'être à jour * les vendor-prefixes et les syntaxes propriétaires ajoutent à la complexité * il existent des outils en ligne qui vous aident à garder en vue la syntaxe et la générer pour vous automatiquement.

cfn:popular_frameworks

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T23:11:41+00:00
<- Using frameworks and gridsPreprocessors -> * blueprint : un des plus anciens, plus documentés blueprintcss.org * 52framework.com * 960gridsystem 960.gs * YUI 2 (yahoo) * CSS boilerplate (lightweight + semantics) css-boilerplate * baseline : typography baselinecss.com

cfn:preprocessors

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T23:20:38+00:00
<- Popular frameworksEditors -> CSS preprocessors * variables * nesting * mixins * mixins w/ functions * CSS operators * automatic vendor prefixes considérations * nécessité d'apprendre la syntaxe * final CSS is abstracted away from the author view * certains processeurs utilisent javascript pour processer leur code

cfn:reading_specifications

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T18:31:37+00:00
<- Exploring specificationsChecking browser support -> * Les spécifications sont faites pour l'implémentation, pas pour la rédaction * Les spécifications contiendront de temps à autre des détails concernant le parsing, la gestion des erreurs et les règles de syntaxe * Cette complexité peut désappointer les rédacteurs

cfn:syntax

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T15:58:08+00:00
<- Default browser stylesBasic selector types -> Le CSS est constitué de plusieurs éléments : * sélecteur * déclaration, entre {} * propriété, suivie de deux points : * valeur, suivie d'un point virgule ; sélecteur { propriété : valeur ; } Les whitespace n'ont pas d'importance en

cfn:the_current_state_of_css

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T17:59:31+00:00
<- A brief history of CSSExploring specifications -> w3.org/Style/CSS/current-work

cfn:using_frameworks_and_grids

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T23:07:43+00:00
<- What is a CSS ResetPopular frameworks -> frameworks and grids CSS frameworks Fichiers CSS pré-préparés fournissant une système de template pour le layout du site. Contenu commun des frameworks * CSS reset * Basic element styling * Basic Structural styling * Browser inconsistencies

cfn:vendor_prefixes

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T22:39:47+00:00
<- What is CSS3What is a CSS Reset -> vendor prefixes * -ms-:Microsoft * -moz-:Mozilla * -o-:Opera * -khtml-:Konqueror * -webkit-:WebKit utilité * CSS en constante évolution * Les vendor prefixes indiquent une propriété expérimentale * Ils donnent aux designer une opportunité d'utiliser ces propriétés alors encore en développement

cfn:what_is_a_css_reset

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T22:51:36+00:00
<- Vendor prefixesUsing frameworks and grids -> CSS reset : un ensemble de styles qui annule les styles par défaut du navigateur, permettant aux designers de limiter les conflits entre leurs styles et ceux des différents navigateurs. Propriétés communes à reset-er : * margins * padding

cfn:what_is_css

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T15:36:26+00:00
<- WelcomeDefault browser styles -> what is CSS ? Cascading Style Sheets (Feuilles de Style en Cascade) est un language de feuilles de style développé pour contrôler l'aspect visuel de document utilisant un langage de balisage. HTML = structure CSS = présentation * les feuilles de styles sont des collections de règles de formatage

cfn:what_is_css3

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T22:28:03+00:00
<- Media types and media queriesVendor prefixes -> CSS3 * CSS3 est une marque, utilisée pour dénoter les nouvelles fonctionnalités CSS features améliorations de propriétés existantes * border-radius * border-image * multiple backgrounds, size, orientation * rgba, hsla nouvelles fonctionnalités de formatage du texte

cfn:what_is_the_box_model

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T19:47:48+00:00
<- Formatting textMargins and padding -> Concept critique. Box model : Réfère aux propriétés physiques de la boite rectangulaire qui entoure chaque élément. ces propriétés sont la marge extérieure (margin), intérieur (padding), la largeur du contenu (content width) et sa hauteur (

cfn:working_with_fonts

Anonymous (anonymous@undisclosed.example.com) — 2015-12-22T19:11:06+00:00
<- Checking browser supportFormatting text -> * System fonts * large support * peu de choix * Web fonts * technique émergente (2011) * peu de support sur les vieux navigateurs (2011) options concernant les fontes * fontes par défaut du navigateur * fontes système, fallback options