Accueil » Développement » Apprendre CSS

Sommaire
  1. CSS c'est quoi ?
  2. A quoi sert CSS ?
  3. Commencer avec CSS
  4. Les commentaires CSS
  5. Règle CSS (ensemble de règles)
    1. Déclaration CSS
    2. Les raccourcis CSS
  6. L'héritage en CSS
  7. Modèle de boîte CSS
  8. Les principales propriétés CSS
  9. Règles @
  10. Les combinateurs CSS
  11. Pseudo-classes et pseudo-éléments CSS
  12. Les post-processeurs CSS : c'est quoi ?
  13. Les pré-processeurs CSS : c'est quoi ?
  14. BEM, c'est quoi ?
  15. DOM-CSS / CSSOM
  16. Outils CSS
  17. Ressources CSS

CSS c'est quoi ?

Le langage CSS (Cascading Style Sheets en anglais) est utilisé avant tout dans le but de définir l'aspect général d'un site internet, comme par exemple la couleur du fond de la page, d'un cadre... ou de la couleur du texte.

Autrement dit, la CSS (ou "feuille de style"), est un petit fichier dans lequel on trouve toutes les informations relatives à l'aspect visuel d'un site web. Celui-ci se présente avec l'extension .css contrairement à une page internet de base qui se termine avec l'extension .html ou .htm (dans le plus courant des cas). Il existe des extensions telles que : .php, .asp, .xml...

A quoi sert CSS ?

La structure (HTML) et la présentation (CSS) sont normalement construites séparément. On peut trouver la CSS directement sur la page HTML, mais également dans un fichier externe. A noter qu'il est possible d'utiliser du JavaScript en lieu et place du CSS. Mais aussi passer par JavaScript pour styler en CSS.

Depuis l'augmentation de l'utilisation des appareils mobiles, il est préférable de mettre le code directement dans votre document HTML (en haut de page entre les balises <head> </head>) plutôt que de faire appel à un fichier externe. Pourquoi ? Pour une question de rapidité du chargement d'une page.

CSS sert donc à décorer : les couleurs, le texte, les images, les formulaires... Mais il est surtout utile à la disposition d'éléments reposant sur un modèle de boîte (voir plus bas).

Les feuilles de style simplifient le code HTML, allégeant ainsi la structure et par conséquent améliorent la vitesse de chargement de la page. Voir à ce sujet le projet de Google.

Commencer avec CSS

Votre première action sera de trouver un logiciel d'édition de texte tels que Wordpad ("parfait" pour les débutants), Brackets ou encore Sublime Text.

Le mieux étant de vous forger votre propre opinion en essayant plusieurs logiciels et de travailler avec celui qui vous paraît le plus adapté.

Pour plus d'efficacité (ou pas), vous pouvez vous procurer des outils tels que les post-processeurs ou les pré-processeurs.

Les commentaires CSS

Comme pour tout langage de programmation (quoique CSS n'en est pas vraiment un, il s'agit plutôt d'un langage de feuille de style ou encore d'un langage déclaratif), il est possible d'ajouter des commentaires dans le code CSS.

Un commentaire ne s'affichera pas sur la page. Il sert avant tout à donner des indications soit au développeur du code afin qu'il puisse se repérer, soit à ses collègues qui travaillent sur le même projet ou encore pour empêcher les navigateurs d'interpréter une partie du code. Dans tous les cas, celui-ci doit être pertinent.

Les commentaires peuvent s'insérer à n'importe quel endroit de la feuille de style ou dans le cas d'un code en ligne entre les balises <style> et </style>. Un commentaire CSS s'écrit sur une ou plusieurs lignes comme dans l'exemple ci-dessous :


/*ceci est un commentaire CSS*/
.votre_class{propriete:valeur}

/*ceci est un second commentaire CSS 
on peut écrire sur plusieurs lignes*/
.votre_class{propriete:valeur}

Règle CSS

On désigne par règle (ou ensemble de règles) la structure CSS incluant :

  1. Le sélecteur : il peut s'agir d'un élément HTML, d'une class, d'un identifiant... qui va être mis en forme.
  2. La propriété: elle suit le sélecteur.
  3. La valeur : elle succède la propriété.

selecteur{propriete:valeur}

/*exemple concret*/

body{background:black}


Déclaration CSS

