/ / CSS: survolez. Effets de survol originaux

CSS: survolez. Effets de survol originaux

L'idée de diviserprésentation des informations à partir du code qui les crée et les traite. C'était une décision forte à un moment donné, mais ce moment n'a pas été pleinement reconnu à l'époque. Lors de la programmation séparée d'un seul ordinateur, mais n'a pas gagné dans un réseau local ou une zone de domaine séparée, mais s'est immédiatement répandue partout, alors seulement il est devenu évident que la présentation de l'information (en termes de conception) et le travail avec elle (en termes de code) sont deux côtés dans un seul plan.

Trois facettes de la construction de site

D'un point de vue formel, il existe trois principauxcomposants (sous différentes formes syntaxiques) qui composent le site: code PHP, code JavaScript et descriptions de style CSS. Peu importe comment le composant est nommé et quelle version est utilisée, quelle version du balisage HTML est utilisée et quelle version du navigateur est. La compatibilité n'est pas tenue en haute estime ces jours-ci, car à chaque instant est pertinent: ce qui est encodé et ce qui est encodé peut être affiché et exécuté.

Si les langages antérieurs se sont battus pour des idées, aujourd'hui les fabricants de normes dans le domaine des technologies et des navigateurs Internet aiment se battre à vide.

Personnel et public

Les moyens par lesquels Internet est accessible,nombreux (ordinateurs, ordinateurs portables, tablettes, smartphones), il existe également de nombreux navigateurs. Il n'y a aucune garantie qu'un seul appareil affichera le site sous la forme dans laquelle le développeur l'a créé. Les efforts de ces derniers n'atteignent pas toujours l'objectif et offrent à la conception web une seule diversité, c'est-à-dire l'unité d'affichage de l'entité, où qu'elle soit ouverte au visiteur.

Séparer le privé et le public, en utilisantce dernier n'est que ce qui fonctionne, vous pouvez obtenir un succès notable dans la conception. Beauté, élan artistique et web design sont le destin des professionnels et talents respectifs. CSS est du code, bien que très particulier. Son souci est de décrire les styles (options d'affichage des informations). Avec l'avènement des appareils mobiles, CSS a été chargé avec un véritable codage sous la forme de requêtes multimédias. Ainsi, l'option du remariage entre la conception et le code n'est pas aussi irréaliste que cela puisse paraître il y a à peine quelques années.

survol css

Un développeur faisant du style CSS,s'appuie sur sa propre expérience éprouvée et les constructions CSS qui fonctionnent sur la plupart des navigateurs satisfont la majorité des visiteurs du site. Vous devez tirer le meilleur parti du premier et du minimum du second, alors il y a beaucoup plus de chances d'obtenir un résultat qui fonctionne presque toujours et partout.

Première règle: espérer la norme, mais ne vous trompez pas

CSS:le survol est lorsque la souris survole un élément de la page. Lorsque la souris clique sur un élément, il devient actif, mais lorsque le curseur se déplace sur le côté, il peut changer à nouveau et se montrer dans un état actif. «: Hover», «actif» et «visité» sont les pseudo-classes les plus couramment utilisées pour décrire les styles.

Il est très pratique de ne pas se soucier des bagatelles telles que le mouvement de la souris sur les éléments du code du site. En fournissant deux descriptions dans le tableau de description des styles:

élément {

la couleur noire;

}

élément: hover {

Couleur blanche;

couleur de fond: vert;

}

Obtenez-le lorsque vous survolez l'élémentchanger automatiquement la couleur du texte du noir au blanc et changer l'arrière-plan de cet élément en vert. Les pseudo-classes peuvent être appliquées à n'importe quel élément et obtenir une grande variété d'effets visuels.

création de sites web

Deuxième règle: faire confiance aux normes, laissez-vous guider par votre code

Tout irait bien si le progrès restaitau niveau des ordinateurs et portables équipés de souris, et les progrès de la communication cellulaire n'ont pas conduit à l'émergence de smartphones, tablettes et autres appareils mobiles auxquels il est très problématique de connecter un tel appareil.

Par contre, uniquement équipéen utilisant des gadgets spéciaux à écran tactile, il devient possible de manipuler les doigts directement sur l'écran tactile, comme c'est devenu habituel sur les smartphones, tablettes et appareils similaires.

Il y a une différence significative et: le survol ne fonctionne pas comme il se doit. Vous ne pouvez pas vous passer de code ici, et l'utilisation de requêtes multimédias ne résout pas tous les problèmes.

bouton hover css

La compatibilité est trop chère enle monde de l'information moderne, par conséquent, afin d'assurer la bonne fonctionnalité du site dans les exigences établies pour la conception Web et la mise en œuvre des fonctionnalités, il est préférable de se concentrer sur les cas d'utilisation minimum nécessaires: CSS hover, CSS hover focus, CSS hover active (visité). Plus le code (à la fois à l'intérieur du navigateur et sur le serveur) contrôle la conception Web, mieux c'est. Le programme est le contrôle, il vaut mieux quand ce contrôle n'est pas remis aux normes actuelles, dont on ne sait souvent pas à quoi s'attendre.

