CSS-那些不了解的CSS属性

1017人浏览 2023-10-23 14:48:23

CSS硬件加速

作用

CSS硬件加速就是浏览器中用css开启硬件加速，使GPU (Graphics Processing Unit) 发挥功能，从而将浏览器的渲染过程交给GPU处理，而不是使用自带的比较慢的渲染器。这样就可以使得animation与transition更加顺畅。

兼容性

Chrome, FireFox, Safari, IE9+ 以及最新的 Opera都支持硬件加速

开启方法

- webkit-transform: translateZ(0);
- moz-transform: translateZ(0);
- ms-transform: translateZ(0);
- o-transform: translateZ(0);
- transform: translateZ(0);

示例

-webkit-overflow-scrolling: touch
通过开启硬件加速解决了某些页面在IOS上滑动不流畅的问题
注意事项

硬件加速最好只用在animation或者transform上，如果滥用反而会使动画变得更加卡，这样就得不偿失

text-transform

作用

在进行输入的时候，有些特殊的场景需要控制输入变量的大小写，通常我是使用JS来进行相应的操作。但是text-transform为我们提供了一个CSS解决问题的方法，他能控制首字母大写、全部大写或者全部小写。

属性

text-transform
- capitalize 首字母大写
- lowercase 全部小写
- uppercase 全部大写

兼容性

所有浏览器都支持该属性

direction

作用

改变排列顺序，例如当一个弹出确认框需要更好的兼容移动端的使用，我们需要将确认和取消两个按钮更换位置，但是当页面是在桌面端使用时，我们又不需要更换两者的位置，这个时候通常是需要通过JS来满足我们的需求。但是这个时候我们可以通过media来判断当前屏幕大小并且通过direction来满足我们的需求

属性

direction
- ltr 默认值，表示left-to-right
- rtl 表示right-to-left

兼容性

Chrome2.0+
FireFox任意版本
Safari1.3+
IE5.5+
Android任意版本
IOS3.1+

补充

direction参数只能满足图片或者按钮的排列顺序，但是如果我们需要改变字符的内容的排列顺序时候，似乎起不到我们想要的效果，这个时候就可以通过unicode-bidi来达到我们的需求
unicode-bidi
- normal 默认值，正常排列
- embed 内联元素按照direction的设置进行排列，只能作用于内联元素
- bidi-override 强制所以的字符按照direction的设置进行排列

writing-mode

作用

实现文字竖向排列

属性

writing-mode
- lr-tb | tb-rl | tb-lr (IE8+)
- horizontal-tb | vertical-rl | vertical-lr 
- 分别对应值
- IE私有属性
- lr-tb 内容从左往右，从上往下
- tb-rl 内容从上往下，从右往左
- tb-lr 内容从上往下，从左往右
- CSS3语法
- horizontal-tb 默认值 
- vertical-rl 垂直展示，阅读顺序从右往左
- vertical-lr 垂直展示，阅读顺序从左往右