La propriété suivie de sa valeur entre des accolades s'appelle une déclaration. On peut ajouter au bloc de déclaration plusieurs paires propriétés/valeurs :


body{

background-color:black;
font-size:1rem;
color:white

}

Sachez qu'il est possible de regrouper vos sélecteurs pour leur appliquer les mêmes propriétes/valeurs :


h1,h2,h3{propriete:valeur}


Les raccourcis CSS

Les raccourcis permettent avant tout de gagner en place mais surtout en lisibilité. Elles peuvent concerner les couleurs, les dimensions, les marges et les espacements, les arrières-plan, les polices...



.exemple1{border:1px solid #000}

/*correspond à */

.exemple1
{
border-width:1px;
border-style:solid;
border-color:#000000;
}


.exemple2{

background:#fff url() no-repeat fixed

}

/*correspond à */
.exemple2
{
background-color:#ffffff;
background-image:url(image);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:0 0;
}

L'héritage en CSS

L'héritage fait partie intégrante du langage CSS. D'où la notion de cascade (Cascading Style Sheets). On parle aussi du modèle parent-enfant.

Ainsi, l'élément <html> est le parent de l'élément <body> ainsi que tous les enfants dans le reste du document. A noter que l'héritage ne fonctionne pas sur toutes les propriétés, notamment les propriétés de boîte. L'héritage sert avant tout à éviter les redondances.


html{font-size:12px}

Dans le code ci-dessus, on indique que tous les éléments du document auront une taille de police de 12 pixels, à moins de changer la taille pour un élément en particulier. Dans ce cas, la priorité et l'ordre ont leur importance.

En effet, lorsqu'on applique à un élément plusieurs fois une même propriété avec un valeur différente, le style prioritaire va être celui qui sera le plus proche de l'élément. Nous allons utiliser la propriété color comme exemple :


body{color:red}
p{color:blue}
article p{color:green}

Nous avons donc défini trois valeurs à la propriété color. La couleur prioritaire de l'élément <p> sera la dernière, à savoir green.

Voyons un autre exemple d'héritage avec un lien hypertexte :


a {
font-size:1rem;
text-decoration: underline;
color:blue;

}

a:hover{
text-decoration:none;
color:red;

}    

Ici la pseudo-classe :hover hérite des propriétés de la balise <a>.

Modèle de boîte CSS

Le langage CSS repose sur un modèle de boîte. En effet, un document HTML étant un ensemble d'éléments composé pour chacun d'une forme rectangulaire, CSS va donc permettre de définir la position ainsi que la taille de ces formes grâce à des propriétés définies.

Ainsi, pourra t-on définir la hauteur et la largeur, les marges, l'espacement, la bordure, les dépassements, le type, la disposition, la position...

Un exemple de base d'une boîte :


div{

width:50%;
max-height:150px;
overflow-y:auto;
border:.5rem solid blue;
padding:1rem;
margin:2rem auto;
background:red;
color:white
 
 }

Ceci vous montre le fonctionnement du modèle de boîte CSS. Ici on gère le type, la largeur, la hauteur, le dépassement, l'espacement, la marge, la bordure et l'arrière-plan.

Les principales propriétés CSS

Nous allons voir ici les principales propriétés CSS. Pourquoi pas toutes ? Cela serait inutile et fastidieux. En effet, il existe près de trois cent propriétés, et beaucoup ne sont jamais ou rarement utilisées.

On ne va pas se contenter de faire une liste de ces propriétés (sans intérêt) mais les présenter au travers d'exemples avec le code que vous pourrez reprendre et mettre en pratique.

Dans la mesure du possible, on évitera les termes trop abstraits. En un mot, nous allons faire dans la simplicité. Je vous déconseille d'apprendre par coeur toutes les propriétés, mais de les appréhender au fur et à mesure après avoir bien compris l'intérêt de chacune.

Voir les propriétés

Règles @

Une règle @ est une expression CSS. Chaque règle @ possède sa propre syntaxe.

  1. @charset : cette règle permet de définir le jeu de caractères utilisé dans une feuille de style. Surtout utile si l'on utilise des caractères qui ne sont pas codés en ASCII pour certaines propriétés CSS (avec par exemple la propriété content et les pseudo-éléments ::before et ::after).
  2. @import : cette règle permet d'importer une feuille de style externe. Très utile si l'on veut inclure des ressources pour un média en particulier.
  3. @namespace : cette règle va permettre d'appliquer CSS à des éléments xHTML. Ceux-ci vont devenir en quelque sorte des sélecteurs CSS. Voici un exemple :

@namespace svg "http://www.w3.org/2000/svg";		
svg|a { fill: blue }  /* le lien du svg sera de couleur bleue */
svg|path { fill: red} /* les chemins du svg auront la couleur rouge */				

Voici l'ordre dans lequel ces régles doivent être déclarées :



@charset "utf-8"; /*toujours en première position*/

@import "feuille_de_style.css";/*toujours après la règle ci-dessus*/


@namespace svg "http://www.w3.org/2000/svg";/*doit toujours se positionner après les deux règles ci-dessus*/


Il existe un sous-ensemble de règles (on parle alors de règles @ imbriquées). Contrairement aux règles @ citées ci-dessus qu'il faut insérer au début de la feuille de style, il est possible de les inclure à n'importe quel endroit (d'où le terme imbriqué).

@media : cette règle de groupe conditionnelle permet d'inclure des blocs d'instruction selon le type de média (écrans, impression papier ou encore synthétiseurs vocaux). Certains types ont été abandonnés (tv, projection, braille...), d'autres vont voir le jour dans le quatrième niveau du module des media queries avec son lot de caractéristiques.



/* on vise la version papier*/

@media print {
  body { font-size: 15pt }
}

/* on applique une requête pour les écrans en couleurs */
@media screen {
  body { font-size: 1rem }
}

/* on vise les écrans en couleurs ainsi que la version papier*/
@media screen, print {
  body { line-height: 1.2 }
}

/* ici on vise les médias dont la largeur est au minimum de 1004px */
@media (min-width:62.75rem){

body {
   font-size:1.25rem
 }
}

/* ici on vise les écrans en couleurs et dont la largeur est au minimum de 1004px */
@media screen and (min-width:62.75rem){

body {
  font-size:1.5rem
 }
}

@supports : cette règle de groupe conditionnelle permet de vérifier si un navigateur prend en charge une propriété CSS.



/*les navigateurs ne supportant pas cette propriété vont ignorer cette règle*/

@supports (display:grid) {

 div {display: grid}
 
}

/*on peut déclarer plusieurs valeurs*/

@supports (display: flex) and (filter:drop-shadow(0 0 5px #000)) {

...

}

/*on peut tester le support d’une propriété préfixée*/

@supports (background-clip:text) or (-webkit-background-clip:text) {

...

}

/*si les navigateurs ne supportent pas cette propriété alors ceux-ci vont appliquer l'autre règle*/

@supports not (display: flex) {

div {float: left}
  
}

@document : cette règle, qui fera partie du quatrième niveau, permet de spécifier des règles qui s'appliquent uniquement à certaines pages d'un document.



/* vise une page spécifique */

@document url(http://votre_site.com) {
   ...   
}

/* pour les pages commencant par cette url */
@document url-prefix(http://votre_site.com/dossier/) {
   ...   
}

/* toutes les pages appartenant au nom de domaine */
@document domain(votre_site.com) {
   ...
}

/*toute page commencant par https*/
@document regexp("https:.*") {
    
}

/* il est possible d'associer plusieurs règles */

@document url-prefix(..), domain(..) {

...

}

@page : cette règle permet de créer la mise en page d'un document qui doit être imprimé et/ou paginé.

@font-face : cette règle permet de charger une police personnalisée dans un document HTML.

@keyframes : cette règle permet de définir les différentes étapes, plus ou moins avec précision, qui constituent une animation CSS.

@viewport : cette règle (au stade de brouillon de travail) permet de définir des règles selon la zone d'affichage.

@counter-style : cette règle permet de définir des styles de compteur spécifiques qui ne font pas partie des styles prédéfinis.

Ci-dessous un exemple (support Firefox seulement) :

  • Un
  • Deux
  • Trois
  • Quatre
  • Cinq


@counter-style chiffre-romain {

system: additive;
range: 1 5;
additive-symbols: 5 V, 4 IV, 1 I;

}

/*on met le nom donné à la règle après la propriété*/
.exemple_count{

  list-style:chiffre-romain
  
}


@font-feature-values

Les combinateurs CSS (ou sélecteurs relationnels)

Comme son nom l'indique, le combinateur va permettre d'associer plusieurs sélecteurs afin d'appliquer une valeur spécifique sur un élément précis.

On distingue quatre types de combinateurs :

  1. descendant : représenté par un espace entre deux sélecteurs. Bientôt remplacé par deux chevrons dans le quatrième niveau de CSS.
  2. enfant : sépare deux sélecteurs. Ne sélectionne que les enfants directs du premier sélecteur.
  3. voisin direct : permet de sélectionner un élément immédiatement précédé par un autre élément.
  4. voisin général : Même fonction que le voisin direct mais sélectionne tous les éléments frères.

Exemple combinateur descendant :

Je suis un paragraphe à l'intérieur d'une div.

Je suis un autre paragraphe à l'intérieur d'une div, elle même faisant partie de la première div.



.exemple_combi p{color:red}


Exemple combinateur enfant :

Je suis un paragraphe à l'intérieur d'une div.

Je suis un autre paragraphe à l'intérieur d'une div, elle même faisant partie de la première div.



.exemple_combi > p{color:red}


Exemple combinateur direct :

Je suis un paragraphe.

Je suis un autre paragraphe.



p+p{color:red}


Exemple combinateur voisin général :

Je suis un titre

Je suis un paragraphe.

Je suis un paragraphe.

Je suis un paragraphe.



h1~p{color:red}


NB : Il existe de nombreux types de sélecteurs, entre autres, les pseudo-classes et pseudo-éléments que nous allons voir ci-dessous.

Pseudo-classes et pseudo-éléments CSS

Pseudo-classes

Une pseudo-classe est un mot-clé qui, ajouté à un sélecteur, va définir l'état d'un élément. Il existe plusieurs groupes de pseudo-classes :

  1. dynamiques
  2. cibles
  3. de langage
  4. de formulaires (ou UI pour User interface)
  5. de négation
  6. structurelles

Parmi les pseudo-classes dynamiques on distingue deux catégories.

Les pseudo-classes de liens :

  1. :link : cible un lien qui n'a pas encore été visité.
  2. :visited cible un lien ayant été visité.

Les pseudo-classes d'action utilisateur :

  1. :active cible un lien sur lequel on a cliqué.
  2. :hover cible un lien sur lequel on passe la souris.
  3. :focus cible un lien sur lequel on clique.

NB : il y a un ordre à respecter pour styler des liens. Plus d'infos dans cet article

Parmi les pseudo-classes cibles on distingue :

:target (CSS niveau 3) : cible un élément via une ancre. Exemple avec la pseudo-classe :target

On fait apparaître une div.

Parmi les pseudo-classes de langage on distingue :

:lang cible un élément dans une langue spécifique. Par exemple :



.class:lang(fr) {color: red;}


Parmi les pseudo-classes de formulaire on distingue (liste non exhaustive) :

  1. :enabled : cible un élément activé.
  2. :disabled : cible un élément désactivé.
  3. :checked : permet de cocher des éléments tels que des boutons radio (input radio), case à cocher (input checkbox) ou les options d'un select.
  4. :valid : permet de styler les éléments d'un formulaire pour indiquer que ceux-ci sont correctement remplis.
  5. :indeterminate : cible un élément dont l'état est indéterminé. NB : il n'existe pas d'attribut HTML correspondant.
  6. :invalid : permet de styler les éléments d'un formulaire pour indiquer que ceux-ci ne sont pas correctement remplis.
  7. :required : permet de rendre obligatoire le remplissage les éléments d'un formulaire. Permet également de ne pas pouvoir valider un formulaire si certains champs ne sont pas renseignés.
  8. :optional : comme son nom l'indique, vise les éléments comme étant optionnels et permet de les styler si l'attribut required n'est pas présent.
  9. :in-range : cible un élément lorsque la valeur se trouve dans les limites de l'intervalle autorisé pour l'élément.
  10. :out-of-range : cible un élément lorsque la valeur se trouve en dehors de l'intervalle autorisé pour l'élément.
  11. :placeholder-shown : équivalent CSS (niveau 4) de l'attribut HTML5 placeholder mais différent du pseudo-élément ::placeholder (voir plus bas). Permet de sélectionner un input lorsque l'attribut placeholder est rempli.

Parmi les pseudo-classes de négation on distingue :

:not() (CSS niveau 3) : cible un élément qui n'est pas égal au sélecteur renseigné entre parenthèses (on parle d'argument). Il est possible de renseigner comme argument n'importe quel sélecteur ainsi que des pseudo-classes mais pas de pseudo-éléments (cela n'aura aucun effet).

La pseudo-classe :not() n'agit pas sur le sélecteur (ou pseudo-classe) puisque justement celui-ci en est exclu.

Reprenons ce simple mais bon exemple tiré de cet article :

Ci-dessous, deux mêmes listes, dont l'une utilise la pseudo-classe :not(). Celle qui n'utilise pas la pseudo-classe, vous pouvez remarquer tout en bas un trait gris qui se superpose au trait entourant toute la liste.

  • avec :not
  • un
  • deux
  • trois
  • quatre
  • cinq
  • sans :not
  • un
  • deux
  • trois
  • quatre
  • cinq

Bien entendu, on pourrait supprimer ce trait en écrivant une nouvelle classe et encore en utilisant la pseudo-classe :last-child :



li.no_border{

border: none;
}

/* ou */ 

li:last-child {

  border: none;
  
}

C'est donc là où l'on peut voir l'intérêt de la pseudo-classe :not() :



ul li:not(:last-child) {border-bottom: 1px solid #ccc}


On indique que chaque li aura une bordure sauf le dernier.

Parmi les pseudo-classes structurelles on distingue :

  1. :empty : permet de sélectionner des éléments vides.
  2. :first-child : cible le premier élément enfant d'un élément (qu'il soit parent ou non).
  3. :last-child : cible le dernier élément enfant d'un élément (qu'il soit parent ou non).
  4. :first-of-type
  5. :last-of-type
  6. :nth-child : permet la sélection d'un ou plusieurs éléments suivant leur ordre. Cette pseudo-classe a été revue dans le quatrième niveau de CSS.
  7. :nth-last-child : cette pseudo-classe repose sur le même principe que la pseudo-classe :nth-child à la différence que le comptage commence par la fin.
  8. :nth-of-type et :nth-last-of-type
  9. :only-child et :only-of-type
  10. :root : cible la racine dans un document HTML. Présente la même fonction que le sélecteur html mais à un niveau supérieur.

