背景 近期项目国际化中， 需要根据语言使用不同的代码样式, 例如引号，句式，排版等。 使用 语言标签可以通过 meta 标签引入 也可以通过 优先级规则和 css 保持一致 css 中获取 总结 css lang 伪类能解决一部分 js 需要做的逻辑判定问题， 减少代码复杂度。 但是 lang 无法解决所有问题，有时候还是需要应用 js 处理一些内容和布局问题。 css-in-js 方案更适合灵活页面，推荐 styled-components 可以把 css 变量变为 js…
背景 mac 系统或者 ios 浏览器均有过度滚动(弹性滚动)的情况，后续所有的系统均支持了弹性滚动, 本文探讨如何禁用此特性 非 safari 浏览器 通过使用 禁用弹性滚动. 除 safari 外，所有的浏览器均支持(不支持的浏览器本身也不支持弹性滚动) safari safari 滚动只作用于 , 元素, 仅需禁止其滚动, 然后让其子元素滚动。 结论 综上，需要彻底解决问题 假设 html 如下 那么需要设置 css 为如下 Reference can i use…
css text-overflow中与block中使用方式略有不同， 此处记录下。 背景 文本无法overflow本质原因是flex布局下子元素非直接文本导致， 如果直接文本和普通block没有区别。 以上能正常 但是， 若flex下存在子元素如下 解决方案 使用 Reference issue produce
背景 在移动设备中， 右对齐弹性布局 会导致水平滚动失效。可以通过如下方式修复 不使用，用替代 另外可以通过设置 direction: rtl 实现， 但实际不实用 Reference overflow-auto-not-working-with-justify-content-flex-end
在触摸设备中滚动和 touch 其实是同时触发的，这在实际编程中带来了很多不便。css 中用于控制触控的行为 usage none 禁用所有的手势操作， 由开发者自己控制滚动。 常用于在移动设备中实现拖拽能力 或者 事件中默认无法通过使用 e.preventDefault() 禁用滚动，必须设置此 css 才可以解决， 详见 auto 默认值 reference scrolling-intervention
问题描述 今天突然发现所有 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 在 react 中非常流行, 本文主要介绍如下几种，基本能覆盖当前前端环境下主流 css-in-js 方案 css-modules styled-components jss radium css-in-js 优势 所有的样式全部组件化, 符合 react 的设计思维 使用 js 代替其他预处理工具, 充分发挥 js 的能力。 避免全局变量样式冲突 code split css 代码分割能够按照 js 逻辑分割，不需要编写额外的 css…