Définir avec CSS l'apparence du web graphique des capteurs dans l'IoT

Dans l'article précédent de la série sur comment réaliser des graphiques d'état de capteurs connectés à l'Internet des objets IoT explique la manière utiliser une page Web développée en HTML comme structure pour les graphiques. Les éléments de la page Web, réduits au minimum à l'aide d'objets <div>, n'ont pas défini directement son apparence, mais ont fait référence au informations d'apparence dans une feuille de style CSS, c'est ce qui va être expliqué dans cette partie de la série.

Dans la solution que je propose pour réaliser des graphes de capteurs connectés à l'IoT, on utilise un document CSS qui est chargé à partir du document HTML. Si le code HTML sera généré depuis une application sur le serveur, par exemple dans PHP, il serait très simple de l'inclure dans le code qui définit la page Web au lieu de le charger à partir de celle-ci, ce qui pourrait être un peu optimisé en enregistrant un appel. Quelle que soit l'option choisie, la méthode la plus pratique comprend modifier le code CSS dans un document séparé pour le gérer plus confortablement et pouvoir le réutiliser. Dans l'exemple développé dans le tutoriel de cette série d'articles, on lui a donné le nom estilo.css.

De la même manière, Lorsqu'il s'agit de projets complexes, il sera conseillé d'utiliser plusieurs feuilles de style distinctes dans différents documents., à la fois pour pouvoir réutiliser des fonctionnalités spécifiques sans avoir à toutes les charger à chaque fois, et pour éditer le code plus facilement en le répartissant dans différents documents selon la structure logique correspondante.

Les styles CSS Ils tentent de décrire tous les extrêmes du comportement et de l'apparence d'une page Web à partir de plusieurs types d'approches, toutes valables simultanément, tout en essayant de respecter autant que possible la compatibilité avec les spécifications des versions précédentes. Cela signifie qu’il existe de nombreuses solutions possibles qui répondent aux mêmes besoins. ainsi qu'un nombre élevé de ressources disponibles (propriétés CSS). En raison de l'approche didactique de l'article et afin de ne pas dérouter les nouveaux utilisateurs CSS, seules les propriétés et les structures nécessaires à l’objectif final, qui consiste à représenter graphiquement les données des capteurs connectés à l’Internet des objets. En même temps, il existe également un petite introduction à CSS, feuilles de style en cascade.

Formatage des propriétés CSS

El format de base Il se compose d'un nom de propriété, du signe deux-points, de la valeur de la propriété et du signe point-virgule. nombre:valor;

CSS vous permet d'utiliser différentes unités de mesure dans le même document y compris ceux liés à la structure (la mesure de ce que contient un élément) en pourcentage, par rapport à l'appareil sur lequel ils sont représentés, comme le pixel, ou absolus comme les centimètres. Les unités sont exprimées après la valeur selon le codage des abréviations suivant.

Pour l’application que nous allons réaliser, il est important de considérer au moins trois unités de style. Le % pour prendre des mesures par rapport à la taille du contenant d'un article, le pixel pour les mesures en fonction de la résolution de l'écran et les millimètres (en fait, toute mesure absolue) pour faire des rapports imprimés.

Il ya une certaine propriétés complexes, ou composite, qui dépendent de plusieurs valeurs (comme la couleur, la taille, le style...), pour indiquer la valeur il y a deux possibilités en CSS : écrire, dans l'ordre approprié, tous les valeurs séparées par des espaces ou utiliser la somme de propriétés simples équivalentes au complexe. Par exemple, les quatre marges d'un objet peuvent être spécifiées dans une seule propriété margin ou peut être défini avec des propriétés margin-top, margin-right, margin-bottom y margin-left. D'ailleurs, cet ordre (dans le sens des aiguilles d'une montre) est celui suivi par les descriptions des valeurs qui "entourent" un élément comme la marge intérieure (padding) ou extérieure, la bordure...

Avec ce qui a été expliqué jusqu'à présent, nous pouvons maintenant voir quelques exemples de propriétés

Dans l'exemple ci-dessus La couleur est définie à l'aide d'un code de 6 chiffres hexadécimaux qui représentent, par paires, la valeur de la composante rouge, verte et bleue.. Lorsqu'il arrive, comme dans l'exemple, que les deux chiffres sont égaux, cela peut être abrégé en #F09 (ce qui correspond d'ailleurs aux soi-disant "couleurs Web sécurisées"). Dans la proposition finale j'éviterai d'utiliser ces abréviations pour unifier les critères et le rendre plus lisible. Vous pouvez également abréger les valeurs de propriétés complexes, telles que margin dans l'exemple, lorsque toutes les valeurs ou paires opposées sont répétées. Dans le même esprit de sauvegarde du texte, il est également possible d'omettre l'unité lors de la spécification d'une propriété lorsque la valeur est zéro, car elle n'est pas pertinente dans ce cas.

