共找到7篇关于主题:css 的文章

css 多语言 伪类(pseudo-class) lang

2022-02-201分钟阅读

背景 近期项目国际化中, 需要根据语言使用不同的代码样式, 例如引号,句式,排版等。 使用 语言标签可以通过 meta 标签引入 也可以通过 优先级规则和 css 保持一致 css 中获取 总结 css lang 伪类能解决一部分 js 需要做的逻辑判定问题, 减少代码复杂度。 但是 lang 无法解决所有问题,有时候还是需要应用 js 处理一些内容和布局问题。 css-in-js 方案更适合灵活页面,推荐 styled-components 可以把 css 变量变为 js…

overscroll禁用过度滚动

2021-10-011分钟阅读

背景 mac 系统或者 ios 浏览器均有过度滚动(弹性滚动)的情况,后续所有的系统均支持了弹性滚动, 本文探讨如何禁用此特性 非 safari 浏览器 通过使用 禁用弹性滚动. 除 safari 外,所有的浏览器均支持(不支持的浏览器本身也不支持弹性滚动) safari safari 滚动只作用于 , 元素, 仅需禁止其滚动, 然后让其子元素滚动。 结论 综上,需要彻底解决问题 假设 html 如下 那么需要设置 css 为如下 Reference can i use…

flex-box text-overflow 注意事项

2021-04-301分钟阅读

css text-overflow中与block中使用方式略有不同, 此处记录下。 背景 文本无法overflow本质原因是flex布局下子元素非直接文本导致, 如果直接文本和普通block没有区别。 以上能正常 但是, 若flex下存在子元素如下 解决方案 使用 Reference issue produce

css flexbox flex-end scroll-x not working

2021-03-201分钟阅读

背景 在移动设备中, 右对齐弹性布局 会导致水平滚动失效。可以通过如下方式修复 不使用,用替代 另外可以通过设置 direction: rtl 实现, 但实际不实用 Reference overflow-auto-not-working-with-justify-content-flex-end

css touch-action 应用

2021-02-181分钟阅读

在触摸设备中滚动和 touch 其实是同时触发的,这在实际编程中带来了很多不便。css 中用于控制触控的行为 usage none 禁用所有的手势操作, 由开发者自己控制滚动。 常用于在移动设备中实现拖拽能力 或者 事件中默认无法通过使用 e.preventDefault() 禁用滚动,必须设置此 css 才可以解决, 详见 auto 默认值 reference scrolling-intervention

ios输入框无法聚焦focus

2020-08-311分钟阅读

问题描述 今天突然发现所有 input 输入框无法输入, 初步排查原因是会自动失去焦点 原因 添加了 user-select 的样式 ios 若改值设为 user-select: none; 那么会导致无法选中的情况。 android 没有问题 方案 重新设置 css Reference input-field-ios-safari-bug-cant-type-in-any-text webkit-issue

Css in Js 之 styled-components

2018-12-136分钟阅读

背景 css-in-js 在 react 中非常流行, 本文主要介绍如下几种,基本能覆盖当前前端环境下主流 css-in-js 方案 css-modules styled-components jss radium css-in-js 优势 所有的样式全部组件化, 符合 react 的设计思维 使用 js 代替其他预处理工具, 充分发挥 js 的能力。 避免全局变量样式冲突 code split css 代码分割能够按照 js 逻辑分割,不需要编写额外的 css…