CSS 特殊实用属性说明

Des_bisous
449 阅读6分钟

一、防止 iPhone 在坚屏转向横屏时放大文字

    -webkit-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%;

它们的本职是用于 mobile 的，这属性现在的一般用处是防止 iPhone 在坚屏转向横屏时放大文字（注意，就算 viewport 设置了 maximum-scale=1.0 文字还是会放大的）。

而且 iPhone 和 iPad 的默认设定是不一样的：

  1. iPhone 默认设定 -webkit-text-size-adjust: auto;
  2. iPad 默认设定 -webkit-text-size-adjust: none;

所以iPad默认是不调节的。

此属性还支持百分比，这在当前的桌面版的 webkit 浏览器是不支持的，所以如果不想让 iPhone 横坚屏切换的时候调节文字，用 -webkit-text-size-adjust: 100%; 绝对不能用 -webkit-text-size-adjust: none; 这会导致仍然支持 -webkit-text-size-adjust: none;的桌面版的 webkit 浏览器无法人为放大文字大小，严重影响可用性。

二、自定义 iOS 可点击元素的半透明的灰色背景

    tap-highlight-color
    -webkit-tap-highlight-color

这个属性只用于 iOS (iPhone和iPad)。当你点击一个链接或者通过 Javascript 定义的可点击元素的时候，它就会出现一个半透明的灰色背景。要重设这个表现，你可以设置 -webkit-tap-highlight-color 为任何颜色，想要禁用这个高亮，设置颜色的 alpha 值为 0 即可。

三、禁止文本被选择

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

文本不能被选择

四、优化文本

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

  1. -webkit-font-smoothing none：对低像素的文本比较好 subpixel-antialiased：默认值 antialiased：抗锯齿很好

  2. -moz-osx-font-smoothing inherit：默认值 grayscale：这个属性也是更清晰的作用

五、可改变按钮和其他控件的外观

   webkit-appearance

改变按钮和其他控件的外观，使其类似于原生控件。 -webkit-appearance 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。 此属性非标准且渲染效果在不同浏览器下不同，有些属性值甚至不支持，请慎用。 参数值特别多

六、触摸并按住触摸目标时候可禁止或显示系统默认菜单

    -webkit-touch-callout: none

当你触摸并按住触摸目标时候，禁止或显示系统默认菜单。

-webkit-touch-callout 是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。

在iOS上，当你触摸并按住触摸的目标，比如一个链接，Safari浏览器将显示链接有关的系统默认菜单。

这个属性可以让你禁用系统默认菜单。

默认值： default；

  1. none：系统默认菜单被禁用；
  2. default：系统默认菜单不被禁用；

七、清浮动

.clearfix:after {
  display: block;
  content: '.';
  clear: both;
  visibility: hidden;
  height: 0;
  font-size: 0;
  line-height: 0;
}
.clearfix {*zoom:1;_height:1px}

清浮动作用

增加了 hack 的写法，用来识别不同版本的 IE 浏览器。

*后面的属性 IE6 IE7 能识别，IE8 IE9……都不能识别；

"_"后面的属性，只有 IE6 能识别，其他版本（IE7 8 9 更高级别）都不能识别

八、设置图像缩放算法

image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* Internet Explorer 7.0; default in IE8+ */

CSS 属性 image-rendering 用于设置图像缩放算法。

它适用于元素本身，适用于元素其他属性中的图像，也应用于子元素。

举个例子，如果有一张尺寸为 100×100px 的图片，但作者有意将尺寸设置为 200×200px（或50×50px），然后，图片便会根据 image-rendering 指定的算法，缩小或放大到新尺寸。

此属性对于未缩放的图像没有影响。

参数：

  • auto 自 Gecko 1.9 （Firefox 3.0）起，Gecko 使用双线性（bilinear）算法进行重新采样（高质量）。

  • smooth 应使用能最大化图像客观观感的算法来缩放图像。特别地，会“平滑”颜色的缩放算法是可以接受的，例如双线性插值。这适用于照片等类型的图像。

  • high-quality 与平滑相同，但偏好更高质量的缩放。 如果系统资源受到限制，在考虑降低哪些映像的质量以及降低到什么程度时，高质量的映像应该优先于其他值的映像。

  • crisp-edges 必须使用可有效保留对比度和图像中的边缘的算法来对图像进行缩放，并且，该算法既不会平滑颜色，又不会在处理过程中为图像引入模糊。 合适的算法包括最近邻居（nearest-neighbor）算法和其他非平滑缩放算法，比如 2×SaI 和 hqx-* 系列算法。此属性值适用于像素艺术作品，例如一些网页游戏中的图像。

  • pixelated 放大图像时, 使用最近邻居算法，因此，图像看着像是由大块像素组成的。缩小图像时，算法与 auto 相同。

-ms-interpolation-mode 是 IE 兼用 Api

持续更新中...

avatar
文章
阅读
粉丝