survol de style css

Boutons et autres éléments de page

Bouton hover CSS est une solution merveilleuse, maisen gros, chaque élément de la page est un "bouton". Le site doit tout d'abord être vivant et si cela n'est pas inclus dans le code, si la tâche est de créer un site qui se développe de manière adéquate au champ d'application et agit en tenant compte du comportement du visiteur, alors au moins en utilisant les styles CSS, vous pouvez donner de la vivacité aux éléments de la page.

effets de survol

Il est pratique d'utiliser des effets de survol. Avec leur aide, vous pouvez facilement donner de la vivacité aux pages, mais le code ne sait pas ce que fait la souris à l'écran s'il n'y a aucun moyen de suivre son mouvement. De ce point de vue, c'est-à-dire lorsque le code contrôle le mouvement de la souris (= le mouvement du doigt sur le smartphone), il peut indépendamment mettre en évidence l'élément ou le transformer. Cela n'a rien à voir avec les pseudo-classes, mais cela donne au code un contrôle total sur l'apparence de la page, lui permet d'être correctement affiché sur différents appareils dans différents navigateurs.

Pièges dans les feuilles de style

Dire qu'ils sont standard en termes de descriptions de styleCSS ne sait pas ce qu'il fait, mais il est également impossible de prétendre qu'il interagit pleinement avec d'autres normes dans le domaine de la programmation Internet.

Les styles et pseudo-classes peuvent être décrits dans l'étapecodage de page, au moment où le serveur forme la page et en dynamique: déjà à l'intérieur du navigateur, vous pouvez facilement créer un nouveau style et changer l'existant.

Utiliser AJAX quand il n'est plus nécessairegénérer une page pour afficher une réaction à l'action d'un visiteur, et il suffit de changer son élément ou plusieurs éléments rajoutent un peu de "piment". "L'amitié" des codes - ce qui est déjà dans le navigateur (JavaScript) et ce qui est sur le serveur (PHP) - est le lot de l'auteur (programmeur) du site.

focus de survol css

De la façon dont l'algorithme de cel'interaction, dépend de manière significative non seulement de l'affichage de ses éléments sur la page, mais aussi de leur perception ultérieure par le code. Pour faire simple, les pseudo-classes (en particulier) sont très bonnes pour la statique, comme pour un voilier dans une mer claire avec un vent léger - tout est évident, accessible et contrôlable. Si le temps change, ou lorsque le vent devient plus fort, ou si un visiteur déclenche une situation imprévue, vous pouvez rapidement vous heurter au récif et perdre le visiteur.

Standard et son émulation

Le survol de style CSS peut être émulévia JavaScript en utilisant les événements onmouseover et onmouseout. C'est souvent la fin. Du point de vue du bon sens, lorsqu'il s'agit de créer un site Web vraiment fonctionnel, il vaut mieux garder le contrôle entre vos mains que de le laisser à la merci de normes mythiques qui changent en dehors de la volonté et du désir du développeur.

Parfois, vous pouvez lire quelque chose comme "donnéla fonctionnalité est disponible même dans IE », mais le plus souvent, vous pouvez lire les descriptions de style perçues par tel ou tel navigateur. Beaucoup moins souvent, vous pouvez découvrir en quoi JavaScript diffère dans certains navigateurs.

css hover actif

Appréciant l'expérience accumulée, admirantles capacités de «Chrome» et «Opera», critiquant la lenteur et l'inertie du navigateur du constructeur (inoubliable, cher au cœur de tout programmeur IE de Microsoft: "Le bon vieil Internet Explorer ne grondait pas que les paresseux. Ou quelqu'un qui ne sait jouer au Klondike que sur ordinateur », - citation d'un auteur Internet inconnu), vous devez vous en tenir au juste milieu: utiliser quelque chose qui fonctionne partout et toujours.

Les gens ont besoin de fonds pour travailler, quand ils ont besoin de sensations fortes, ils vont généralement au bureau d'enregistrement ou au théâtre, mais pas sur Internet.

Émulation et contrôle

Auparavant, lorsque la programmation est devenuejambes, il était d'usage d'écouter les anciens et d'écrire correctement. De nos jours, il y a trop d'anciens, tout change trop vite, et si vous écoutez tout le monde, alors il n'y a pas assez de temps, même pour un travail très simple, pour un site Web peu fonctionnel.

La programmation concerne principalement le contrôle etDans les cas où la norme établit les règles de manière biaisée, ou vous pouvez vous attendre à un changement brutal de la règle, à son élimination et à l'apparition d'une nouvelle règle, la meilleure décision a toujours été de ne pas prendre de décision, mais d'implémenter la fonctionnalité de site requise avec le minimum possible, mais un code vraiment fonctionnel.