css - Hidden features of CSS

Question

I have definitely picked up some useful tips in the hidden features style questions concerning PHP and XHTML.

So here is one to cover CSS. While easy to pick up, it takes a little while to learn about everything, their default behaviors, properties etc

Here are some to start the ball

@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 
}

These are not so much hidden, but their use is not often widespread. What tips, tricks, rare features have you discovered with CSS?

score 58 · Accepted Answer

58

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

head, title {
    display: block;
}

于 2010-01-26T08:05:31.540 回答

score 39 · Accepted Answer

将多个样式/类应用于这样的元素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>

score 38 · Accepted Answer

我真的很喜欢 CSS 精灵。

您只需使用一张图片，每次都放置它，以便只有您想要的部分可见，而不是为您的所有网站按钮和徽标提供 20 个图像（因此需要 20 个 http 请求，每个请求都有延迟）。

很难发布示例，因为您需要查看组件图像和展示位置 CSS - 但我已经在博客中记录了 Google 对它的使用：http: //www.stevefenton.co.uk/Content/Blog/Date/ 200905/博客/Google-Uses-Image-Sprites/

score 25 · Accepted Answer

The fact that floating a parent element will cause it to expand to contain all of its floated children.

score 23 · Accepted Answer

Maybe negative margins and absolute positioned elements in relative positioned elements.

See How would YOU do this with CSS? for examples.

score 23 · Accepted Answer

You can set a variable width for an absolutely positioned element by specifying both left and right properties. This gives you more control than simply setting width to a percentage.

For example:

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

An alternative Example

#myElement{ /* fill up the whole space :) */
   background: red;
   position:absolute;
   left: 0;
   right:0;
   top: 0;
   bottom: 0;
}

score 21 · Accepted Answer

21

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

于 2009-10-24T12:55:52.393 回答

score 15 · Accepted Answer

上周我遇到了一个我从未听说过的非常有用的 CSS 属性：

text-rendering: optimizeLegibility;

Safari、Chrome 和 Firefox 都理解此属性，并在设置时启用高级字距调整和连字。这是一个很棒的演示。

score 15 · Accepted Answer

我的是：

听觉床单的所有属性，例如azimuth，pitch...
打印模块的一些属性，例如page-break-after: avoid;
counter-increment: section 1;
border-collapse: collapse;
background-color: transparent;
outline: 1px solid...

score 15 · Accepted Answer

不是一个真正的功能，但仍然有用：子选择器适用于除 IE6 之外的所有浏览器，允许您在不使用黑客或条件样式表或使您的代码无效的情况下隔离 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）和浏览器兼容性图表。

score 14 · Accepted Answer

IE6 中的透明 PNG 这修复了 IE6 中的 PNG 透明度。将背景设置为非并将图像包含在过滤器中。不需要任何 javascript 或 htc。

.whatever {
   background: none; /* Hide the current background image so you can replace it with the filter*/
   width: 500px; /* Must specify width */
   height: 176px; /* Must specify height */
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='vehicles.png');
}

在元素之后设置分页行为 - 跨浏览器

table {
   page-break-after:always
}

您可以始终使用属性，避免、自动、左、右、固有。在http://www.w3schools.com/CSS/pr_print_pageba.asp阅读文档

一种使用“Section 1”、“1.1”、“1.2”等对部分和子部分进行编号的方法 - 跨浏览器

h2:before 
{
   counter-increment:subsection;
   content:counter(section) "." counter(subsection) " ";
}

http://www.w3schools.com/CSS/pr_gen_counter-increment.asp

将表格边框折叠成单个边框或像标准 HTML 一样分离 - 跨浏览器

table
{
   border-collapse:collapse;
}

http://www.w3schools.com/css/pr_tab_border-collapse.asp

从按钮或输入字段中删除选择边框或虚线。还有其他很棒的用途 - 跨浏览器

button{
   outline:0;
}

http://www.w3schools.com/CSS/pr_outline.asp

* 用于 IE6 中 100% 高度的 html

* html .move{
   height:100%;
}

允许长单词中断并换行到下一行 - CSS3跨浏览器

.whatever {
   word-wrap:break-word;
}

http://www.w3schools.com/css3/css3_pr_word-wrap.asp

速记

前

font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif

后

font: 1em/1.5em bold italic serif;

前

background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;

后

background: #fff url(image.gif) no-repeat top left;

前

list-style: #fff;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(image.gif)

后

list-style: disc outside url(something.gif);

前

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px

后

