Share
Le week-end dernier, j'ai téléchargé le passe-partout Skeleton de Dave Gamache pour jouer; bon, propre, amusant réactif. En ce qui concerne la conception de formulaire, on m'a rappelé un problème qui peut affecter les entrées dans les présentations flexibles: les largeurs mal adaptées. Si vous avez déjà eu le même problème, ou si vous n'en avez jamais été conscient, lisez la suite…
Disons que nous avons une mise en page avec un élément conteneur, qui a une largeur flexible (étirez votre navigateur et vous étirez le conteneur). Dans notre conteneur, nous avons une variété d’éléments (titres, paragraphes, règles horizontales, divs) et nous avons également une forme simple qui héberge quelques bits de forme typiques..
Le contenu augmente et diminue en fonction de la largeur du contenant. Les éléments de niveau bloc (tels que divs) correspondent exactement à la largeur. Ils remplissent automatiquement 100% de la largeur du conteneur et, quel que soit le rembourrage ou les bordures, ils restent parfaitement dans les limites de leur parent.
Les entrées de formulaire ne le font pas.
Pour qu’ils remplissent la largeur du conteneur, nous devons appliquer un largeur: 100%;. Cependant, après avoir ajouté cela, l'ajout de marges intérieures, de marges ou de marges fera que nos entrées se démarqueront des contraintes du conteneur. Bummer.
Eh bien pas vraiment. Le modèle de boîte CSS dicte le comportement des dimensions d'élément et, depuis l'introduction des normes Web, nous en sommes venus à accepter ce remplissage, ces marges et ces bordures. ajouter aux dimensions d'un élément.
Donc, on peut soutenir que notre division dans ce cas est celle qui se comporte de manière inattendue, mais c'est uniquement parce que nous n'avons pas défini sa largeur..
Il semble que les choses soient traitées de la même manière qu'Internet Explorer. L'approche en mode quirks signifie que vous définissez la largeur et la hauteur d'un élément et que tout remplissage ou bordure est pris en compte. dans ces dimensions. Si vous avez spécifié une largeur de 600 pixels, même si vous avez ajouté un remplissage de 10 pixels, la largeur sera de 600 pixels. Vous sauriez catégoriquement quelle était la taille de vos éléments.
Tant que nous savions comment nos éléments se comportaient, nous pouvions tenir compte des différences et spécifier des dimensions fixes en conséquence. Mais en cette ère de configurations fluides, nous ne savons pas nécessairement quelle est la largeur des éléments contenant. Il existe sûrement un moyen de faire en sorte que nos entrées et nos zones de texte se comportent de la même manière que tout le reste. Heureusement il y a. Et nous allons construire une démo pour l'illustrer.
Comme c’est le passe-partout Skeleton qui m’a rappelé ce problème, nous allons le saisir pour nous construire rapidement une démo..
Remarque: Tout style dans le passe-partout Skeleton sert à la mise en page et à l'esthétique de base - ajouter du css n'est pas une critique!
Décompressez les fichiers et vous verrez quelque chose comme ceci:
Le premier changement que je ferai est index.html. Dans la dernière colonne, nous allons échanger le contenu pour un formulaire:
et ensuite nous ajouterons quelques lignes à stylesheets / layout.css:
.column background: # f7f7f7; input [type = 'text'], sélectionnez, textarea width: 100%;
Tout ce que nous avons fait est de donner aux colonnes un fond gris (afin que nous puissions voir où se trouvent les limites) et d'élargir la largeur de nos éléments de formulaire. Découvrez le résultat jusqu'à présent. Le problème du mauvais comportement des intrants est clairement illustré, alors passons maintenant à la solution…
Nous pouvons faire en sorte que nos éléments de formulaire se comportent conformément au vieux modèle de boîte de mode quirks avec une ligne de css…
input [type = 'text'], textarea box-sizing: border-box; -moz-box-dimensionnement: border-box; -webkit-box-dimensionnement: border-box;
D'accord, six lignes, mais l'important est taille de la boîte: boîte-frontière;, avec ses frères préfixés vendeur. Nous avons appliqué cette règle à nos entrées de texte et nos zones de texte, en indiquant au navigateur le rendu de leurs dimensions avec un remplissage et des bordures. à l'intérieur. Regardez la démo résultante, perfecto! Redimensionnez le navigateur et vous verrez les éléments de formulaire bien jouer, tout comme leurs amis au niveau du bloc..
En termes de support du navigateur, vous êtes également bien couvert. Ironiquement, IE7 ne reconnaît pas la propriété de taille de boîte, mais c'est le seul navigateur avec lequel vous aurez des problèmes..
Accentsconagua