代码之家 › 专栏 › 技术社区 › hekevintran

有没有办法把关系/约束放到CSS中[[关闭]

css

hekevintran · 技术社区 · 16 年前

在我听说的每一个设计工具或艺术原则中,关系都是一个中心主题。关系是指你可以在adobeillustrator中指定一个形状的高度等于另一个形状高度的一半。你不能用CSS来表达这些信息。CSS硬编码所有值。使用像这样的语言 LESS 这使得变量和算法可以更接近关系,但它仍然是一个CSS变量。

在我看来,这种无能是CSS最大的问题。CSS被认为是一种描述网页视觉组件的语言,但它忽略了关系和约束,即艺术的核心思想。

有没有可能想象一种新的Web设计语言,它可以表达关系和约束,这些关系和约束可以使用当前的CSS属性在JavaScript中实现?

6 回复 | 直到 16 年前

Sebastian 16 年前

你在找这样的东西吗 CSS Scripting Layout Specification Constraint Cascading Style Sheets for the Web ? 不过,两者都还处于研究/原型阶段。

Delan Azabani 16 年前

如果使用百分比设置“大小”属性,并将该元素作为要调整大小的元素的子元素放置,则可以相对调整另一个元素的大小。然后,使用定位将子对象实际移动到父对象之外。

Darrel Karisch 16 年前

http://en.wikipedia.org/wiki/JavaScript_Style_Sheets

CSS脚本布局规范不是Chrome插件。提供的是概念证明。由于微软的CSS表达式实现存在严重的性能问题,许多人不相信JavaScript能够在CSS布局中表现良好。

它仅限于布局,因为这似乎是最大的投诉与CSS。它的目的是让高级用户能够做几乎任何他们想做的事情,但同时使其能够被封装、引用,并被新手用户重用。

JoshMock 16 年前

直接地说,这不是一件你可以在纯CSS中做而不会造成更多麻烦的事情,因为不同浏览器的支持量不同。

间接地,像Less或by这样的框架 running your CSS through a server-side script 在发送给客户之前,这是你最好的选择,但正如你所说,并不理想。

height property 基于别人的 outerHeight 可能是一个不错的解决方案的开始,但我找不到任何人编写的代码示例来解决您的特定问题。我想可能是这样的:

var totalHeight = 1000;
$("#div2").height(totalHeight - $("#div1").outerHeight());

这将根据另一个的高度+边框+填充设置一个的高度。为了变得更健壮,需要做的还不止这些,但这只是解决方案的开始。

Carles Barrobés 16 年前

Clever CSS ,一种编写CSS的python方法。它包括变量、算术,甚至可以对颜色进行运算。

rfb 15 年前

使用百分比来确定高度是为了表示与硬编码值的关系。

“如果使用百分比设置大小属性,并将元素作为要调整大小的元素的子元素,则可以相对于另一个元素调整元素的大小”,但前提是父元素的高度是显式表示的(这将在html元素之前应用迭代)。

在csslevel2“中,百分比是根据生成的框的包含块的高度来计算的。如果未明确指定包含块的高度(即,它取决于内容高度),则该值将被解释为“auto”。但是从版本1“当包含块的高度没有明确指定时,绝对定位元素的百分比高度不再被视为‘自动’。”

对于绝对定位,此解决方案会中断,因为“对于绝对定位的元素,其包含的块基于块级元素,百分比是根据该元素的填充框的高度计算的。这与CSS1有所不同,CSS1始终根据父元素的内容框计算百分比。”

<body>

<style type="text/css">
html, body {
    height: 100%;
}

div#wrapper {
    height: 100%;   
}

div#content-wrap {
    height: auto;
}

div#wrapper-upper-half {
    height: 50%;    
    background-color:aqua;
}

div#wrapper-lower-half {
    height: 50%;    
    background-color:fuchsia;
}

</style>

<div id="wrapper">
    <div id="wrapper-upper-half">   
    </div>

    <div id="content">
    </div>

    <div id="wrapper-lower-half">   
    </div>  
</div>

</body>