提升效率或体验的css #94
Labels
Comments
display:contents元素不参与布局，这对于 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
{{ message }}
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
然后在希望显示鼠标样式的节点上，比如
document.body上添加需要显示的鼠标样式和这个global-cursor，如这样鼠标在
body内部无论移到哪个节点上，都会显示move样式子节点的鼠标设置不能加!important哦
touch-action
移动端设置触摸行为，比如在触摸某个容器时，禁止滚动等行为，则可以设置为
{touch-action:none}The text was updated successfully, but these errors were encountered: