Share
Afgelopen weekend heb ik Dave Gamache's Skeleton boilerplate gedownload om mee te spelen; goed, schoon, responsief plezier. Wat het ontwerp van het formulier betreft, werd ik herinnerd aan een probleem dat van invloed kan zijn op invoer in flexibele lay-outs: onjuiste breedten. Als je ooit hetzelfde probleem hebt gehad, of je bent je er nooit van bewust geweest, lees dan verder ...
Laten we zeggen dat we een lay-out hebben met een element dat een flexibele breedte heeft (strek je browser uit en je rekt de container uit). In onze container hebben we een verscheidenheid aan elementen (koppen, alinea's, horizontale regels, divs) en we hebben ook een eenvoudige vorm die gastheer biedt voor een paar typische vormbits en bobs..
De inhoud groeit en krimpt afhankelijk van de breedte van de container. Block level-elementen (zoals divs) komen exact overeen met de breedte. Ze vullen automatisch 100% van de breedte van de container in, en ongeacht de opvulling of randen blijven ze netjes binnen de grenzen van hun bovenliggende.
Formulieringangen niet.
Om de breedte van de container te vullen, moeten we een breedte: 100%;. Als u dat echter hebt gedaan, voegt het toevoegen van opvulling, randen of marges ertoe dat onze invoer barst uit de beperkingen van de container. Jammer.
Nou niet echt. Het CSS Box Model dicteert de manier waarop elementafmetingen zich gedragen en sinds webstandaarden zijn geïntroduceerd, accepteren we die opvulling, marges en randen toevoegen naar de dimensies van een element.
Dus misschien is onze div in dit geval degene die zich onverwacht gedraagt, maar dat is alleen omdat we de breedte niet echt gedefinieerd hebben.
Het lijkt erop dat dingen worden behandeld zoals Internet Explorer dat traditioneel deed. De benadering met de quirksmodus betekende dat u de breedte en hoogte van een element hebt gedefinieerd en dat rekening is gehouden met eventuele opvulling of randen binnen die dimensies. Als je een div op 600px breed hebt opgegeven, zelfs als je 10px padding hebt toegevoegd, zou deze nog steeds 600px breed zijn. Je zou categorisch weten hoe groot je elementen waren.
Zolang we wisten hoe onze elementen zich gedroegen, konden we rekening houden met de verschillen en dienovereenkomstig vaste dimensies specificeren. Maar in deze tijd van vloeiende lay-outs weten we niet per se hoe breed elementen bevatten. Er is toch een manier om onze inputs en textareas op dezelfde manier te laten werken als al het andere? Gelukkig is dat zo. En we gaan een snelle demo maken om het te illustreren.
Omdat het de Skeleton boilerplate was die me aan dit probleem herinnerde, gaan we het pakken en bouwen we snel een demo op.
Notitie: Elke styling in de Skeleton boilerplate is met het oog op lay-out en basisesthetiek - mijn toevoeging aan zijn CSS is geen kritiek!
Pak de bestanden uit en je ziet zoiets als dit:
De eerste verandering die ik zal aanbrengen is naar index.html. In de laatste kolom wisselen we de inhoud van een formulier om:
en dan zullen we een paar regels toevoegen aan stylesheets / layout.css:
.kolom background: # f7f7f7; invoer [type = 'tekst'], selecteer, textarea width: 100%;
Alles wat we hebben gedaan krijgt de kolommen een grijze achtergrond (zodat we kunnen zien waar de grenzen liggen) en maakten onze formulierelementen 100% breed. Bekijk het resultaat tot nu toe. Het probleem van misdragen is duidelijk geïllustreerd, dus nu voor de oplossing ...
We kunnen ervoor zorgen dat onze formulierelementen zich gedragen volgens het oude eigenaardigheden-boxmodel met één regel css ...
input [type = 'text'], textarea box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
Oké, zes regels, maar de belangrijkste is box-sizing: border-box;, samen met zijn verkoper vooraf ingestelde broers. We hebben deze regel toegepast op onze tekstinvoer en tekstgebieden, zodat de browser zijn dimensies met opvulling en randen weergeeft binnen. Bekijk de resulterende demo, perfecto! Verklein de grootte van de browser en je ziet de formulierelementen netjes spelen als hun vrienden op blokniveau.
In termen van browserondersteuning ben je ook goed behandeld. Ironisch genoeg herkent IE7 de eigenschap voor het sorteren van de box niet, maar het is de enige browser waarmee je problemen zult ondervinden.
Accentsconagua