CSS设计中的错误大整理!
如果有人发明时间机器,那应该将这些错误纠正,不然可把前端程序猿们给还惨了。大家一起看看都有哪些CSS规则应该完善。
(CSS 代码)
white-space: nowrap 应该 white-space: no-wrap
并且不应添加换行符行为 white-space
vertical-align不应该适用于表格单元格。
相反,CSS3对齐属性应存在于级别1中。
vertical-align: middle应该text-middle还是x-middle因为它不是真正在中间,这样的名字会更好地描述它做什么。
应该计算百分比高度,fill-available而不是在自动情况下未定义。
表布局应该是理智的。
Box-sizing应该是border-box默认的。
background-size一个值应该复制它的值,而不是默认第二个值auto。同上translate()。
background-position和border-spacing(所有2轴属性)应首先采用* vertical *,以匹配4方向属性margin。
类似的4值短序margin应该逆时针方向
(因此内联起始值在块起始值之前)。
z-index应该调用z-order或者depth应该只对所有元素起作用(就像在flex项目上一样)。
word-wrap/ overflow-wrap不应该存在。相反,overflow-wrap应该是'white-space'上的关键字,如nowrap(no-wrap)。
永远不应允许盒子的顶部和底部边缘自动折叠在一起,因为这是所有边缘折叠邪恶的根源。
边缘部分崩溃而不是奇怪的规则来处理最小/最大高度?
表(与其他非块一样,例如flex容器)应该形成伪堆叠上下文。
该currentcolor关键字应该有一个破折号current-color。应该有一个可预测的颜色命名系统,而不是任意的X11名称。
border-radius本来应该的corner-radius。
当设置相反的偏移属性(例如,左+右)时,绝对定位的替换元素应该伸展,而不是开始对齐。
hyphens应该调用该属性hyphenate。(这是hyphens因为XSL:FO人反对hyphenate。)
rgba()并且hsla()不应该存在,rgb()并且hsl() 应该获得可选的第四个参数(并且alpha值应该使用与R,G和B或S和L相同的格式)。
后代组合应该是»和间接兄弟组合应该是++,所以选择者的ascii艺术之间有一些逻辑关系
在*-blend-mode性能应刚去过的*-blend
unicode范围的语法应与CSS的其余部分一致,如u0001-u00c8。Unicode范围不应该有自己的标记化或令牌处理的单独的微合成语法。标记化黑客需要使选择器(例如,u + a)处理作为unicode范围标记的事物,或使unicode范围处理其他大范围的标记(数字和维度有和没有科学记数法,标识符,+)都很可怕
font-family应该要求引用字体名称(就像来自“外部” CSS的所有其他值一样)。处理不带引号的字体名称的规则使解析变得font愚蠢,因为它需要font-size消除歧义的值。
对于弹性基础与宽度/高度的关系,Flexbox应该不那么疯狂了。也许:如果宽度/高度是auto,使用flex-basis; 否则,坚持宽度/高度作为不灵活的大小。(这也使得最小/最大宽度/高度行为超出了通用定义。)
:empty应该是:void,并且:empty应该选择仅包含空格的项目在规范中修复,等待实现检查Web-compat ...
table-layout: fixed; width: auto 应该导致具有固定布局列的填充表。
“文本方向”应该具有upright初始值(给定“写入模式”的最新更改)。
@import规则要求(a)始终命中网络,除非您指定缓存头,并且(b)为每次导入构造新的CSSStyleSheet对象,即使它们是相同的。它应该有更积极的基于URL的重复数据删除并允许共享样式表对象。
选择者有可怕的未来证明。我们应该拆分顶级逗号,只忽略未知/无效段,而不是整个事件。
:link应该一直有:any-link语义。
flex速记(和flex-shrink和flex-growlonghands)应该接受fr单元,而不是裸露数字来表示挠曲馏分。
display应该调用该属性display-type。
list-style属性应该叫marker-style,并list-item更名为marked-block或东西。
'text-overflow'属性应始终适用,而不是依赖于 overflow
line-height:<percentage>应计算到等效的行高:<number>,以便它有效地继承百分比而不是长度
::placeholder应该::placeholder-text而且:placeholder-shown应该是:placeholder
'overflow:scroll'应该引入堆叠上下文
size应该是一个简写,width而height不是具有不同定义的@page属性
我们可能应该避免在网格属性中使用ident混合关键字(span),可能使用功能表示法(如span(2))。
CSS中基本上不应该允许注释(与HTML相比,基本上只允许它们在内容的位置),因为它使得它们在对象模型中基本上不可表示,这反过来使得直接在对象模型之上进行构建编辑不可能
Flexbox中的对齐属性应该是写入模式相对的,而不是相对于flex-flow的,因此可以具有合理可理解的名称,如align-inline- *和align-block- *。
CSS设计中的错误大整理!的更多相关文章
- iOS中 Realm错误总结整理 韩俊强的博客
每日更新关注:http://weibo.com/hanjunqiang 新浪微博! 一.错误信息:Attempting to modify object outside of a write tra ...
- 教你避雷!网页设计中常见的17个UI设计错误集锦(附赠设计技巧)
以下内容由摹客团队翻译整理,仅供学习交流,摹客iDoc是支持智能标注和切图的产品协作设计神器. 精心设计的用户界面对网站意义重大.具备所有最新功能和响应式设计有助于提高网站的搜索引擎排名,从而增加受众 ...
- 网页设计中11 款最好CSS框架
网页设计和发展领域已经成为竞争激烈的虚拟世界.想要在网络的虚拟世界中生存,仅有一堆静止的在线网络应用是远远不够的,网页必须要有很多功能,配以让人无法抗拒的设计.网页编码一定要合适.精确,才能保证不发生 ...
- Perl Tk在IC设计中的应用、Windows、Linux平台下的安装-各种错误的摸索解决
本文转自:自己的微信公众号<集成电路设计及EDA教程> <Perl Tk在IC设计中的应用.Windows.Linux平台下的安装-各种错误的摸索解决> Perl在IC设计中有 ...
- PHP 中使用ajax时一些常见错误总结整理
这篇文章主要介绍了PHP 中使用ajax时一些常见错误总结整理的相关资料,需要的朋友可以参考下 PHP作为后端时,前端js使用ajax技术进行相互信息传送时,经常会出错误,对于新手来说有些手足无措.总 ...
- 说说CSS学习中的瓶颈
虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...
- CSS学习中的瓶颈期深入分析
虽已数年,但未就学习专门写过文章,这回破处了.苍蝇不叮没有缝隙的鸡蛋,领导不做没有跟拍的表演,同样,想到写CSS学习的文章也是有原因的(虽然我的不少行为没有原因). 情景再现(尊重隐私,下面故事中人名 ...
- 你真的了解字典(Dictionary)吗? C# Memory Cache 踩坑记录 .net 泛型 结构化CSS设计思维 WinForm POST上传与后台接收 高效实用的.NET开源项目 .net 笔试面试总结(3) .net 笔试面试总结(2) 依赖注入 C# RSA 加密 C#与Java AES 加密解密
你真的了解字典(Dictionary)吗? 从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点.为了便于描述,我把上面 ...
- 算警示吧——此文来自张鑫旭(说说CSS学习中的瓶颈)
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2523 虽已数年,但未 ...
随机推荐
- React 生命周期简介
React 中组件的生命周期会经历如下三个过程:装载过程.更新过程.卸载过程. 装载过程:组件实例被创建和插入 DOM 树的过程: 更新过程:组件被重新渲染的过程: 卸载过程:组件从 DOM 树 ...
- ketlle windows下的安装(最基本)
ketlle基本介绍 kettle是纯java开发,开源的etl工具.可以在Linux.windows.unix中运行.有图形界面,也有命令脚本还可以二次开发. kettle其实是以前的叫法,现在官方 ...
- TensorFlow - 在 windows 系统上安装
安装方式: 1.pip (将介绍) 2.Anaconda 我采用的是本地 pip 方式 需提前安装 Python - Python 3.5.x > TF 只支持 Python 3.5.x 版本, ...
- Python基础测试题
1,执行Python脚本的两种方式 答:一种是 交互式,命令行shell启动Python,输入相应代码得出结果,无保存,另一种是 脚本式,例如:python 脚本文件.py,脚本文件一直存在,可编辑, ...
- MySQL Execution Plan--IN子查询包含超多值引发的查询异常
问题描述 版本:MySQL 5.7.24 SQL语句: SELECT wave_no, SUM(IF(picking_qty IS NULL, 0, picking_qty)) AS PICKED_Q ...
- flutter Row 垂直或水平放置多个widget
使用行(Row)水平排列widget,使用列(Column)垂直排列widget.在行或列中嵌套行或列实现复杂的布局.如下图所示: 此布局按行排列.该行包含两个子布局,左侧一列和右侧的图片 对于行(R ...
- java中super关键字的作用
1.super关键字可以在子类的构造方法中显示地调用父类的构造方法,super()必须为子类构造函数中的第一行. 2.super可以用来访问父类的成员方法或变量,当子类成员变量或方法与父类有相同的名字 ...
- spring 事务传播机制
spring 事务 传播机制 描述的 事务方法直接相互调用,父子事物开启,挂起,回滚 等的处理方式. 绿色的 那几个 我认为比较重要. 1 , @Transactional(propagation=P ...
- os常用模块,json,pickle,shelve模块,正则表达式(实现运算符分离),logging模块,配置模块,路径叠加,哈希算法
一.os常用模块 显示当前工作目录 print(os.getcwd()) 返回上一层目录 os.chdir("..") 创建文件包 os.makedirs('python2/bin ...
- stm32之中断配置
一.stm32的中断和异常 Cortex拥有强大的异常响应系统,它能够打断当前代码执行流程事件分为异常和中断,它们用一个表管理起来,编号为0~15为内核异常,16以上的为外部中断,这个表就是中断向量表 ...