Share
Letztes Wochenende habe ich Dave Gamaches Skeleton-Platten für ein Spiel heruntergeladen. gut, sauber, reaktionsfreudig. Bei der Gestaltung des Formulars wurde ich an ein Problem erinnert, das Eingaben in flexiblen Layouts beeinflussen kann: Fehlverhalten der Breiten. Wenn Sie jemals das gleiche Problem hatten oder sich dessen nie bewusst waren, lesen Sie weiter…
Nehmen wir an, wir haben ein Layout mit einem enthaltenden Element, das eine flexible Breite hat (dehnen Sie Ihren Browser und Sie dehnen den Container aus). In unserem Container haben wir eine Vielzahl von Elementen (Überschriften, Absätze, horizontale Regeln, divs) und wir haben auch eine einfache Form, die einige typische Form-Bits und Bobs enthält.
Der Inhalt wächst und schrumpft je nach Breite des Behälters. Elemente auf Blockebene (z. B. divs) stimmen exakt mit der Breite überein. Sie füllen automatisch 100% der Breite des Containers aus und bleiben unabhängig von Auffüllung oder Rändern sauber innerhalb der Grenzen des übergeordneten Elements.
Formulareingaben nicht.
Damit sie die Breite des Containers ausfüllen können, müssen Sie ein Breite: 100%;. Wenn Sie dies jedoch getan haben, werden durch das Hinzufügen von Auffüllungen, Rändern oder Rändern unsere Eingaben aus den Einschränkungen des Containers platzen. Mist.
Nicht wirklich. Das CSS-Boxmodell gibt vor, wie sich die Elementabmessungen verhalten. Seit der Einführung von Webstandards akzeptieren wir diese Auffüllung, Ränder und Ränder hinzufügen zu den Dimensionen eines Elements.
Unser Div ist in diesem Fall also ein unerwartetes Verhalten, aber das liegt nur daran, dass wir seine Breite noch nicht definiert haben.
Es scheint sich um Dinge zu handeln, wie sie früher üblich waren. Der Quirks-Modus-Ansatz bedeutete, dass Sie die Breite und Höhe eines Elements definiert haben und dass etwaige Auffüllungen oder Ränder berücksichtigt werden innerhalb diese Abmessungen. Wenn Sie ein div als 600px breit angegeben haben, selbst wenn Sie 10px aufgefüllt haben, wäre es immer noch 600px breit. Sie würden kategorisch wissen, wie groß Ihre Elemente waren.
Solange wir wissen, wie sich unsere Elemente verhalten, können wir die Unterschiede berücksichtigen und feste Abmessungen entsprechend angeben. Aber im Zeitalter der flüssigen Layouts wissen wir nicht unbedingt, wie groß die enthaltenen Elemente sind. Sicherlich gibt es eine Möglichkeit, wie unsere Eingaben und Textbereiche sich wie alle anderen verhalten. Zum Glück gibt es das. Und wir werden eine kurze Demo erstellen, um es zu veranschaulichen.
Da es die Skeleton Boilerplate war, die mich an dieses Problem erinnerte, packen wir es und bauen uns schnell eine Demo.
Hinweis: Jedes Styling innerhalb der Skeleton Boilerplate dient dem Layout und der grundlegenden Ästhetik - meine Hinzufügung zu seiner CSS ist keine Kritik!
Entpacke die Dateien und du siehst so etwas:
Die erste Änderung, die ich vornehmen werde, ist index.html. In der letzten Spalte tauschen wir den Inhalt gegen ein Formular aus:
und dann fügen wir ein paar Zeilen zu stylesheets / layout.css hinzu:
.Spalte Hintergrund: # f7f7f7; Eingabe [Typ = 'Text'], Auswahl, Textbereich Breite: 100%;
Alles, was wir getan haben, ist, die Spalten mit einem grauen Hintergrund zu versehen (damit wir sehen können, wo die Grenzen liegen) und die Formularelemente 100% breit gemacht. Überprüfen Sie das Ergebnis bisher. Das Problem des Fehlverhaltens von Eingaben wird klar dargestellt, also zur Lösung…
Wir können unsere Formularelemente mit dem alten Quirks-Modus-Boxmodell mit einer Zeile css verhalten ...
Eingabe [Typ = 'Text'], Textbereich Größenanpassung: Randfeld; -moz-box-dimensionierung: border-box; -webkit-box-dimensionierung: border-box;
Okay, sechs Zeilen, aber die wichtige ist Box-Dimensionierung: Border-Box;, zusammen mit seinem Verkäufer Brüder. Wir haben diese Regel auf unsere Texteingaben und Textbereiche angewendet und den Browser angewiesen, seine Abmessungen mit Füllungen und Rahmen darzustellen Innerhalb. Schauen Sie sich die resultierende Demo an, perfecto! Wenn Sie die Größe des Browsers ändern, werden die Formularelemente genau wie ihre Freunde auf Blockebene abgespielt.
In Bezug auf die Browserunterstützung sind Sie auch gut abgesichert. Ironischerweise erkennt IE7 die Box-Sizing-Eigenschaft nicht, aber es ist der einzige Browser, mit dem Sie Probleme haben.
Accentsconagua