免费在 GitHub 公开中文介绍

logical-properties

检查 CSS 的间距、边框与定位，将固定左右或上下方向的设置改为随文字流向变化的逻辑属性，支持从右向左书写的语言及竖排布局。

原文查看原文说明

Use when reviewing stylesheets, component styles, and responsive behavior related to Use CSS logical properties for i18n and RTL support. Check the rendered layout across breakpoints and interaction states before proposing a fix.

thedaviddias/Front-End-Checklist

AI 评分100分/ 100 查看安装方法

适用场景

适配阿拉伯语或希伯来语布局
替换 CSS 中固定左右方向的间距
检查竖排文字布局

中文介绍

功能

检查 CSS 的间距、边框和定位设置，协助改用随文字流向变化的逻辑属性。例如，将 margin-left 换成 margin-inline-start，在从左向右书写的语言中表示左侧外边距，在从右向左书写的语言中则表示右侧外边距。也会处理上下方向的设置，根据书写方向选择相应的逻辑属性。

适用场景

适合为阿拉伯语、希伯来语等从右向左书写的语言调整页面，或整理竖排文字布局。会检查样式表和组件样式，指出需要转换的具体选择器与声明。在提出修改方案之前，还会核对不同屏幕宽度断点及交互状态下的实际布局，并解释固定物理方向与随文字流向确定的逻辑方向有何区别。

使用示例

“请找出这份 CSS 中应改用逻辑属性的固定左右方向设置。”
“请修改间距，让从右向左书写的语言也能正确显示。”
“请检查竖排布局，并解释物理方向与逻辑方向的区别。”

注意事项

没有特别注意事项。

本介绍由 AI（OpenAI Codex）根据公开的 SKILL.md 撰写。准确的规格请查看下方原文。

客观评估

AI 仅根据 SKILL.md 的内容，从 4 个方面进行了评估。星标数和热度不计入评估。

指令清晰度能否看出何时使用、做什么: A良好明确说明为适配从右向左书写的语言，将物理方向 CSS 转为逻辑属性。
步骤具体性步骤、输入输出和示例是否具体: A良好列出待转换属性、对应示例、需指出的选择器和声明，以及布局检查条件。
安全性发送数据、删除文件、执行命令等是否有说明: A良好操作为检查和转换 CSS，不涉及对外发送、删除文件或读取凭据。
安装难易度所需工具和 API 密钥是否少且有说明: A良好检查样式和实际布局未要求特定工具、API 密钥或操作系统。

总分按每项 A=25 分、B=15 分、C=5 分相加。由 AI（OpenAI Codex）于 2026年10月23日评估。仅供参考，安装前请同时查看原文。

如果您认为评估有误，请申请复核

包含的文件（2）

SKILL.md2.1 KB
references/rule.md3.7 KB

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

Use CSS logical properties for i18n and RTL support

Physical CSS properties (margin-left, padding-right) are hardcoded to screen directions. In right-to-left languages (Arabic, Hebrew, Persian), what should be margin-left becomes margin-right. Without logical properties, supporting RTL requires maintaining duplicate stylesheets or complex overrides with [dir=rtl] selectors. Logical properties handle this automatically.

Quick Reference

Logical properties adapt to writing direction — margin-inline-start is left in LTR, right in RTL
Replace left/right margin and padding with inline-start/inline-end equivalents
Replace top/bottom with block-start/block-end equivalents
Logical properties also work correctly for vertical writing modes

Check

Find all uses of margin-left, margin-right, padding-left, padding-right, border-left, border-right, left, right (as positioning) that should be converted to logical equivalents.

Fix

Convert physical direction properties to their CSS logical property equivalents for RTL and internationalization support.

Explain

Explain CSS logical properties, the difference between physical and logical directions, and how they enable RTL language support.

Code Review

Review stylesheets, component styles, and responsive states related to Use CSS logical properties for i18n and RTL support. Flag exact selectors, declarations, or breakpoints that violate the rule in the rendered UI.

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/rules/css/logical-properties

评价

还没有评价。欢迎分享你的使用感受。

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

同一仓库的技能