Taghtml

[HTML] Exploiter les microformats pour baliser une zone de contact (h-card) de la manière la plus sémantique possible

Ressources officielles sur les Microformats et outils de test en ligne

Demo

La démo comprend la sématique HTML et les microformats pour une société qui possède plusieurs agences réparties dans plusieurs villes.

Demo CodePen.io

[HTML] Le positionnement d’un contenu ancré est décalé à l’écran par rapport à l’emplacement où est placé l’ancre dans le code source de la page.

Source: Anchor link landing in wrong position.

Code qui pose problème:

Suggestion de correction:

I think the problem is resulting from the anchors with no contents that you are using.

Also, it appears that name= has been deprecated in favor of id= as a fragment identifier in certain elements (including A) which makes a kind of sense as ID attributes are unique whereas NAME attributes are not so guaranteed.

I’d try sticking the fragment identifier in the actual renderable entity such as:

and see where that gets you. Incidentally, it looks like a good conference, I hope you get a comp admission.

Réponse de l’OP:

Aha! Got it, worked a charm, thanks mate. Incidentally – I’m one of the conference organiser, no web dev! So not only will I be at the conference, but also drinking whiskey with the speakers 🙂

[CSS] Des images responsive dans un tableau HTML ou dans un container en display: table-cell;

table

nada …

display: table-cell;

ATTENTION: sous IE10, IE11, dans le cadre d’une mise en page Responsive et si vous utilisez des images, il est possible que le redimensionnement homothétique de celles-ci soit mal géré. Vous pouvez ajouter ce style pour corriger le problème :

[Magento] Formulaires : anatomie de l’ossature HTML et taxonomie des classes CSS standard

Simulation : http://jsfiddle.net/frontenddeveloper/d205ar7j/10/ (toujours vérifier la dernière update).

Squelette général

Obtenir une ossature standard de formulaire (affichage des étiquettes au-dessus des champs qui leur sont associés) :

Les libellés des classes parlent d’eux-mêmes. .fieldset et .legend reprennent le nom des balises HTML bien connues (la pratique est mauvaise d’un point de vue sémantique, mais c’est défini comme ça…), .form-instructions permet de laisser à l’utilisateur quelques instructions pour bien remplir son formulaire, .required pour le traditionnel message « les champs marqués d’une étoile * doivent être renseignés! », .form-list embarque la liste des champs qui constituent le formulaire et .buttons-set vous servira à englober les boutons d’annulation, validation, etc..

Pour information, une amélioration sémantique par rapport au standard en introduisant les éléments <fieldset /> et <legend /> semble possible sans casser tout l’affichage à condition de conserver les classes .fieldset et .legend :

Simulation : http://jsfiddle.net/frontenddeveloper/d205ar7j/11/.

Obtenir une ossature de formulaire avec des étiquettes alignées sur les champs associés en ajoutant la classe .scaffold-form à l’élément <form /> (voir ici pour plus d’information sur la mise en place et l’utilité de cet affichage) :

Les différents champs

Les champs sont sémantiquement déclarés sous forme de liste :

Champ texte unique

  • Les classes required sur l’élément <label /> et required-entry sur l’élément <input /> sont à mettre en place si le champ est à remplir obligatoirement.
  • La classe validate-[etiquette_du_champ] sur l’élément <input /> est facultative.

Champ texte unique dont la validation a réussi

Une classe .validation-passed est ajoutée à l’élément <input />.

Champ de texte unique dont la validation a échoué

  • Une classe .validation-failed est ajoutée à l’élément <input />.
  • Un élément #advice-required-entry-[etiquette_du_champ] apparaît immédiatement après l’élément <input /> auquel il se rapporte pour donner un complément d’information sur le mode de saisie de celui-ci. Notez que cet élément possède aussi une classe .validation-advice.

Groupe de champs texte empilés

Groupe de champs texte alignés horizontalement (exemple : affichage d’une date)

Les boutons

Les messages d’erreur

Scaffold forms

scaffold n (around building) (Construction) échafaudage nm.

Documentation officielle : Scaffold Forms – Magento CE 1.9 and EE 1.14 Responsive Web Design Developer’s Guide.

Le thème responsive (rwd) de Magento est livré avec le fichier skin/frontend/rwd/default/scss/scaffold-forms.scss qui embarque des styles qui modifient le comportement standard des formulaires en affichant les étiquettes à gauche des champs qui leur sont associés sur les viewports les plus larges (en opposition à un affichage au-dessus des champs). Cet affichage à pour vocation de rendre les formulaires longs (par exemple, l’étape du tunnel d’achat où il faut renseigner ses informations de facturation) moins intimidants pour les utilisateurs.

Cependant, ces styles ne sont pas actifs par défaut parce que le thème responsive a des contraintes de localisation (la longueur des étiquettes peut varier suivant la langue et, ainsi, impacter l’affichage).

Le choix est laissé au développeur de les utiliser ou non. Pour ce faire, déplacer skin/frontend/rwd/default/scss/scaffold-forms.scss vers core/_scaffold-forms.scss et éditer scss/_core.scss pour l’inclure.

[HTML] Viewport : utiliser la balise meta Viewport adéquate suivant le type de site (optimisé mobile ou non).

Viewport pour un site optimisé mobile/smartphone :
(Ressource : Using the viewport meta tag to control layout on mobile browsers)

Viewport pour un site non-optimisé mobile/smartphone :
(Ressource : Viewport meta tag for non-responsive design)

Utiliser le second Viewport si l’affichage de votre site se comporte de manière bizarre sur mobile (votre site n’a pas été prévu pour s’afficher sur mobile, la page est zoomée au chargement).

© 2020 devfrontend.info

Theme by Anders NorénUp ↑