Pseudo-éléments

Contrairement à la pseudo-classe qui cible un élément existant réellement, le pseudo-élément permet, quant à lui, de cibler des éléments indépendants du DOM.

  1. ::after : permet de générer du contenu via la propriété content. Celui-ci n'est donc n'est pas intégré directement au DOM, cependant il apparaît bien sur la page.
  2. ::backdrop
  3. ::before
  4. ::first-letter
  5. ::first-line
  6. ::marker
  7. ::placeholder
  8. ::selection

NB : concernant les pseudo-éléments ::after et ::before, ils peuvent s'écrirent aussi avec un seul double-point (CSS2).

Les post-processeurs CSS : c'est quoi ?

Le principe des post-processeurs est de pouvoir écrire du code CSS sans préfixes, maintenable et compatible tous navigateurs. (Sachant que la majorité des navigateurs actuels n'ont plus besoin de préfixes).

Ainsi, est-il possible de réaliser ces différentes tâches :

  • -Ajout automatique des préfixes CSS3 (ex : -webkit-animation)
  • -Minification CSS et JavaScript
  • -Concaténation (regroupement) de plusieurs fichiers CSS et JS
  • -Réorganisation des règles CSS et corrections éventuelles (CSSlint)
  • -Ajout d'alternatives à certaines propriétés non reconnues par certains navigateurs.

Pour faire simple, les post-processeurs CSS vont servir à rendre votre CSS compatible avec tous les navigateurs. Plus besoin, entre autres, de mettre des préfixes (exemple : -webkit-). Votre code gagnera en lisiblité et sera plus propre...

L'un des post-processeurs les plus connus est Autoprefixer, dont l'utilité consiste à ajouter les préfixes constructeurs : -moz-,-webkit-,-ms-,-o-.

Ce plugin analyse la syntaxe de vos fichiers CSS et ajoute, si besoin est, des préfixes vendeurs aux règles CSS, ceci en s'appuyant sur la base de données de Can I Use.

Complément d'infos, mise en place d'Autoprefixer

Les pré-processeurs CSS : c'est quoi ?

Contrairement aux post-processeurs qui permettent l'optimisation du code CSS une fois votre projet fini, les préprocesseurs vous seront utiles (ou pas) au commencement du projet.

L'intérêt d'utiliser ces outils est d'ajouter des fonctionnalités à votre code CSS. Ainsi vous pouvez créer des variables, des mixins, des boucles... (ce que fait CSS aussi en ce qui concerne les variables)

Les préprocesseurs les plus connus sont : Sass, LESS, et Stylus. Vous ne savez pas lequel choisir ? Voici un début de réponse.

Pour ou contre l'utilisation des pré-processeurs :

Pour l'utilisation des pré-processeurs

Contre l'utilisation des pré-processeurs

BEM c'est quoi ?

Signifiant "Block, Element, Modifier", BEM se veut une méthodologie de nommage des classes CSS visant à créer une arborescence dans une page web.

De ce concept, on peut tirer ces observations :

  1. Block : représente un bloc indépendant qui va englober en son sein une partie ("element") et sa variante ("modifier")
  2. Element : est donc une partie d'un bloc. Si l'on veut un exemple simple et concret, prenons le cas d'un menu. On va créer un bloc qui contiendra le menu. A l'intérieur de ce dernier, nous allons naturellement insérer des items (rubriques) sous forme d'onglets ou de simples liens hypertexte.
  3. Modifier : permet de créer des variantes. Reprenons l'exemple du menu. Si l'on souhaite rendre actif un lien en changeant sa couleur, on va alors créer une variante à l'élement.

La méthodologie se présente sous cette forme :


.block{...}
.block__element{...}
.block--modifier{...}

Exemple BEM menu

Ce constat posé, il est impératif d'observer trois règles qui constituent le concept :

  1. Nom unique pour chaque bloc et son élément. Pas d'utilisation d'attributs id, le but étant de pouvoir réutiliser les classes. (un identifiant est unique)
  2. Les sélecteurs CSS ne doivent pas correspondre à des noms d'éléments HTML (au risque d'affecter cesdits éléments).
  3. Il faut oublier la notion de cascade (sauf cas exceptionnel).
  • ✔️ Avantages :
  • - Maintenabilité
  • - Lisibilité
  • - Indépendance par rapport aux éléments HTML
  • - Pas de conflits de nommage
  • ❌ Inconvénients
  • - Code peu esthétique et complexe
  • - On peut se retrouver avec des classes très loooongues.

