CSS的隐藏特性[关闭]答案

【问题标题】：Hidden features of CSS [closed]CSS的隐藏特性[关闭]
【发布时间】：2010-10-12 07:41:24
【问题描述】：

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

所以这是一个涵盖 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 
}

这些并没有那么多隐藏，但它们的使用并不经常广泛。您在 CSS 中发现了哪些技巧、窍门和稀有特性？

【问题讨论】：

为什么不添加border-radius: 10px;对于支持 CSS3 的浏览器？
@Ólafur Waage：s/behaviour/behavior/ 是怎么回事？行为与行为一样正确，因为它是皇后区英语，所以更是如此。
@charset 规则必须在文件的第一行。
对于“隐藏功能”问题，接受的答案意味着什么？是不是最隐蔽的功能？
@X-Istence - ahem 女王的英语（注意撇号）

标签： css hidden-features

【解决方案1】：

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

head, title {
    display: block;
}

【讨论】：

这是独一无二的。我认为没有一个元素是可渲染的。
奇怪的是，它也适用于
@Danko Durbić：当然，它们也只是 DOM 中的元素。
这是我非常喜欢的东西，.el{background: red;position:absolute;top:0;left:0;right:0;bottom:0;}

【解决方案2】：

将多个样式/类应用于像 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>

【讨论】：

为什么我认为你只能用两个类来做到这一点.....
还要注意.bold.red {}和.bold .red {}之间的细微差别...
如果多个类具有冲突的属性（例如，如果 .red 和 .GoldBg 都指定了 color 属性），则适用 CSS 特异性规则； class="..." 属性中的类顺序无关紧要。
请注意 IE6 不支持多个类，并且只会应用最后一个类 - 在本例中为 GoldBg。
但如果可以的话，尽量避免命名像“.red”这样的类。有一天，客户希望所有的红色文本都变成蓝色，而现在您已经让所有必须接触该代码的开发人员感到困惑。

【解决方案3】：

我真的很喜欢 CSS 精灵。

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

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

【讨论】：

您还可以将精灵用于 javascript 控制的动画。只需循环通过 setInterval 等上的精灵。
来自 Matthew Lock 的好建议 - 该建议的好处是您只需更改图像的位置，而不是图像的来源 - 因此整个动画不需要预加载设置。
jQuery UI 在他们的框架图标主题中使用了这个jqueryui.com/themeroller
与其说是一种功能，不如说是一种设计模式。

【解决方案4】：

float父元素会导致它扩展以包含其所有floated 子元素。

【讨论】：

知道这个但非常方便。也不要忘记，如果这不是一个选项，你可以使用溢出属性而不诉诸丑陋的清除 div。
我不知道为什么每个人都使用带有 clear 的 div，我认为 br 是一个在语义上更相关的元素，我会认为带有 clear 的 br 不那么难看浮动一切，无论它是否需要它
@Matt 我相信使用overflow: hidden 更加语义化 - 为什么要引入一个仅用于修复布局的元素？

【解决方案5】：

也许负边距和相对定位元素中的绝对定位元素。

有关示例，请参阅 How would YOU do this with CSS?。

【讨论】：

愿意解释一下吗？也请维基它

【解决方案6】：

您可以通过同时指定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;
}

【讨论】：

我不相信这在 IE 中有效。
我认为一直支持到 IE5.5
绝对位置永远不是灵活布局的首选。
并没有像您期望的那样工作；它也是地狱般的越野车。例如，IE6 会为之后的内容留下工件。
您可能需要将其放在relatively 定位的元素中。

【解决方案7】：

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

【讨论】：

主流浏览器对这个有多少支持？
@Shawn：基于 WebKit 的浏览器（Safari + Chrome）、Firefox 3.1+（我认为）和 Opera 10.5。所以它非常普遍，除了 IE——一如既往。 :)
您可以使用专有的 IE“过滤器：”进行转换，就像以前对透明 PNG 所做的那样。虽然 IE 变换/旋转参数需要一些基本的三角函数计算。标准令人讨厌的“过滤器：”错误仍然适用。
啊哈哈哈，刚刚旋转了这个文本块！玩得很尽兴。打算写一个greasemonkey脚本来惹人。

【解决方案8】：

我的是：

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

【讨论】：

【解决方案9】：

不是一个真正的功能，但仍然有用：子选择器适用于除 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>

这是list of selectors（用于 CSS2）和browser compatibility chart。

【讨论】：

我很确定子选择器是一项功能。 =]
它们是一项功能，但您可以使用它们来隔离 IE6 的事实更像是一种技巧。

【解决方案10】：

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

text-rendering: optimizeLegibility;

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

【讨论】：

它让中文字符在某些浏览器/系统上看起来很糟糕
这是一个 SVG 属性，这些浏览器恰好支持 HTML 元素。

【解决方案11】：

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 Cross browser

.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 ;