margin:2px 1px 3px 4px; /*also works for padding*/
margin:0; /*You can also do this for all 0 borders*/
margin:2px 3px 5px; /*  you can do this for top 2px, left/right 3px, bottom 5px and ;

score 9 · Accepted Answer

您可以使用 CSS 的溢出属性创建滚动区域，而无需借助框架。例子：

div.foo {
    border:   1px solid;
    width:    300px;
    height:   300px;
    overflow: auto;
}

overflow: auto表示如果内容无法容纳在 div 中，将根据需要显示水平和/或垂直滚动条。

overflow: scroll意味着两个滚动条都将始终存在。如果您只希望始终存在一个滚动条，请使用overflow-xor overflow-y（现代浏览器和 IE6 都支持）。

你们中的一些人可能在想“duuuh”，但我很惊讶地发现滚动区域可以在没有框架的情况下创建。

score 8 · Accepted Answer

: before和:after伪元素

以下规则导致在每个 H1 元素之前生成字符串“Chapter:”：

H1:before { 
  content: "Chapter: ";
  display: inline;
}

更多信息，http://www.w3.org/TR/CSS2/generate.html

score 7 · Accepted Answer

Not so much hidden features, but a question featuring CSS tips which every beginning developer should know about

score 7 · Accepted Answer

内联块（替代浮动 div）：

.inline_block
{
    display:-moz-inline-box;
    display:inline-block;
}

不要将此类应用于 div！它行不通！将其应用于跨度（或内联元素）

<span class="inline_block">
</span>

score 7 · Accepted Answer

内联@media 作业：

/* Styles.css */
.foo { ... bar ... }
...
@media print{
    .ads{display:none}
}

这样您就可以摆脱另一个 HTTP 请求。

score 7 · Accepted Answer

我们可以将样式标签显示为块元素，并使用 HTML5 contenteditable属性动态编辑 CSS。演示在这里。

   <body>
       <style contenteditable>
           style {
            display: block;
           }
           body {
            background: #FEA;
           }

       </style>
   </body>

学分：CSS-技巧

score 6 · Accepted Answer

Not really "hidden", but understanding the box model and positioning model will help tremendously.

Like, knowing that a position: absolute element is positioned relative to its first parent that is styled with position: relative.

score 6 · Accepted Answer

6

目前仅适用于 WebKit 但非常有趣：CSS Animations

于 2009-03-09T23:50:52.270 回答

score 6 · Accepted Answer

我从来没有想过使用 css 'border' 属性可以制作不同形状的三角形。这是要走的链接，

（编辑） 以下链接不再起作用。 http://www.dinnermint.org/blog/css/creating-triangles-in-css/

从现在开始，您可以尝试以下方法， http://jonrohan.me/guide/css/creating-triangles-in-css/

score 5 · Accepted Answer

使用 css 可以轻松完成自动换行，无需任何服务器端技术的帮助。

word-wrap: break-word;

score 3 · Accepted Answer

另一个 IE6 选择器

* html .something
{
  color:red;
}

修复随机 IE6 渲染错误 - 应用 zoom:1 将触发布局。

score 3 · Accepted Answer

跨浏览器内联块使用组合声明处理块和内联元素：

.column { 
-moz-inline-box; -moz-box-orient:vertical; display:inline-block; vertical-align:top; 
}

适用于标准浏览器，包括 Firefox 2，以及：

.ie_lte7 .column { display:inline; }

score 3 · Accepted Answer

跨浏览器（IE6+、FF、Safari）float替代方案：

.inline-block {
    display: inline-block;
    display: -moz-inline-box;
    -moz-box-orient: vertical;
    vertical-align: top;
    zoom: 1;
    *display: inline; }

score 2 · Accepted Answer

我不知道这是否是一个隐藏的功能，但我只是惊叹于看到这个： http ://www.romancortes.com/blog/css-3d-meninas/

score 1 · Accepted Answer

.class {
/* red for chrome, ff, safari, opera */
background-color: red;
/* green for IE6 */
.background-color: green;
/* blue for IE7+ */
_background-color: blue;
}

将使您的 <whatever> 背景在这些浏览器类别中有所不同

score 0 · Accepted Answer

The border-radius stuff is part of the CSS3 specification. As CSS3 is still not completely finished the more progressive browsers in the meantime implement parts of it with their own properties (-moz, -webkit). So we can already enjoy rounded corners, cleanly coded in pure css.

Unfortunately the other big player in the browser market still shows no sign of implementing css3 features.

css - Hidden features of CSS

27 回答 27

速记

Related

Reference