logo标签列表

CSS的隐藏特性

csshidden-features
60

我在关于PHP和XHTML隐藏特性的问题中学到了一些有用的技巧。

这里有一个关于CSS的问题。虽然CSS容易上手，但是要学习所有东西、默认行为、属性等需要一点时间。

以下是一些开端：

@charset "UTF-8"; /* set the character set. must be first line as Gumbo points out in comments */

.element {
        /* takes precedence over other stylings */
        display: block !important;

        /* mozilla .... rounded corners with no images */
        -moz-border-radius: 10px; 

        /* webkit equivalent */
        -webkit-border-radius: 10px 
}

这些并不是非常隐秘（hidden），但它们的使用通常不是很广泛。你发现了哪些CSS的技巧、诀窍和罕见功能呢？

3
为什么不在支持CSS3的浏览器中添加border-radius: 10px;？ - Paul Dixon
3
@Ólafur Waage: s/behaviour/behavior/是什么意思？"Behavior"和"behaviour"都是正确的用词，但由于"behaviour"是女王英语，因此更为准确。请问您怎么看？ - X-Istence
1
以 - 开头的属性是特定于供应商的。浏览器可以完全忽略它们而仍然符合标准。 - strager
2
“隐藏功能”问题中的被接受答案是什么意思？它是最隐蔽的功能吗？ - Oskar
2
@X-Istence - 咳咳 英格兰女王的英语（请注意撇号） - K Prime
显示剩余14条评论
27个回答
58

你可以显示文档的title元素：

head, title {
    display: block;
}
1
我认为没有一个<head>元素是可渲染的。 - hndcrftd
奇怪的是，它也可以在<style>和<script>中工作（至少在Firefox中）。 - Danko Durbić
1
@Danko Durbić：当然，它们也只是DOM中的元素。 - Gumbo
这是我非常喜欢的东西，.el{background: red;position:absolute;top:0;left:0;right:0;bottom:0;} - Val
39

像这样为元素应用多个样式/类：class="bold red GoldBg"

<html><head>
<style>
.bold {font-weight:bold}
.red {color:red}
.GoldBg {background-color:gold}
</style>
</head><body>
<p class="bold red GoldBg">Foo.Bar(red)</p>
</body></html>
3
为什么我假设你只能用两个班级来完成这个任务…… - Omar
6
请注意 .bold.red {} 和 .bold .red {} 之间微妙的区别... - Ates Goral
2
如果多个类具有冲突的属性（例如，如果.red和.GoldBg都指定了color属性），则CSS特异性规则适用； class =“ ...”属性中类的顺序不应该有影响。 - ide
4
请注意，IE6不支持多个类，并且仅会应用最后一个类 - 在这种情况下是GoldBg。 - ajcw
3
尽可能避免使用类似'.red'这样的命名方式。因为有一天客户会要求将所有红色文本变成蓝色，这时你就会让每个后续需要处理这段代码的开发者感到困惑。 - DA.
显示剩余2条评论
38

我非常喜欢CSS Sprites。

相比于为网站上的所有按钮和标志使用20张图片（因此每个图片都需要进行http请求，导致响应延迟），你只需要使用一张图片，然后每次调整其位置，以便只显示你想要的部分。

很难提供一个例子，因为您需要查看组件图像和定位CSS。但我在这里博客中介绍了谷歌对它的使用：http://www.stevefenton.co.uk/Content/Blog/Date/200905/Blog/Google-Uses-Image-Sprites/

4
您也可以使用CSS雪碧图实现由JavaScript控制的动画。只需在setInterval等函数中循环遍历雪碧图即可。 - Matthew Lock
1
Matthew Lock提出的建议很好 - 这个建议的好处是你只需要改变图像的位置，而不是图像的源 - 因此在整个动画集上预加载是不必要的。 - Fenton
jQuery UI 在他们的主题中使用这个框架图标 http://jqueryui.com/themeroller/ - serialk
不是一个特性，而是一种设计模式。 - Yahel
25