Aller plus loin : article complet sur OOCSS et BEM

Documentation officielle

Sachez qu'il existe d'autres méthodes :

CSSOM

CSSOM pour Modèle d'Objet CSS. C'est en quelque sorte l'équivalent du DOM HTML. Les deux combinés permettent l'affichage d'une page web par un navigateur.

CSSOM va indiquer au navigateur où restituer l'ensemble des règles CSS au bon endroit dans la page web.

exemple

Aller plus loin :

Article de Divya Manian (EN)

Article de Patrick Sexton (EN)

Construire le modèle d'objet (FR)

Outils CSS

Outil en ligne pour minifier votre code CSS.

Parce que l'accessibilité de votre site est primordiale.

Testez la rapidité de votre site :

-Soit avec Google page speed

-Soit avec GTmetrix

-Soit avec Dareboost

Aller plus loin avec un article sur ce blog : Petit guide pour créer son site gratuitement

Ressources CSS

Vous trouverez sur ce blog de nombreuses ressources CSS :

Articles CSS Apprendre CSS3 Démonstrations CSS3

Les développeurs à suivre (liste non exhautive, sinon celle-ci serait interminable) :

  1. Chris Heilmann
  2. Sarah Drasner
  3. Chris Coyier
  4. Eric Meyer
  5. Rachel Andrew
  6. simurai.com
  7. Bennett Feely
  8. Hugo Giraudel
  9. Benjamin De Cock
  10. Jen Simmons
  11. David DeSandro
  12. Dudley Storey
  13. Vincent De Oliveira
  14. script-tutorials
  15. Raphaël Goetter
  16. Hteumeuleu
  17. Lea Verou
  18. Nicolas Hoffmann
  19. Tom Giannattasio
  20. Serg Hospodarets