Certaines valeurs, en plus de pouvoir être exprimées numériquement, ont un nom ce qui rend le code plus lisible et permet de mieux les mémoriser. Par exemple, au lieu du code numérique hexadécimal de la cible, #FFFFFF (o #FFF), peut s'écrire white avec le même résultat. De cette façon, la couleur noire, #000000 (o #000), peut être remplacé par black.

Aussi là les valeurs sont exprimées par un code spécial, un nom. Par exemple, pour indiquer que la marge latérale est définie automatiquement par le navigateur (normalement elle correspondra à la fonction centrale), la valeur spéciale est utilisée auto, qui n'a aucune correspondance numérique avec aucune valeur.

Pour exprimer une manière particulière d'utiliser une série de valeurs composites (complexes) d'une propriété CSS Vous pouvez choisir des formats avec une syntaxe similaire à celle des fonctions. Par exemple, pour exprimer une couleur comme les trois valeurs de ses composantes rouge, verte et bleue (la Modèle RVB) s'écrirait color: rgb(128, 255, 64);. Dans ce style d'expression, il est également possible d'utiliser des unités ; Dans l'exemple ci-dessus, les composantes de couleur sont une valeur décimale de 0 à 255, mais il peut être plus facile de l'exprimer en pourcentage du total de chaque composante de couleur, auquel cas cela pourrait également s'écrire sous la forme color: rgb(50%, 100%, 25%);.

Calculer des valeurs en CSS

Dans les versions les plus récentes de CSS il est possible de faire opérations mathématiques simples pour calculer des valeurs. Pour ce faire, utilisez calc et l'opération à effectuer est exprimée entre parenthèses. Vous pouvez indiquer des unités, des parenthèses et des opérateurs simples tels que somme (+), soustraction (-), multiplications (*) et division (/). L'expression serait du type width:calc((90%-20px)/2));.