浮动父元素会导致其扩展以包含所有浮动子元素的事实。

2
知道这个，但非常方便。另外不要忘记，如果那不是一个选项，你可以使用溢出属性而不必诉诸于丑陋的清除div。 - alex
1
我不知道为什么每个人都使用带有clear的div，我认为br是一个更具语义相关性的元素，我会考虑在br上加上clear而不是浮动所有东西，无论它是否需要。 - Matt Briggs
1
@Matt，我认为使用overflow: hidden更具语义性——为什么要引入一个仅用于修复布局的元素呢？ - alex
23

通过同时指定 left 和 right 属性，您可以为绝对定位的元素设置可变宽度。这比仅将 width 设置为百分比更具控制性。

例如：

#myElement {
    position: absolute;
    left: 5px;
    right: 10px;
}

另一种示例

#myElement{ /* fill up the whole space :) */
   background: red;
   position:absolute;
   left: 0;
   right:0;
   top: 0;
   bottom: 0;
}
2
我不相信这在 IE 中可行。 - MiffTheFox
3
我认为这个功能一直支持到IE5.5。 - Arve Systad
灵活布局中绝对定位从不是首选。 - Zain Shaikh
并不像你期望的那样有效，而且有很多漏洞。例如，IE6会在内容后留下痕迹。 - srcspider
你可能需要把它放在一个相对定位的元素中。 - Halil Özgür
23

也许涉及到 负边距(negative margins) 和 相对定位元素中的绝对定位元素(absolute positioned elements in relative positioned elements)。

请参考如何使用CSS实现此效果以获取示例。

2
介意详细解释一下吗？同时请查阅维基百科。 - hasen
21

查看Webkit CSS变换，例如 -webkit-transform: rotate(9deg);

示例

跨主要浏览器对此的支持程度有多少？ - Shawn
1
@Shawn：基于WebKit的浏览器（Safari + Chrome），Firefox 3.1+（我想是这样），以及Opera 10.5。因此，它相当普遍，除了IE - 像往常一样。 :) - Sasha Chedygov
你可以使用专有的IE“filter:”来进行转换，就像你以前对透明PNG所做的那样。虽然IE的变换/旋转参数需要一些基本的三角函数计算，但标准的令人讨厌的“filter:”错误仍然适用。 - Jon Adams
1
啊哈哈哈，刚刚旋转了这个文本块！太有趣了。我要写一个Greasemonkey脚本来捉弄人们。 - George Mauer
15

虽然不是一个功能，但仍然很有用：子选择器在除了IE6之外的所有浏览器中都可以使用，这使得你可以在不使用hack、条件样式表或使代码无效的情况下隔离IE6。因此，以下代码中链接在IE6中将是红色，在其他所有浏览器中将是蓝色。

CSS

/*Red for IE6*/
.link {color:#F00;}
/*Blue for everything else*/
#content>.link {color:#00F;}

HTML

<div id="content">
    <a class="link" href="#">Link</a>
</div>

这里有一个选择器列表（适用于CSS2）和一个浏览器兼容性表格。

我非常确定子选择器是一项功能。 =] - strager
4
它们本身就是一种特性，但你可以利用它们来隔离IE6，这更像是一个技巧。 - VirtuosiMedia
15

上个星期我发现了一个非常有用的CSS属性，这是我以前从未听说过的：

text-rendering: optimizeLegibility;

Safari、Chrome 和 Firefox 都支持此属性，设置后可启用高级字距和连字。这里有一个很棒的演示。

2
它会使一些浏览器/系统中的中文字符看起来很糟糕。 - hasen
1
这是一个SVG属性，那些浏览器碰巧支持HTML元素。 - Alex Barrett
15

我的选择是：

  • 声音样式表中的所有属性，如 方位角，音高 等。
  • 打印模块的一些属性，比如 page-break-after: avoid;
  • counter-increment: section 1;
  • border-collapse: collapse;
  • background-color: transparent;
  • outline: 1px solid...
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接