我问了一群设计师他们认为 CSS 需要哪些改变。
Wolfgang Bartelme
Bartelme Design
Bartelme Design 的设计师我很想看到跨浏览器支持渐变、阴影、不透明度蒙版和圆角。我认为这不仅会显著减少带宽,而且还会加快生产和定制速度。
Jon Hicks
hicksdesign
hicksdesign 的设计师我想要一个不同的盒子模型!我觉得填充和边框会增加对象宽度很奇怪,我希望能够给 textarea 设置 100% 宽度和 3px 填充,而不用担心它会对布局造成什么影响。也许可以像 padding-inside 一样添加一个新的选择器?
同理,我希望能够为元素指定 100% 宽度,减去一个固定的宽度。同样,在使用表单元素创建流式设计时非常有用!
Andy Budd
AndyBudd.com
作者和 Web 标准先驱:我想要的大部分东西都在 CSS3 中,所以我真正想要的是核心模块的完成,并至少由两个浏览器厂商完全实现。
David Walsh
David Walsh Blog
Web 开发博客作者:我认为我们一直忍受着缺乏字体功能是一种罪过。我们使用非标准 Web 字体的其他选择,比如 sIFR 和利用图像,既痛苦又限制了 Web 的创造力。我也认为必须添加标准的圆角属性——我们都厌倦了创建圆角图像和浏览器特定的 hack 来实现我们的目标。最后,我希望 CSS 能在浏览器中更快地实现。过去几年我们几乎没有进步。
Collis Ta'eed
Envato, 主页
企业家、博主、Envato 的设计师,我对 CSS 的最大问题是,对于大型网站来说,它变得非常笨拙。在像 FlashDen 这样的网站上,CSS 会占用很多空间,然后我需要另外一组样式表来应用于访问网站替代版本(ThemeForest 或 AudioJungle)的用户。即使有最好的意愿,它也非常混乱。
我希望 CSS 中能够有像面向对象编程中的继承概念。这样你就可以这样写
.button { /* some styles */ } .button >> .sidebar_button { /* inherits all of .button and adds new styles */ }
我知道我现在可以这样定义它
.button, .sidebar_button { /* some styles */ } .sidebar_button { /* inherits all of .button and adds new styles */ }
但不知何故,这似乎不是一种优雅的方式。如果第一个和第二个定义恰好被一大块其他 CSS 代码隔开,当你之后再回来查看 CSS 时,你无法知道 .sidebar_button 是否还附带了一些其他的样式。而上面的继承版本,你可以读出它派生自 .button。
Keith Robinson
Blue Flavor, 主页
Blue Flavor 的创意总监,我希望 CSS 可以像我们现在使用 sIFR 一样处理嵌入字体,
Shaun Inman
Mint, 主页
Mint 的设计师/开发者,关键是,再添加一个半成品、拼凑的权宜之计不会以任何有意义的方式改善 CSS——只会加剧其设计中的根本缺陷。CSS 感觉像是你在 90 年代后期的桌面出版应用程序中会遇到的样式表实现。它仍然非常以文本为中心。样式表根本不是为创建复杂布局而设计的。CSS 的布局功能是附加的——10 年后,它确实显得很明显。
我很想看到 CSS 文本模块由经验丰富的排版师和排版员重写,以及 CSS 布局模块由经验丰富的出版物设计师重写,包括传统和新式的设计师。
而且,如果可能的话,最好在 2022 年之前完成。
Jeffrey Jordan Way
NETTUTS 和 ThemeForest 博客,主页
编辑于我希望我们可以在样式表中分配变量。例如,如果可以将我选择的“蓝色”的十六进制值分配给名为“myBlue”的变量,而不是每次需要获取该值时都滚动到文档顶部,那将非常棒。
var myBlue = #191955; #someElement{ color: myBlue; }
这是一个已经被讨论到死的话题,说实话,这可能是一个坏主意。我仍然不确定。在这样的讨论中,我可能会左右摇摆。一旦你打开了这扇门,你就会失去 CSS 的整个概念。但是,我认为如果负责任地使用,分配变量潜在地可以为我们节省大量的设计时间。
Steven Vandelay
Vandelay 设计公司的设计师
使用 CSS 的一大好处是,通常有多种方法可以实现你想要实现的目标,但在某种程度上,我希望看到更多关于布局的标准化。
Andy Clarke
Stuff and Nonsense
作者、设计师和开发者:好吧,除了显而易见的事情(确保奥巴马当选、让我变得非常富有、给我泡一杯好茶)之外,我最希望 CSS 能做到的就是有更好的布局工具,让我可以创建丰富的、错综复杂的 设计,而无需在标记中添加表现形式的元素。CSS 工作组(我以前是成员)一直在努力开发这些布局工具。我希望在不久的将来,我们能看到浏览器制造商实现这些提案(使用-browser-扩展),这样设计师和开发人员就可以进行实验。
Chris Spooner
主页
SpoonGraphics 的设计师,当我被问到我希望 CSS 能做什么时,我首先想到的是多个背景、圆角、边框图像和不透明度,然后我想起来——这些都在 CSS3 的开发计划中!在这种情况下,我的 CSS 梦想正在成真,这就引出了一个问题:你希望浏览器能做些什么?
我希望有一种更简短的方法来轻松地创建具有等高侧边栏的二列或三列布局,而无需使用伪列方法。
Elliot Jay Stocks
主页
设计师、作家和演讲者,我希望 CSS 能原生支持条件语句,而无需使用像(出色的)Conditional-CSS 这样的变通方法。许多人认为浏览器检测本质上应该在样式表之外处理,但我用来处理 IE 特定代码的所有基于 HTML 的条件注释完全是为了调用“hack” CSS 文件。实现类似于我们用来定位基于 Gecko 或 WebKit 的浏览器的代码,对我来说将是一个非常受欢迎的补充。
Nick La
Web Designer Wall,N.Design Studio
设计师 –我希望 CSS 可以像 Photoshop 那样做图层样式,你可以在其中添加:内阴影、外发光、斜面和浮雕效果等。如果我们能有图层混合模式就更好了。
Jesse Bennett-Chamberlain
31Three 的设计师
我唯一想到的就是变量。我现在不太常直接接触代码,但是如果我需要,变量会非常方便。问问我我希望 Photoshop 能做什么,我就能给你一个更长的答案 :)
Volkan Görgülü
Web Deneyimleri
设计师 / 开发者 –我希望可以不用写
#sample h1, #sample h2, #sample h3 —> (又长又难看)
而是像这样写
#sample [h1, h2, h3] —> (简短而干净)
就可以完成工作 :)
另一个例子是
#sample a:link, #sample a:visited
#sample a [link, visited]
Veerle Pieters
Duoh!,博客
Duoh! 的设计师,我希望 CSS 能支持渐变边框,并且像 InDesign 或 Quark 一样简化透明度的使用。 适用于所有可能的物体、文字等。 更加简单和逻辑化的浮动元素方式。 最后,我们不必再等待 5 年才能使用 CSS 3。 我也希望 CSS 能发怒,如果某些浏览器不配合就惩罚它们 :)
Jonathan Snook
Sidebar Creative 的设计师/开发者,主页
我很想看到所有主流浏览器对 CSS3 特性的实现,比如多重背景、圆角和边框图像。 CSS 变换也很有用。 它们可能看起来很花哨,但有很多实际用途,比如数据表格中窄列的超长标题名称。 能够旋转元素可以改善设计,同时保持可访问性(并避免使用图片)。 我相信,五年后的环境将为我们提供现在无法享受的众多功能。
Eric Meyer
主页
Web 标准编写者和演讲者,强大的基于网格的布局。 我们现在还没有,但非常需要。 坦白说,我现在并不关心它是通过 CSS 还是其他新的语言实现的。
Cameron Moll
主页
设计师、演讲者、作者,首先,我希望 CSS 能回复我的邮件。
其次,我希望 CSS 能说服浏览器开发者,让他们合作并逐步引入现有的“未来”CSS 特性和提案,而不是等待完整的规范“正式”发布。
空想吗? 也许吧,尽管我认为第一个可能会在第二个之前发生。
Dan Rubin
Sidebar Creative 的用户体验总监,主页
我希望看到 W3C 邀请一位专业的排版师和书籍设计师来帮助制定规范的字体和版式部分。 就像罗伯特·布林赫斯特那样,既是专业的排版师,又是书籍设计师,这样规范的制定就会考虑到设计师的需求,而不是由程序员来决定。
在功能特性的角度上,我希望这能带来更好的排版控制,以及 web 版的“母版页”,这是印刷设计软件中的一个老标准。
Stephanie Sullivan
W3Conversions 的编码员、培训师、作家
除了创建等高列的圣杯问题(无需使用伪方法,同时支持 IE6 和 IE7 等浏览器)之外,我还希望看到一种方法,可以从元素的底部或右侧设置背景定位。 不,我的意思是不要将它们设置到底部或右侧,我们现在可以做到这一点。 我的意思是设置一个背景图片,它离底部或右侧有一定的距离,并保持特定值。 无法准确确定包含文本的元素的高度,因此将背景图片从顶部设置 350 像素会导致与元素底部相关的各种结果。 有一种可靠的方法可以在不添加非语义包装器的情况下,将背景图片设置在距离底部 20 像素的地方,这在某些情况下可能非常有用。
来自评论的一些好主意
- Andy Ford:
我希望看到一个“高度增量”属性。
本质上是让块级元素只以指定的“块”形式增加高度,而不是逐像素地增加。 - Tony Freixas:
GUI 应用程序可以访问丰富的布局工具,这些工具可以轻松地适应 Web 布局,但完全被忽视了。
布局绝对是完全可以重写的。 - Andy Pemberton:
CSS 需要一个更先进的“回退”支持模型。
现在,我们可以指定多个字体作为“回退”,但如果回退字体也需要一些负字间距呢?
关于:John Hicks 要求使用不同的盒子模型:你可以使用 CSS3 中的 box-sizing 属性来切换盒子模型。 一些浏览器直接支持它,其他浏览器则通过前缀/命名空间属性支持它,你甚至可以使用 Dean Edwards 的 IE7.js 在 IE6 中添加支持。
box-sizing: border-box | content-box;
浏览器特定的变体是 -moz-box-sizing、-ms-box-sizing 和 -webkit-box-sizing。
更多信息请访问这里
http://www.quirksmode.org/css/box.html
jason
许多人想要圆角的东西。 但当出现一种新的角落样式成为趋势时,我们会要求再次更改 CSS 规范吗? :)
不错的评论汇总!
希望在不久的将来看到很多评论。 funkyboy 说得对,但他们应该准备好应对未来的趋势! :P
我希望有继承、条件语句、变量等等。 一个问题是,这将使 CSS 不再是样式表。 所以,我们需要一种真正的语言来编写样式。 我们可以使用 Javascript 来做到这一点,但我真的很想看到一种替代方案。
我们可以拥有,但还没有(?)的是对显式子类别的支持(这与继承不同)。
.button { 父按钮样式 .child_button { 扩展子元素样式 } .submit_button { } 等等 }
如何实现旋转和翻转(垂直/水平)页面和背景上的图像的功能呢?
我能想到几种情况下可以用相同图片的不同方式。这样你就不用制作很多相同图片的变体了。
示例代码
img.splash { rotate: 30; }
img.splash2 { rotate: -270; }
.myDiv { background: url(/images/image1.jpg) no-repeat 0 0 flip-x 90; }
.myDiv2 { background: url(/images/image2.jpg) no-repeat 0 0 flip-y; }
我喜欢你的想法,沃尔坎!所有这些想法都很棒。尤其是变量。
看到每个人的意见真棒。但是克里斯,你没有写你的答案!:)
我希望看到一个“高度增量”属性。我不认为它会经常使用,但在你真正需要它的时候会很方便。我主要认为它在重复背景时会很有帮助。例如
.sidebar {
background: url(pic.png) repeat-y; /* 想象一个 20px 高的背景图片 */
height-increment: 20px;
}
如果 .sidebar 的高度由于内容的大小而为 216px,则“高度增量”将导致 .sidebar 增长到 220px。
正值将向上取整,负值将向下取整。
再说一次,这可能不是你每天都会使用的东西,但当你确实需要它的时候,它会非常方便。
@安东,
我本周刚和一位 CSS 开发人员聊天,告诉他我多么希望 CSS 可以做到你刚刚发布的内容。
来自所有这些设计师的绝佳想法。我同意列高度。当你想要一个侧边栏与包装器和其他所有内容的高度相同时,进行变通方法非常痛苦。非常令人沮丧。希望 CSS 可以成为网页界面设计师的工具,而不是它现在的样子。圆角、所有列等高、阴影、添加样式、字体、所有浏览器的一句话不透明度、继承(非常好的一个)、不同的盒子模型(也是一个非常好的一个。填充真的不需要增加宽度。)、跨浏览器支持和更新的、符合标准的浏览器(诅咒你,IE!!!)、以及所有不更新浏览器的人...也诅咒他们(嗯,IE6 用户。真的?!!!它已经超过 7 年了。过去 4 年发布了 2 个更新版本)!!!!放弃 IE,获得一个真正的浏览器。抱歉,这件事让我很生气。
就这样。
我已经阅读了关于 CSS 变量的讨论,但我认为真正需要变量的是 url() 函数。如果站点目录更改,更改 url 是我最讨厌使用 CSS 的事情。
我同意埃利奥特·杰伊·斯托克斯的观点,应该扩展条件 HTML 以针对更多浏览器。沃尔坎·戈格鲁鲁的建议也很不错。
能够使用 **color** 或 **colour** 会很棒,但现在不能向后兼容。
虽然我完全同意沃尔夫冈·巴特尔梅和戴维德·沃尔什,以及杰西·贝内特-钱伯林的变量想法是不可思议的。能够声明每个颜色的所有十六进制值,然后在以后使用变量会很棒。但我还想看到另一件事。
能够将图片应用于边框,就像我们通过 background 属性将图片添加到所有其他元素一样。
哦,还有允许 TR 元素使用 margin、padding 和 border。
那将是如此酷。
混合单位,例如 100%-30px; 我认识的很多开发者都想要这个。我们没有它是荒谬的。
摆脱级联 - 我应该能够定位其他对象并继承这些对象的属性,例如,div#two { color : div#one; }
摆脱级联 - 相对于其他对象定位,这样我就不必扭曲我的文档语义来实现视觉目标。例如,div#two { origin : div#one; top : 10px; left : 10px; }
变量。真正的变量,不仅仅是常量。
常量。
我们需要这些基本工具,这样我们才能做出自己的高级解决方案。我们不需要更多没有解决我们基本问题的高级解决方案(高级布局模块;我在看着你)。我愿意放弃像阴影这样的花哨图形效果,以获得更基本的有用东西。
哦,我完全同意埃利奥特·J·斯托克斯的观点。我们真的需要条件 CSS,今天我才不得不让 Opera 处于次优状态,因为它不支持 RGBA,我无法定位它来提供可读的替代方案。
既然变量已经被多次提议为一个选项,我的首选答案可能是一些更简单的,比如半透明的背景色覆盖,而不必使用 PNG。
是的!inner-padding: x; - 我希望我们能做到这一点,这让我很沮丧,因为我必须从容器的总宽度中减去填充。对更多字体的支持也会很棒。我也喜欢沃尔坎·戈格鲁鲁的建议。
非常有趣文章和回复!
更好的字体使用功能在我的清单上排名很高。
希望 CSS3 的东西能很快实现。它已经酝酿很久了。
如何实现更好的垂直对齐和高度选项。有些人已经提出了一些建议,比如多个列的高度等等。但如何实现垂直居中,也就是真正的 **居中**,而不是居中对象的左上角。这样就不会像添加负边距来将其推到适当位置,或者进行复杂的计算来确定中心位置那样麻烦。
@安东:完全正确,我也想过旋转。然后克里斯可以让他这个页面的底部“朋友”和“元”链接与那些标签对齐。:)
@funkboy:除了角和圆角,还有谁需要考虑其他角呢?狗耳角?:-P
@安东和@亚伦
你可以使用 -moz-transform (FF3.1) 和 -webkit-transform (Safari, Chrome) 来旋转。最近在一个项目中大量使用它们,而且很喜欢。
我认为我唯一想要的就是所有网页浏览器只支持 1 个 CSS 标准。没有扩展,没有黑客了。这将让我免受很多可怕的噩梦之苦。
这个清单既令人沮丧又令人兴奋。听到我自己的挫折被写出来很高兴。
@马特·威尔科克斯
非常正确。我认为 IE 中也有一个用于旋转的过滤器。但是这只能应用于元素,而不能应用于背景图片。
没有理由总是使用黑客,他们应该将其标准化。
@马特 - 我同意,从宽度中减去填充很愚蠢,而且经常不可能,尤其是在使用百分比时。但是,不需要 inner-padding 属性。填充定义上就是在边框内。请参阅我之前关于 box-sizing 属性的评论。它允许你切换盒子模型以按照你想要的方式工作,现在在所有主要浏览器引擎中都得到了很好的支持。
– 杰森
我 100% 支持良好的不透明度控制,但这需要浏览器中我还没有看到的一件事,即使是那些支持不透明度的浏览器;能够将不透明度增加到 100%。目前,如果你嵌套两个元素,并将外层元素的不透明度设置为 .5,则内层元素的最大不透明度为 .5。我们真的需要一个机制来将不透明度提高到 100%,这样我们就可以创建像围绕实心内容块的半透明边缘这样的效果。
对于 CSS 中的大多数关于变量的请求,我不同意。使用像 SASS 这样的预处理器。
另外,必须写 “var LABEL” 很蠢。CSS 不是 JavaScript,不应该需要不必要的冗长。它应该保持简洁(就像 SASS 一样)。
很高兴看到思想家们发表意见。感谢您分享!
除了安迪·克拉克,似乎没有人担心改进布局工具。我觉得很奇怪。
GUI 应用程序可以访问丰富的布局工具,这些工具可以轻松地应用于网页布局,但完全被忽略了。例如,早在 80 年代后期,一个名为 Motif 的 GUI 工具集(用于 X Windows)提供了一个表单管理器“小部件”。使用此工具,我可以将一块内容的左边缘附加到另一块内容的右边缘,其上边缘附加到另一块内容的下边缘,其下边缘附加到表单本身的底部。这些附件可以有偏移量。每个块都可以设置为固定大小或可调整大小。
人们使用 CSS 很难创建的某些布局,在 GUI 应用程序中很容易创建。即将推出的 CSS 布局工具(我听说过的那些,无论如何)似乎继续遵循忽视现有布局解决方案的传统。我对安迪认为这些将是最佳解决方案的信心不如他,除了为 CSS 编码人员提供工作保障之外。
这导致了我们希望能够添加跨浏览器 CSS 插件,就像我们为 Quicktime 和 Flash 添加插件一样。然后,我就可以获得我想要的 CSS 功能,而不必等待 CSS 委员会或浏览器开发人员。一些 CSS 功能最终将成为标准,因为它们在现实世界中的成功,而不是目前的做法,即先创建标准,然后实现它,并希望它能正常工作。
这些都是 CSS 未来技巧。继承、变量、分组似乎很酷的功能。希望在不久的将来看到它们。
我将添加一个我一直考虑正式化并向 w3 css 工作组提出的建议。
CSS 需要更高级的“回退”支持模型。例如,CSS2.1(以及据我所知,CSS3)有一个基本的模型来支持回退字体系列。
font-family:FirstChoice,SecondChoice,LastChoiceShouldBeGeneric;
现实世界中的例子
font-family: “Lucida Grande”, Garamond, “Times New Roman”, serif;
如果客户端机器不支持/无法使用 Lucida Grande,则此方法将回退支持 Garamond,依此类推。
这种方法的问题是,有时需要做的不仅仅是简单地将单个规则切换到“Garamond”,才能使第二个选择尽可能接近第一个选择。例如,也许添加额外的“letter-spacing:1px”将使第二个选择类似于第一个选择。
很高兴能够以通用方式为属性/值支持应用这种模式。
例子
if(supported){
font-family:”Some Crazy Rare Font”;
}else{
font-family:”2nd Choice Font”;
letter-spacing:1px;
}
这里的语法可能需要改进(认为类似于媒体查询语法会很好),但现在是美国东部时间晚上 9 点左右,一周工作很长。
这说得通吗?或者您认为此功能会有益吗?
在以上所有选项中,我真的很想拥有类似数组(a [link visited] { })、变量以及类似对象的东西。
var linkColor : #f60;
#maincontent {
p { margin: 20px 0; }
code { }
a [link visited] { color: linkColor; }
}
在这段代码中,p、code 和 a 仅在 #maincontent 中受到影响。
我喜欢看到所有主要浏览器都能轻松地进行旋转。
CSS 表格,不要害怕它们。
@Lauren
不得不用 PNG 实现半透明度,这并非浏览器的错,也不是 CSS 的错,而是格式本身的错。只有 PNG 支持 alpha 透明度,它可以实现半透明效果。
我想我将旋转也添加到我的愿望清单中,以及更好的字体支持和继承。
以及一个设置 opacity 属性,而不是为每个浏览器使用专有属性。
哦,最后,如果一个不兼容的浏览器遇到 CSS,它会自动更新为一个兼容的浏览器或更新的版本。我还希望 CSS 成为耶稣的第二次降临,给我们带来猪排。
我真的很想看到在 css 中实现变量。
关于 css 表格;sitepoint 很快就会出一本书,或者已经出版了。据我从某个地方读到的信息,这本书专门介绍 css 表格。
应该是一本有趣的读物,但我们仍然面临着 ie6 使用率仍然很高的挑战。
话虽如此,我肯定会开始尝试使用它们。
我喜欢 Volkan Görgülü 的想法。至于其他想法,大多数想法(例如圆角、变量、嵌入式字体)已经得到了一些浏览器的支持。我们只需要更好的跨兼容性(以及 CSS 表达式的性能)。“Photoshop 图层样式”是一个有趣的想法,但这会使浏览器像 Photoshop 一样。接下来是什么?Photoshop 滤镜?为什么不呢?(继承的想法完全错了)。
更正(该死的编辑按钮在哪里),实际上 IE 确实有 Photoshop 式的滤镜。
我希望在 CSS 中看到的一件事是居中或中间偏移。
我非常希望看到这些功能集成在一起,它们将使网络变得更加美好。
对 text-overflow:ellipsis 的跨浏览器支持,以便溢出的文本将被截断并显示为…
目前,IE 是唯一支持此功能的浏览器。
我喜欢 Jeffrey Jordan Way 的建议!我从未想过在 CSS 中使用变量。那真是太棒了,而且可以轻松地更新整个网站的颜色——尤其是在实时开发中!
另一个我想要看到的,虽然有点模糊,但它是一种实现内嵌边框的方法。也许是“border-inner”或“inner-border”属性。它类似于“border”,但可能看起来像这样
border-inner: 1px solid #ccc inset(4px);
所有这些都将非常有用。
也许还有一种更简单的方法,可以将文本围绕图像“沙袋化”。
也许可以像这样:
#element {
display: block;
width: 300px;
text-shape: url(images/mytextshape.png) 1.1em;
}
1.1em 可以表示形状外部的内部填充。
其中,png 可以是一个单色形状,浏览器会根据该形状格式化文本。不过,这可能需要一些处理!Safari 的遮罩功能能够做类似的事情吗?
当用户增加字体大小(并且文本与某种设计绑定在一起)时,这可能会出现问题。
Volkan 的观点非常棒!
15 位设计师评论他们希望 CSS 能做什么!
@Lauren 和 @Matt Z
您不需要 PNG 来实现半透明背景叠加。如果您指的是一种颜色,那么您可以在 Firefox 和 Webkit 中使用 RGBA(Opera 的支持将在下一个主要版本中提供)。
selector { background-color: rgba(255,255,255,0.5); }
令我惊讶的是,没有人提到任何类型的旋转。HTML 当前都是直角。内容上下流动,我们可以将东西浮动到左右。但我希望能够以一定角度旋转我的 div。因此,我非常希望看到
#angled-div {rotation: 45;}
这可能会将我的 div 顺时针旋转 45 度。这意味着我们将不得不为自定义设计使用更少的图像。这也意味着文本不必完全上下对齐。例如,在这个页面的页脚中,位于“朋友”或“元数据”图形下的 html 链接可以通过使用旋转元素来与图像的边缘布局对齐。
这是我一直思考的事情,令我惊讶的是,我从未在其他任何地方听到过有人提到它。
该死……所有(好吧,几乎所有)这些东西都会很棒。我的办公室里肯定会有更少的咒骂。
也许嵌套 CSS 在某些情况下会是一件好事。例如
ul#menu {
margin: 0;
li {
list-style: none;
a {
background: white;
}
a:hover {
background: black;
}
}
}
这将使执行以下操作变得更加容易
ul#menu
ul#menu li
ul#menu li a
ul#menu li a:hover
但是是的,我同意,这可能比通常的方式更令人困惑。
哦,不,wordpress 吃掉了我的缩进,现在它看起来太糟糕了!
难道没有人想要 CSS 中的字距调整吗?
支持标准是最重要的,但我的愿望清单中包括 CSS3 项目,例如圆角、渐变、多重背景等;非级联透明度(或打破级联);变量(或从另一个元素/选择器嵌套参数);display: image-replace 或更简洁的图像替换方法;甚至明确的浮动包装方式。简化新设计师、开发人员的学习曲线……
说到底,所有浏览器都使用一套标准化的规则是第一步。如果我知道旧的规则会被采用,我可以在很长一段时间内没有新的功能。
重复图像部分的背景 - 精灵。将所有需要的背景制作成一张图像,最终会减少带宽使用量。
background:url(images/bigImageSprite.png) -12px 0 0 -12;
很高兴在设计师中看到如此好的想法。
只是想到一个。如何对 CSS 属性进行分组,例如:
body{ margin,padding:0; }
h1{ font-style,font-weight:normal;}
不确定这在全局范围内的用处,但那些可以共享相同值的属性应该可以。
我只希望 CSS 能 **真正地** 被浏览器制造商实现,未来的发展至少 50% 由用户主导。
太多“标准”是公司为了保护自身利益而做出的妥协,阻碍了新兴事物的发展。
如果我有一个愿望清单:简单的变量、渐变、圆角、合理的盒模型、混合值(% - px)
要添加的提案,可在以下位置找到有关 CSS 变量的描述:http://www.css3.info/summary-of-the-two-current-css-constants-proposals/
提案 1
存在一种新的变量类型 - 图像变量,定义如下:
@define imag-vars{ imagevar1 { rect(20,30,40,50) url(http://www.example.com/images.image.jpg)} , imagevar2 { rect(60,70,80,90) url(http://www.example.com/images.image.jpg)}}
其中 rect(60,70,80,90) 是定义精灵图像上的图像的矩形(精灵 - 包含一组图像的图像)
之后,我们可以应用图像切片,如下所示:
background-image:var(imagevar1);
替代向 css3 添加 background-image-crop 的提案(我的意思是存在一种裁剪图像以作为背景的模式,类似于 clip:rect() 属性)
********************************************************************
提案 2
样式集的继承
而不是 @define style-sets { noteBox { border-style: solid; padding: 1em; border-radius: 1em; } quoteBox { margin: 1em; } }
为了应用继承,将重新定义如下:
@redefine style-sets { noteBox2{ noteBox { border-style: dashed; }}}
将与定义新的样式具有相同的结果,如下所示:
@define style-sets { noteBox2 { border-style: dashed; padding: 1em; border-radius: 1em; }}
我从这篇文章中得到的是“如果没有 IE,生活会多么美好?”
我非常希望跨浏览器支持指定样式,仅在同一个对象上有两个样式时应用。
例如,具有类 .button 的 div 也可以具有 .hover... 我认为这在 FF 中是可能的,但在 IE 中不行 :(
我希望有多个背景(哦,这可以为我节省多少标记...)我认为一个很棒的功能是我还没有见过的,那就是元素的增量高度。两者结合起来,也带来了一些很酷的可能性。