In jedem Design-Tool oder Kunstprinzip, von dem ich schon gehört habe, sind Beziehungen ein zentrales Thema. Unter Beziehungen verstehe ich das, was Sie in Adobe Illustrator tun können, um festzulegen, dass die Höhe einer Form der Hälfte der Höhe einer anderen entspricht. Sie können diese Informationen nicht in CSS ausdrücken. CSS-codiert alle Werte hard-codes. Mit einer Sprache wie LESS , die Variablen und Arithmetik erlaubt, können Sie Beziehungen näher bringen, aber es ist immer noch eine CSS-Variante.
Diese Unfähigkeit in meinem Kopf ist das größte Problem mit CSS. CSS soll eine Sprache sein, die die visuelle Komponente einer Webseite beschreibt, aber es ignoriert Beziehungen und Zwänge, Ideen, die im Zentrum von Kunst stehen.
Wie ist es möglich, sich eine neue Webdesignsprache vorzustellen, die Beziehungen und Einschränkungen ausdrücken kann, die in JavaScript mit den aktuellen CSS-Eigenschaften implementiert werden können?
Suchen Sie nach etwas wie CSS-Scripting-Layout-Spezifikation oder Constraint Cascading Style Sheets für das Web ? Beide befinden sich jedoch noch in der Forschungs- / Prototypenphase.
Die CSS-Scripting-Layout-Spezifikation wurde anscheinend als Google Chrome-Plug-in implementiert.
Wenn Sie die Größenattribute mit einem Prozentwert festlegen und das Element als untergeordnetes Element des Elements platzieren, das Sie skalieren, können Sie ein Element relativ zu einem anderen Element anpassen. Verwenden Sie dann Positionierung, um das Kind physisch außerhalb des übergeordneten Objekts zu verschieben.
Es gab auch eine JavaScript Style Sheets Spezifikation von Netscape aus dem Jahr 1996, Ссылка .
Die CSS-Scripting-Layout-Spezifikation ist kein Chrome-Plug-in. Was zur Verfügung gestellt wird, ist ein Proof of Concept. Viele Menschen sind nicht davon überzeugt, dass JavaScript aufgrund der CSS-Implementierung von Microsoft Expressions, die schwerwiegende Leistungsprobleme aufwies, gut genug für das CSS-Layout arbeiten kann.
Es ist auf das Layout beschränkt, da dies die größte Beschwerde bei CSS zu sein scheint. Ziel ist es, Power-Usern die Möglichkeit zu geben, fast alles zu tun, was sie wollen, aber gleichzeitig so zu gestalten, dass Layouts von unerfahrenen Benutzern gekapselt, referenziert und wiederverwendet werden können.
Direkt können Sie dies in reinem CSS nicht tun, ohne mehr Probleme zu bereiten, als zu helfen, da die Unterstützung von verschiedenen Browsern unterschiedlich ist.
Indirekt können Sie Frameworks wie Less oder Ihr CSS über ein serverseitiges Skript ausführen , bevor Sie es an den Server senden Kunden sind Ihre beste Wette, aber, wie Sie sagten, nicht ideal.
In jQuery verwenden Sie jQuery, um die Höheneigenschaft eines Elements basierend auf der outerHeight ist wahrscheinlich der Anfang einer anständigen Lösung, aber ich kann keine Code-Beispiele finden, die Leute geschrieben haben, um Ihr spezifisches Problem zu lösen. Ich könnte mir aber vorstellen, dass es so etwas sein könnte:
%Vor%Das würde die Höhe von eins basierend auf der Höhe + Rahmen + Polsterung des anderen festlegen. Um robuster zu sein, muss mehr dahintersteckt, aber es ist der Anfang einer Lösung.
Vielleicht möchten Sie sich ein Clever CSS ansehen, einen pythischen Ansatz zum Schreiben von CSS. Es enthält Variablen, Arithmetik, Sie können sogar Operationen mit Farben durchführen.
Ich kümmere mich auch um einen solchen Ansatz zum Schreiben von Stilen, etwas, das gegenüber CSS eine höhere Ebene ist. Aber eines der großen Probleme wird meiner Meinung nach die Tatsache sein, dass CSS-Stylesheets oft von Designern und nicht von Programmierern geschrieben werden, die Designwerkzeuge verwenden, die es ihnen wahrscheinlich ermöglichen, auf einer höheren Ebene zu arbeiten und anschließend das CSS zu generieren. Was für uns Programmierer ein guter flexibler Ansatz sein könnte, funktioniert vielleicht nicht, weil es für Designer zu geekish ist.
Die Verwendung von Prozentsätzen zur Bestimmung der Höhe dient dazu, eine Beziehung mit einem hartcodierten Wert auszudrücken.
"Wenn Sie die Größenattribute mit einem Prozentwert festlegen und das Element als untergeordnetes Element der Größe platzieren, die Sie skalieren, können Sie ein Element relativ zu einem anderen bestimmen" ABER NUR WENN die Höhen der übergeordneten Elemente explizit ausgedrückt werden (und dies gilt bis zum html-Element).
In CSS Level 2 "Der Prozentsatz wird in Bezug auf die Höhe des umschließenden Blocks der generierten Box berechnet. Wenn die Höhe des umschließenden Blocks nicht explizit angegeben wird (dh abhängig von der Inhaltshöhe), wird der Wert wie interpretiert 'Auto'". Ab Version 1 werden die prozentualen Höhen bei absolut positionierten Elementen nicht mehr als 'automatisch' behandelt, wenn die Höhe des umschließenden Blocks nicht explizit angegeben wird. "
Bei der absoluten Positionierung bricht diese Lösung ab, weil "Bei absolut positionierten Elementen, deren umschließender Block auf einem Blockelement basiert, wird der Prozentsatz in Bezug auf die Höhe der Füllbox dieses Elements berechnet. Dies ist eine Änderung gegenüber CSS1 , wobei der Prozentsatz immer in Bezug auf die Inhaltsbox des Elternelements berechnet wurde. "
Im folgenden Code wird der innere Wrapper divs heights mit absoluter Positionierung kollationieren, wodurch die Möglichkeit, sie zum Platzieren von Rändern zu verwenden, verloren geht.
%Vor%