Les variables peuvent être utilisées dans des opérations mathématiques dans CSS se référant dans le calcul d'une propriété à la valeur d'une autre avec var. Afin de pouvoir utiliser une variable sans avoir besoin de faire référence à une propriété réelle du style, il est également permis de citer une propriété qui n'existe pas. CSS recommande le format --nombre-variable (deux tirets devant le nom de la propriété inventée). De cette façon, pour définir la hauteur d'un élément comme la moitié de sa largeur, une expression dans CSS comme height:calc(var(width)/2); et pour définir une nouvelle variable "épaisseur" (que d'autres propriétés pourraient utiliser) vous écririez, par exemple, --grosor:4px; pour pouvoir plus tard l'appeler margin-top:calc(var(--grosor)*4);

Propriétés CSS dépendantes du navigateur

CSS Il s'agit d'une spécification normalisée par le consortium W3C (World Wide Web Consortium) mais beaucoup les propriétés ou les styles de comportement atteignent les navigateurs avant de faire partie de la spécification d'une version.

pour que le code CSS fonctionne avec les fonctionnalités actuelles d'un navigateur, mais ne perdez pas la compatibilité avec les nouvelles fonctionnalités, un préfixe est utilisé. Ce préfixe dépend du moteur de rendu qui utilise le navigateur Web que vous souhaitez référencer (pour lequel le style est défini).

Le préfixe -webkit Cela fonctionne pour les navigateurs basés sur WebKit comme Safari o Chrome. Le préfixe -moz Il est utilisé pour les navigateurs basés sur le moteur de rendu de Mozilla, actuellement GeckoComme Firefox et ses dérivés. Se référer à EdgeHTML, l' moteur de rendu navigateur Edge de Microsoft (anciennement Trident), le préfixe est utilisé -ms. Le cas du navigateur Opera est un peu spécial depuis qu'il a commencé à utiliser le sien moteur de rendu, désigné par -o, mais fonctionne actuellement avec WebKit, qui s'exprime sous la forme -webkit.

Pour utiliser une propriété faisant référence à un navigateur, écrivez son nom en le préfixant et en le séparant par un trait d'union comme dans -o-border-radius:10px;, qui servirait à définir une bordure arrondie (un coin arrondi) dans les anciennes versions du navigateur Opera.

Commentaires

Pour clarifier le code CSS Vous pouvez utiliser des commentaires, ce qui le rendra plus lisible mais avec l'inconvénient d'augmenter sa taille. La syntaxe des commentaires dans CSS C'est comme des commentaires multilignes C + + ce que vous savez sûrement déjà : à partir de /* et se terminant par */, Comme dans C + +, peut occuper plusieurs lignes.

Sélecteurs

La définition de les propriétés sont attribuées aux objets dans un document HTML les regrouper dans des sélecteurs et en les plaçant entre accolades. Un sélecteur peut référencer un élément de langage HTML (une étiquette), comme div, une classe (attribuée à class en HTML) un identifiant (attribué avec id en HTML) ou tout (le « sélecteur universel ») représenté par l'astérisque (*). L'exemple suivant montre un sélecteur de chaque type :

Les étiquettes de HTML sont exprimées dans la définition de style avec leur nom, les classes sont marquées en mettant un point avant le nom (.) et un signe dièse (#) pour les identifiants.

Une partie du grand pouvoir de CSS réside dans le possibilité de regrouper les sélecteurs lors de la définition de leurs propriétés. Il existe plusieurs façons de regrouper les sélecteurs. En les regroupant, en les séparant par des virgules, on exprime que chacun des sélecteurs cités possède ces propriétés.

L'exemple précédent indique que les classes de consommation, d'humidité et de température partagent la couleur, la largeur et la hauteur. Un nouveau concept est également introduit dans ce code : les propriétés peuvent être redéfinies, et dans ce cas les plus récemment décrites prévalent. De cette manière, les éléments de la classe de température auraient finalement une hauteur de 50 % de l'objet qui les contient.

Si les sélecteurs regroupés ne sont pas séparés par des virgules, la condition imposée aux propriétés est cumulative, c'est-à-dire qu'un élément doit satisfaire tous les sélecteurs pour qu'il acquière l'apparence ou le comportement qu'ils définissent. Si les sélecteurs font référence à des balises HTML L'ordre dans lequel ils apparaissent doit être décroissant dans le niveau d'inclusion : d'abord le niveau hiérarchique le plus élevé et enfin le niveau le plus bas.

Dans l'exemple précédent les éléments sont définis div qui sont également de la classe de température et les éléments qui ont à la fois la classe de température et la classe de consommation (les deux en même temps) comme dans class="temperatura consumo". Les éléments <div> De code HTML avec class="temperatura" ils auraient un maximum de 100%

Propriétés CSS pour définir le texte

Une distinction peut être faite entre trois types de propriétés qui affectent l'apparence du texte : (1) celles qui déterminent la police avec laquelle il est présenté, (2) celles qui déterminent l'apparence du littéral (le contenu du texte). et (3) les génériques, c'est-à-dire ceux qui affectent à la fois l'apparence du texte et celle des autres composants. En général, ce qui a été dit pour expliquer ceux du dernier groupe s'appliquera également aux mêmes propriétés appliquées aux autres éléments.

Typographie (police)

• font-family indique le nom de la police utilisée pour un élément. Vous pouvez écrire un seul nom ou une liste, par ordre de préférence et en séparant les noms par des virgules, des polices qui seront utilisées alternativement si celle souhaitée n'existe pas. Dans le même esprit, il est possible d'utiliser des polices génériques avec les noms monospace, serif, sans-serif, cursive, fantasy. Parmi ces polices génériques, la plus importante (pour la présentation des données disponibles) est la première qui, comme son nom l'indique, utilisera la police à espacement fixe disponible dans le système et prédéfinie par le navigateur. La deuxième, serif, il utilisera celui par défaut disponible serif (finition ou grâce). Sans enchères si le tiers est indiqué, sans-serif. Imiter l'écriture dessinée à la main avec cursive (une façon de l'appeler qui pourrait clairement être améliorée) et la typographie décorative du système avec fantasy, le dernier des cinq.

  Quant au code CSS Les espaces ont une signification particulière en tant que séparateur ; lorsque le nom de la famille de polices est composé de plusieurs mots séparés par des espaces, il est écrit entre guillemets pour éviter toute confusion.

  CSS font-tamily ejemplo de uso

  CSS

  <br /> font-family: DejaVu, Helvetica, Arial, “a palo seco”, sans-serif;

  1	font-family: DejaVu, Helvetica, Arial, “a palo seco”, sans-serif;

  Les navigateurs Web sont capables d'utiliser des polices locales (celles installées sur le système sur lequel ils fonctionnent) ainsi que d'autres spécifiquement chargées, chevauchant même celles installées localement. Pour charger une police, utilisez @font-face indiquant son nom, l'emplacement de téléchargement de sa définition et, le cas échéant, une description de son format.

  CSS Ejemplo de descarga de la definición de una tipografía con @font-face

  CSS

  <br /> @font-face<br /> {<br /> font-family:”SircuitoExpandedLight”;<br /> src: url(‘/EOT/Sircuito-Expanded-Light.eot’);<br /> }</p> <p>@font-face<br /> {<br /> font-family:”SircuitoRegularMedium”;<br /> src: url(‘tipos/Sircuito-Regular-Medium.eot’);<br /> src: url(‘tipos/Sircuito-Regular-Medium.eot?iefix’) format(‘eot’),<br /> url(‘tipografia/Sircuito-Regular-Medium.woff’) format(‘woff’),<br /> url(‘tipografia/Sircuito-Regular-Medium.ttf’) format(‘truetype’),<br /> url(‘tipografia/Sircuito-Regular-Medium.svg#webfont’) format(‘svg’);<br /> -webkit-font-smoothing:antialiased;<br /> }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

  @font-face { font-family:“SircuitoExpandedLight”; src: url(‘/EOT/Sircuito-Expanded-Light.eot’); }   @font-face { font-family:“SircuitoRegularMedium”; src: url(‘tipos/Sircuito-Regular-Medium.eot’); src: url(‘tipos/Sircuito-Regular-Medium.eot?iefix’) format(‘eot’), url(‘tipografia/Sircuito-Regular-Medium.woff’) format(‘woff’), url(‘tipografia/Sircuito-Regular-Medium.ttf’) format(‘truetype’), url(‘tipografia/Sircuito-Regular-Medium.svg#webfont’) format(‘svg’); -webkit-font-smoothing:antialiased; }

  Dans la première des deux définitions de l'exemple précédent, la lettre du document est chargée Sircuito-Expanded-Light.eot qui se trouve dans le dossier EOT à l'intérieur du dossier principal (racine) et est attribué comme nom de famille CircuitÉlargiLumière. Au fait, aimez-vous cette police ? C'est gratuit, vous pouvez téléchargez gratuitement la police Sircuito que j'ai conçue pour l'image GranaBot.

  Comme on peut le voir dans l'exemple, la propriété url, qui correspond au localisateur de ressources uniforme, permet de préciser l'emplacement du document avec la police téléchargée. La barre oblique permet de séparer le nom des différents dossiers du chemin d'accès à la police, en commençant par celui contenant le document depuis lequel l'appel est effectué ou depuis la racine si le URL Commencez par un bar.

  Le deuxième exemple utilise plusieurs documents alternatifs pour qu'une même définition fonctionne pour plusieurs navigateurs (chacun chargera le type qu'il est capable d'interpréter)

  La dernière ligne de la définition inclut la propriété font-smoothing pour adoucir la lettre (appliquer un anti crénelage). Comme il ne s'agit pas d'une propriété standard, le préfixe est utilisé -webkit.

• font-size sert à indiquer la taille de la lettre comme dans font-size:12px;

• font-weight Définit l'épaisseur de la police. Elle peut être exprimée sous forme d'une valeur numérique, généralement un multiple de 100 compris entre 100 et 900, selon les poids typographiques usuels, ou plus fréquemment par un nom : normal pour l'épaisseur de la base, bold pour les plus audacieux, bolder pour la version habituellement appelée noire, light pour l'amende (communément appelée légère) et lighter pour les plus fins (parfois appelés minces).

  La valeur numérique de la version normale de la police est de 400 (sans unité) et de 700 pour la version grasse.

  Par défaut, si aucune autre valeur n'est indiquée, l'apparence de la police est celle qui correspond à normal ou 400 donc, s'il n'a pas été modifié dans l'élément générique ou dans le conteneur dont il hérite, il n'est pas nécessaire d'indiquer font-weight avec le courage normal.

• font-stretch Il sert à indiquer la largeur de la lettre, à condition qu'elle soit disponible dans la famille correspondante. Les valeurs possibles que peut prendre la propriété, classées de la plus étroite à la plus large, sont : ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded y ultra-expanded. Avec les mêmes critères que ceux utilisés dans la propriété précédente, la largeur par défaut est normal et il n'est pas nécessaire de l'indiquer expressément à moins qu'il n'ait été modifié dans un ordre hiérarchique supérieur à celui défini.

• Avec font-style Vous pouvez indiquer si un texte est dessiné avec une lettre inclinée ou oblique, ce qui affecte son apparence, ou avec une lettre cursive, qui exprime une signification particulière (des mots étrangers, par exemple), ou avec une lettre ronde, c'est-à-dire ni les précédentes. ou normale. la valeur oblique remplit la première fonction, celle d’apparence et de valeur italic le deuxième. Le fait que l’apparence des deux soit souvent similaire, voire identique, signifie que l’utilisation (la signification) est parfois confuse, il convient donc d’y prêter attention. Comme pour les autres propriétés, normal sert à désactiver les valeurs précédentes.

• text-decoration sert à souligner (avec la valeur underline), surligné (avec la valeur overline), barré (avec la valeur line-through) ou flash (avec la valeur blink) le texte affecté par cette propriété.

• Pour compléter la série de l'aspect typographie, bien que pour notre application ce ne soit pas très pertinent, font-variant, vous permet de postuler lettres minuscules (petites lettres majuscules) aux textes.

Texte

• text-align indique au navigateur comment le bloc de texte doit être aligné. Les alignements possibles sont à gauche (ce qui est considéré par défaut) avec le code left, centre avec la valeur center, c'est vrai en utilisant right et justifié aux deux extrémités par justify.

• line-height définit la séparation entre les lignes de texte. Dans ce cas, si des pourcentages sont utilisés, la valeur de 100 % correspond à la hauteur du texte au lieu de la mesure du contenant. La mesure la plus utilisée par rapport au texte correspond à 120%. Une ligne à 100 % signifierait que le bas d’une ligne touche le haut de la suivante. Bien que la conception typographique comprenne généralement un peu d’espace, il est courant de laisser un peu plus de marge entre les lignes.

  Pour exprimer la séparation entre les lignes, il est également possible d'indiquer un coefficient (une valeur sans unité) avec lequel calculer la hauteur de la ligne en fonction de la hauteur de la zone de texte.

• letter-spacing est la valeur de l'espace entre les lettres des mots, appelé en typographie crénage o désinfection.

• word-spacing représente la mesure des espaces entre les mots.

• white-space définit le comportement des espaces blancs dans un texte. Quand la valeur est utilisée normal, qui est pris par défaut, joint plusieurs espaces vides dans le code HTML dans l'une des présentations de la page Web (affichée par le navigateur) et prend les espaces blancs comme référence pour couper une ligne s'il n'y a pas d'espace dans le bloc.

  La valeur nowrap Il joint également les espaces vides répétés en un seul, mais ne divise pas les lignes de texte dans les espaces vides même si la ligne ne rentre pas dans le conteneur, déborde de l'espace si nécessaire et écrit à l'extérieur si nécessaire. Pour diviser expressément les lignes, vous pouvez utiliser l'étiquette <br> de HTML.

  En utilisant pre Les espaces vides ne sont pas non plus unifiés en les réunissant en un seul, ni les lignes divisées en utilisant les espaces comme référence.

  pre-line joignez les blancs répétés et coupez les lignes si nécessaire en utilisant les blancs comme référence.

  pre-wrap préserve les espaces répétés et coupe les lignes si nécessaire en utilisant les espaces comme référence.

Couleur

En CSS la couleur peut être exprimée selon Modèle de couleur RVB ou selon Modèle de couleur HSL et dans les deux cas on peut inclure des informations de transparence, la valeur d'un quatrième canal que l'on appelle habituellement canal alpha o composition alpha, ce qui donne naissance aux modèles RGBA et HSLA.

Pour exprimer la couleur dans un format RGB en utilisant la notation hexadécimale, la syntaxe est utilisée #RRGGBB, avec RR étant la valeur de la composante rouge (en principe, à l'aide de deux chiffres hexadécimaux), GG étant la valeur de la composante verte et BB étant la valeur de la composante bleue. Comme déjà dit, si les deux chiffres de chaque composant ont la même valeur, cela peut être exprimé comme suit : #RGB limiter le nombre de couleurs disponibles aux couleurs dites Web sécurisées

En plus de cette manière de représenter la couleur, la plus classique et la plus utilisée, elle peut s'exprimer comme rgb(R,G,B), hsl(HSL), rgba(R,G,B,A) y hsla(HSLA) de l'indiquer sous la forme RGB, HSL et leurs formes respectives avec indication de transparence (canal alpha)

Sauf demande contraire en ajoutant le suffixe d'unité, le Modèle RVB utilise des valeurs décimales de 0 à 255, pour les trois composantes, la valeur du composant alpha est un coefficient (décimal de zéro à un) et la première valeur du Modèle de couleur HSL, la teinte, est une valeur décimale comprise entre 0 et 360 (sans unités) représentant un angle. Les valeurs de saturation et de luminosité du Modèle HSL Ils sont généralement exprimés en pourcentages.

Comme cela a déjà été dit, bien que leur utilisation ne soit pas très fréquente, les couleurs peuvent être indiquées par leur nom au format color:black; au lieu de color:#000000;. Le premier format est plus lisible mais se limite à un bref tableau de valeurs également plus difficile à modifier numériquement à partir d'une application écrite en JavaScript.

Pour notre proposition de représentation graphique des données des capteurs connectés à l’IoT, nous n’aurons besoin que de trois propriétés liées à la couleur. Ils serviront à la fois à indiquer le nom du texte, qui est maintenant expliqué, et à indiquer le nom de tout composant qui le supporte.

• color indique la couleur de l'élément HTML et celui de ce qu'il contient (qui en hérite) à moins qu'il ne soit expressément modifié en attribuant individuellement d'autres couleurs.

• background-color Utilisé pour définir la couleur de fond d'un élément HTML. En plus d'indiquer la couleur comme valeur RGB o HSL vous pouvez utiliser une valeur spéciale transparent pour que l'objet n'ait pas de couleur de fond et qu'il soit possible de voir ce qui se trouve derrière lui, c'est-à-dire qu'il ne recouvre pas les éléments sur lesquels il a été dessiné.

• opacity permet de définir l'opacité (indirectement, la transparence) d'un élément et de tout son contenu (à ne pas confondre avec la transparence du fond). Si la transparence est attribuée à des éléments contenus dans d'autres qui sont eux-mêmes transparents, celle-ci sera augmentée, cela ne fonctionnera pas séparément. Vous ne pouvez pas rendre plus opaque un objet contenu dans un objet transparent. La valeur de opacity Il s'exprime sous la forme d'un coefficient comme opacity:0.5; pour indiquer une opacité de 50 %.

  Les anciennes versions du navigateur de Microsoft n'utilisaient pas cette propriété, mais possédaient la propriété filter (filtre) qui, entre autres valeurs, pourrait prendre en charge alpha (pour le canal alpha) auquel un pourcentage d'opacité pourrait être attribué avec opacity selon le format :

  CSS para dar opacidad en los antiguos navegadores web de Microsoft

  CSS

  <br /> filter:alpha(opacity=50); /* Opacidad del 50% en una versión 8.0 o anterior de Microsoft Internet Explorer */

  1	filter:alpha(opacity=50); /* Opacidad del 50% en una versión 8.0 o anterior de Microsoft Internet Explorer */

Guide des tailles :

En CSS, la mesure des éléments <div>, que nous avons choisi pour composer le conteneur graphique, est défini avec width (largeur) et height (haut).

entre le contenu de <div> et sur son périmètre il y a une zone de remplissage qui est déterminée avec la valeur de padding. Autour du périmètre de l'objet se trouve le bord dont la mesure est spécifiée avec la propriété border. Séparer l'extérieur de l'objet <div> des autres objets environnants, il existe un espace dont la mesure est déterminée par margin.

Dans des conditions normales, la mesure de l'espace utilisé par l'objet <div> peut être calculé comme la somme de sa largeur ou de sa hauteur plus le rembourrage (padding) plus bordure (border) plus marge (margin). Lorsque la mesure pertinente établie est l'espace intérieur utile de l'objet <div>, cette composition est très pratique, mais si l'on connaît la mesure totale disponible ce comportement peut-il être modifié, défini par défaut, de sorte que la mesure totale de la largeur et de la hauteur soit celle indiquée par width (largeur) et height (hauteur) en soustrayant la mesure du remplissage, de la bordure et de la marge, au lieu de les ajouter. Pour utiliser ce mode, attribuez le propriété box-sizing la valeur border-box (la valeur par défaut est content-box)

Le diagramme suivant montre graphiquement les valeurs résultant de width (largeur) et height (élevé) si vous utilisez box-sizing:border-box; (le total) oubox-sizing:content-box; (l'intérieur)

Les valeurs des mesures sont exprimées avec les unités déjà expliquées. Lorsqu'il s'agit de propriétés définies par plusieurs valeurs, les chiffres exprimés avec différents types de moyennes peuvent être mélangés. De plus, il existe certaines valeurs particulières qui sont pertinentes pour l'utilisation que nous allons faire dans cette implémentation de graphiques de capteurs dans l'IoT. Plus précisément, nous pouvons utiliser la valeur auto sur la propriété margin comme ressource pour centrer les objets dans certaines circonstances.

Dans l'exemple ci-dessus, pour la classe « small_box » une bordure de 2 pixels d'épaisseur est définie, dessinée avec un trait noir (#000000) continu (solid). Dans la classe « big_box » la ligne utilisée pour la bordure est en pointillés (dashed) et la couleur rouge (#FF0000). Pour exprimer ces valeurs séparément, nous pouvons utiliser border-width pour l'épaisseur, border-style pour l'AVC et border-color pour la couleur. Ces propriétés de bord sont à leur tour composites et sont formées par les entités supérieure, droite, inférieure et gauche, en suivant le sens des aiguilles d'une montre comme expliqué ci-dessus.

Les deux classes définies ont les mêmes mesures, mais la première est plus petite car, en utilisant la valeur border-box pour la propriété box-sizing, le remplissage, la bordure et la marge sont dessinés à l'intérieur de l'objet plutôt qu'autour du contenu, comme c'est le cas par défaut. Dans la classe "big_box" ce n'est pas indiqué, donc la valeur est prise par défaut content-box ce qui provoque l'augmentation du remplissage, de la bordure et de la marge jusqu'à la taille indiquée par width y height.

La valeur de la marge de classe dans l'exemple ci-dessus est de 10 pixels en haut, à droite, en bas et à gauche, elle pourrait donc être exprimée sous la forme d'une valeur unique. margin:10px;. Il est très intéressant de connaître cette alternative pour comprendre le code développé par des tiers même si, dans cette proposition d'implémentation, pour le rendre plus lisible, il est proposé d'indiquer, répétées, les valeurs.

Les trois classes de l'exemple précédent produisent le même résultat, la définition du dit « laconique » étant plus compacte et moins celle du dit « bavard » qui, plus que pour ajouter de la clarté à la lecture, est la forme normalement utilisé pour modifier un aspect partiel et concret d'une propriété, en réutilisant les autres valeurs par héritage (elles sont fournies par le conteneur ou fournies par l'une des classes affectées à l'élément). Si la charge imposée au serveur par le texte supplémentaire de cette façon de définir les propriétés et d'autres circonstances qui, pour rendre le code plus lisible, comme les commentaires, augmentent la taille et donc le trafic, étaient pertinentes, il serait possible de traitez-le (par exemple) à partir de PHP dans le cadre de la stratégie de génération de code à partir de ce langage.

Les dimensions du modèle de boîte affectent principalement les éléments <div> mais il est possible d'imposer ce comportement à d'autres éléments avec la propriété display et la valeur block. Pour faire circuler un élément comme du texte sur une ligne, utilisez display:inline; et les deux comportements, mesures et flux, peuvent être combinés avec display:inline-block;

La valeur none sur la propriété display, utilisé comme display:none;, permet également de masquer des objets, qui serviront à les "allumer" et à les "éteindre" de JavaScript.

Si les dimensions d'un élément ne sont pas spécifiées, il prend toutes les dimensions nécessaires pour adapter son contenu (en fait, il s'adapte au contenu sans avoir besoin d'établir une dimension). Mais si les dimensions sont indiquées, il peut arriver que les objets contenus ne rentrent pas ; dans un tel cas, les dimensions ne sont pas respectées, elles sont augmentées pour permettre de voir tout le contenu.

Pour que les éléments contenus dans une autre de mesures fixes soient rognés lorsqu'ils dépassent la taille, on utilise la propriété overflow avec le courage hidden. avec la valeur scroll, les objets qui débordent du conteneur sont également découpés, comme cela se produit avec hidden mais une barre de défilement s'affiche et peut être vue lors de son déplacement. La valeur auto fait apparaître la barre de défilement uniquement lorsque cela est nécessaire en fonction de la taille du contenu.

Vous pouvez également établir une taille minimale pour que les conteneurs occupent cet espace même si le contenu n'en a pas besoin et sans limiter leurs dimensions pour augmenter lorsque le contenu l'exige. Les propriétés en charge de cette tâche sont min-width pour l'acho et min-height pour le grand. Dans le sens inverse, max-width définir une largeur maximale et max-height une hauteur maximale qui annule width ya height.

Flux d'éléments sur la page Web

Les rectangles (blocs) que nous avons définis avec des éléments <div>, ils sont placés l'un sous l'autre par défaut. Pour modifier ce comportement, vous pouvez utiliser la propriété float, indiquant left o right comme valeur, de sorte qu'ils s'écoulent respectivement de gauche à droite ou de droite à gauche. Au contraire, pour éviter qu'un objet « flotte » à droite ou à gauche d'un autre, vous pouvez utiliser la propriété clear avec les valeurs left, right o both, qui remplacent le flux de gauche à droite, de droite à gauche ou les deux.

Contrairement à ce qui se passe dans d'autres circonstances, le flux produit float ne modifie pas automatiquement les dimensions du conteneur, il est donc utile d'inclure dans ses propriétés overflow:auto; pour forcer la taille (hauteur) du conteneur à changer lorsqu'un objet le déborde en raison de son emplacement avec float.

Une autre façon de configurer le flux du contenu d'un élément consiste à le diviser en colonnes avec la propriété column-count (qui pour le moment devrait être accompagné de -webkit-column-count et de -moz-column-count) La taille des colonnes peut être indiquée (en fait suggérée) avec column-width (-webkit-column-width -moz-column-width) et la séparation entre les colonnes avec column-gap (-webkit-column-gap -moz-column-gap)

Pour que les blocs ne soient pas divisés et que leur contenu soit réparti sur plusieurs colonnes, vous pouvez utiliser display:inline-block; bien que cela l’implique sûrement. laisser une partie de la colonne inutilisée.

Placement

Pour établir l'emplacement des éléments sur la page web, CSS utilise plusieurs modes de positionnement qui peuvent être différents pour chaque élément, c'est-à-dire qu'il est possible de mélanger différents critères de positionnement sur un même site web.

• position:static; C'est le positionnement par défaut (il n'est pas nécessaire de l'indiquer s'il n'a pas été modifié au préalable). Ce type de positionnement suit le déroulement "naturel" de la page : un élément après l'autre en partant de la gauche, en grandissant, tant que il y a de l'espace, à droite et de haut en bas. Il n'utilise pas de coordonnées horizontales ou verticales pour établir sa localisation, il suit la position qui correspond à l'ordre de l'objet.

• position:fixed; Il permet de placer un objet à une position fixe dans la fenêtre du navigateur (comme un menu par exemple). L'emplacement de l'élément est précisé horizontalement avec left o right pour déterminer la séparation respectivement à gauche ou à droite et avec top o bottom pour la séparation au-dessus ou en dessous du bord de la fenêtre du navigateur (fenêtre).

  En utilisant ce type de positionnement et d’autres, les objets peuvent se chevaucher. Objets dessinés en premier (définis plus tôt dans le code HTML) peuvent être couverts par ceux tirés ultérieurement (ceux inclus ultérieurement dans le code HTML). Pour modifier l'ordre normal, vous pouvez utiliser la propriété z-index, les objets ayant la valeur la plus élevée dans z-index Ils couvrent ceux qui ont moins de valeur.

• position:relative; Déplace l'élément de sa position "normale" comme indiqué par les propriétés left o right horizontalement et top o bottom verticalement.

• position:absolute; Place l'élément dans une position fixe par rapport à l'objet qui le contient. Sa localisation s'exprime, comme dans les cas précédents, par left,right, top y bottom

  Le nom de ce type de positionnement prête à confusion au début, puisque la position est établie par rapport à l'objet hiérarchiquement supérieur à celui qui utilise la propriété, dont on peut se demander si elle est absolue.

  Il est également important de rappeler que l'élément qui contient les objets <div> que nous utilisons au premier niveau hiérarchique est <body>, donc, si le <div> Qu'est ce que tu utilises position:absolute; n'est pas contenu dans un autre, son positionnement sera "absolu" par rapport à la page web.

Propriétés pour des médias et caractéristiques spécifiques (requêtes multimédias)

CSS permet de définir dans une même feuille de style différentes apparences pour différents supports ou supports selon le type de périphérique utilisé (comme un écran, ou une imprimante), ses dimensions, son orientation (verticale ou paysage) ou encore sa résolution. Cela sert à pouvoir afficher, de la manière la plus appropriée pour un contexte, la même page Web.

Pour faire référence aux médias, utilisez @media de la même manière que ce qui a déjà été expliqué pour les polices avec @font-face, entouré d'accolades ({ y }) les définitions des différents éléments : labels HTML, classes, identifiants...

Les types de médias disponibles dans CSS3 sont: all, pour désigner n'importe quel média (tous), screen pour tout type d'écran (anciennes versions de CSS Ils ont fait la distinction entre les écrans de télévision et d'ordinateur) print pour la sortie de l'imprimante et speech pour les lecteurs Web audio qui interprètent les informations avec des synthétiseurs vocaux.

Dans l'exemple ci-dessus, les éléments de la classe text ont un fond noir et du texte blanc à l'écran mais sont imprimés avec un fond blanc et du texte noir.

Des conditions peuvent être imposées aux médias pour définir différents ensembles de propriétés en fonction, par exemple, de la résolution disponible ou du rapport de fenêtre. Ces conditions et les moyens eux-mêmes peuvent être composés d'opérations logiques and, not y only pour exiger que vous vous conformiez à plusieurs, que vous ne vous conformiez pas ou seulement lorsque vous vous conformez, respectivement.

Parmi les conditions disponibles, nous les trouvons particulièrement intéressantes max-width (largeur maximale de la fenêtre), max-height (hauteur maximale de la fenêtre), min-width (largeur minimale de la fenêtre), min-height (hauteur minimale de la fenêtre), orientation (l'orientation, qui peut être landscape, paysage ou portrait, verticale), max-resolution (résolution maximale en dpi, points par pouce ou en dpcm, points par centimètre) et min-resolution (résolution minimale, également en dpi o dpcm).

Dans l'exemple précédent, on commence par définir une couleur de fond pour que, dans tous les médias, les éléments de la classe main_block aient la couleur de fond #CCCCCC. Lorsqu'il est affiché sur un écran et que la fenêtre fait au moins 320 pixels de large, les marges gauche et droite seront automatiques (centrer le bloc) et la largeur de l'élément sera de 300 pixels. Si la résolution de l'écran est de 640 pixels, la largeur du bloc sera de 620 pixels. Étant donné que la deuxième définition de média n’inclut pas d’informations sur la marge et que les appareils qui remplissent la deuxième condition rempliront également la première, la marge horizontale sera toujours automatique.

Enfin, dans l'exemple, la couleur d'arrière-plan est modifiée pour qu'elle soit blanche sur l'impression.

La manière habituelle de définir les styles pour différents supports est généralement de commencer par les styles courants, généralement les couleurs et les polices, suivis des géométries les plus restrictives (les mesures des appareils avec le plus petit nombre de pixels) généralement pour les smartphones et les tablettes où, en plus Il sera important de savoir s'ils sont utilisés verticalement ou horizontalement avec orientation et sûrement aussi sa résolution avec min-resolution. Ensuite, les différentes tailles pour les écrans plus grands sont indiquées, et cela se termine généralement par les supports d'impression et vocaux, qui dans l'exemple des graphiques IoT ont été omis.

Utiliser @media Des conditions imposantes telles que les dimensions, la résolution et l'orientation permettent au concepteur de créer une seule page Web qui, avec différents styles, sera la plus appropriée pour chaque appareil. Ce comportement est généralement appelé conception réactive ; design adaptable, dans une traduction très libre.

CSS pour conteneur graphique SVG

Avec ce qui a été expliqué jusqu'à présent, il est désormais possible de définir les styles que le Conteneur HTML de graphiques SVG avec lequel représenter l’état des capteurs connectés à l’IoT. Dans le code suivant se trouve la proposition comprenant, commentée, la répartition en colonnes qui correspond à un plus grand nombre de graphiques que ceux qu'utilise la proposition de la série d'articles, afin qu'elle puisse être réutilisée dans d'autres cas.

Ci-dessous, vous pouvez voir à quoi ressembleraient ces styles. Code HTML du conteneur proposé pour les graphiques SVG de l'article précédent.

Le prochain article de cette série explique comment dessiner avec SVG Graphiques de données de l'état des capteurs connectés à l'Internet des objets (IoT).