提升效率或体验的css

xinglie commented 2 years ago

inset

如果你有这样的样式.full{position:fixed;left:0;top:0;right:0;bottom:0}现在可写成.full{position:fixed;inset:0}

overscroll-behavior

如果你有层叠的滚动容器，如果只想让用户滚动顶层的容器，即使滚动到顶部或底部也不触发底层容器的滚动，则可以使用{overscroll-behavior: contain;}

scrollbar-gutter

如果你对容器设置overflow:auto，容器在出现和不现出滚动条时，通常会影响容器内的内容布局(常见于window系统)，可以使用{scrollbar-gutter: stable}让浏览器始终保留滚动条的位置，它比{overflow:scroll}的好处是，如果不需要滚动条，不显示滚动条，仅保留位置，而overflow:scroll始终显示滚动条，即使不能滚动。

contain-paint

能隔离、提升一定性能的样式，具体使用可搜索一下

pointer-events

如果元素不响应任何事件，仅展示，那么通过添加{pointer-events:none}可提升性能

all

如果你在做一个带界面的插件放在别人的页面中使用，而插件自身又不想受到外界的样式继承干扰，则可以在插件的根节点上添加样式{all:initial}把所有继承的样式恢复到默认值，这样插件自身的界面就不会受宿主页面的影响了。

全局鼠标样式

有时候我们做一些前端展示时，比如拖动，希望在按下拖动时，鼠标移到页面上任意位置都是拖动的样式，则可以这样做。

先增加一个css

.global-cursor * {
    cursor: inherit!important;
}

然后在希望显示鼠标样式的节点上，比如document.body上添加需要显示的鼠标样式和这个global-cursor，如

<body class="global-cursor" style="cursor:move">
</body>

这样鼠标在body内部无论移到哪个节点上，都会显示move样式 子节点的鼠标设置不能加!important哦

touch-action

移动端设置触摸行为，比如在触摸某个容器时，禁止滚动等行为，则可以设置为{touch-action:none}

不定时补充

xinglie commented 2 years ago

display:contents

元素不参与布局，这对于magix项目中，因为有根节点，有时候不想根节点参与界面布局时非常有用

xinglie commented 2 years ago

https://segmentfault.com/a/1190000041209570

xinglie / xinglie.github.io