【讨论】：

outline: 0; 不要这样做！ outlinenone.com
每当我看到 w3schools 链接时，我都会畏缩

【解决方案12】：

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

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

overflow: auto 表示如果内容不适合 div，将根据需要显示水平和/或垂直滚动条。

overflow: scroll 表示两个滚动条都将始终存在。如果您只想始终显示一个滚动条，请使用 overflow-x 或 overflow-y（现代浏览器和 IE6 都支持）。

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

【讨论】：

当心，我最近发现 iPad（可能还有 iPhone 和 iPod）不支持此功能，我的意思是它不显示滚动条并切断您的内容。
iOS，或者更准确地说，移动 Safari 支持这一点就好了。但是，他们不做的是显示滚动条。你必须用两个手指滚动。所以，并不总是直观的。不知道为什么苹果会做出这个决定。
@John iOS 5 之前的版本让你用两根手指滚动溢出：滚动内容，但你可以使用iScroll 4 来解决这个问题。然而，iOS 5 不需要该脚本，而是在本地完成所有这些。广告@m

【解决方案13】：

:before 和 :after 伪元素

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

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

【讨论】：

【解决方案14】：

与其说是隐藏的功能，不如说是一个以CSS tips which every beginning developer should know about为特色的问题

【讨论】：

【解决方案15】：

内联块（浮动 div 的替代品）：

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

不要将这个类应用到 div！它不起作用！将其应用于跨度（或内联元素）

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

【讨论】：

IE6 只支持内联元素，对吗？
不确定哪个浏览器支持或不支持 div，但这就是为什么我说它在 div 上不起作用！
为什么不支持div？一个 div 是一个带有 display: 块的 span（但可能有浏览器或作者样式表的额外样式）。
你不知道浏览器对我们有什么好处吗？它不适用于具有块显示、在线内联元素的元素。
@strager 虽然你是对的，但不要低估 IE 对标准的实施（或缺乏）

【解决方案16】：

内联@media 分配：

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

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

【讨论】：

【解决方案17】：

我们可以将样式标签显示为块元素并使用 HTML5 contenteditable 属性动态编辑 CSS。 Demo Here.

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

       </style>
   </body>

致谢：CSS-Tricks

【讨论】：

值得注意的是，这在 IE 中不起作用——参见：msdn.microsoft.com/en-us/library/ms537837(v=vs.85).aspx
我不会依赖它在任何地方工作。它是一种无效的 HTML，特别被黑客使用。

【解决方案18】：

并不是真正的“隐藏”，但了解盒子模型和定位模型会有很大帮助。

例如，知道position: absolute 元素的定位相对于其第一个父元素，该父元素的样式为position: relative。

【讨论】：

不，它是相对于最近的父级定位的，any 'position:' 不是默认值，'static'
@Gareth - 几乎，“固定”也不算数
@annakata：你确定吗？我只是快速尝试了一下，绝对 div 位于它的父级内 - 一个固定的 div。我添加了另一个具有相同规格但没有父级的绝对 div（好吧，body 将是它的默认父级），并且它的位置与固定内部的不同 - 即它位于页面底部。所以我假设绝对内部固定的作品。

【解决方案19】：

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

【讨论】：

【解决方案20】：

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

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

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

【讨论】：

此链接已失效。
@GeorgeEdison：你是对的。我将尝试寻找替代来源来展示示例。

【解决方案21】：

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

word-wrap: break-word;

【讨论】：

【解决方案22】：

另一个 IE6 选择器

* html .something
{
  color:red;
}

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

【讨论】：

注意缩放不会验证...如果这对您很重要，请尝试 height: 1% 或类似触发 hasLayout

【解决方案23】：

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

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

【讨论】：

这仅适用于 IE6/7 中默认内联的元素，对吗？
在DIV上工作，这是一个块元素。

【解决方案24】：

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

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

适用于标准浏览器，包括 Firefox 2，并且：

.ie_lte7 .column { display:inline; }

【讨论】：

【解决方案25】：

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

【讨论】：

【解决方案26】：

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

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

【讨论】：

浏览器破解 aern't 功能？哦，好吧，还是有用的！
最好使用条件注释quirksmode.org/css/condcom.html 为 IE6 和 IE7 添加单独的样式表，而不是依赖渲染引擎错误。
这是一个非常糟糕的做法。听@Tom ;)
浏览器黑客不是功能。它们是错误。
更好的是，使用 Paul Irish 的甜蜜方法：paulirish.com/2008/…

【解决方案27】：

border-radius 是 CSS3 规范的一部分。由于 CSS3 还没有完全完成，因此更先进的浏览器同时使用自己的属性（-moz、-webkit）实现了其中的一部分。所以我们已经可以享受圆角，用纯 css 干净编码。

不幸的是，浏览器市场上的另一个大玩家仍然没有实现 css3 功能的迹象。

【讨论】：