doyoe / css-handbook Goto Github PK

View Code? Open in Web Editor NEW

1.5K 1.5K 311.0 27.85 MB

CSS参考手册

Home Page: http://css.doyoe.com

License: Apache License 2.0

HTML 97.12% JavaScript 2.10% CSS 0.78%

browser css handbook reference

css-handbook's People

Contributors

Stargazers

Watchers

Forkers

gucong3000 zorayoyo fivenamefour xingmolu finklezhang watermelon2012 imhu gengzhengtao taylor1003 henryzp brizz fanchou arden huang-snail mmz0717 sdtm1016 truexu0529 ajesma zenoven kelelang yeyuguo woerwin wypb 001src ztesoft-ued iuyes newlethe libran7 zchking tennessine citywallebs ltp211 lseyesl minjianw xazzz dream-seeker oknixus starer93 luomuhanxue injeek zhakui passerby4j licong lanxkk edwonlim haoljp forksss yangjunwei judy98taylor sqq5682 wolfsilver zhiqinghuang wanbaozhao soulhat leakeung enoy 740521985 gcluo guozhiling glanms jixufeng it-tavis zpcooper zhaoy875 ldfaiztt liuwei2016 blackmans brother-simon bringmehome jinglf000 nickhsiung90 vb2005xu hsingyun jerryfornet ananten guonanci cooltheo guomingzhang2008 leebivip veronbs lukeddy hqzxjczx jorycn ivanwangcy yinqingwen programmerdu inzaghi2012 zhoushujie cosdy yuchuanxi yangliull jinagko robinfan zptcsoft surperone lock1995 maceaykk joinergreat githubrq dandandexia

css-handbook's Issues

运行代码里的问题？

css hack中条件hack里面的代码在IE11里面会显示“您正在使用非IE浏览器 ”，其他的没测！

IE9+仅支持使用 vm 代替vmin

IE9+仅支持使用 vm 代替vmin的表述不对
该问题仅仅存在于IE9，IE10并不存在，所以该去掉文案中的+
\values\length\vmin.htm

\values\image\radial-gradient().htm

<li id="support2">IE6.0-9.0使用私有滤镜来实现该效果: <a href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx" rel="external" class="external" target="_blank">progid:DXImageTransform.Microsoft.Gradient()</a></li>
请删除此行，IE并不能使用滤镜来兼容此属性

box-sizing兼容性视图有误

没有-ms-box-sizing的用法。
另外我增补了padding-box的内容
http://ridge/css-book/properties/user-interface/box-sizing.htm

\values\functional\calc().htm

        <ol class="support-info">
            <li>IE9下，使用在background-position会使浏览器崩溃。</li>
        </ol>

伪类选择的时候，怎么没有 a:eq(1) 这样的写法？

伪类选择的时候，怎么没有 a:eq(1) 这样的写法？难道这不是标准方法，而仅仅只是 jQuery 的用法么？

display里没有grid相关的属性

我在w3c官网上看到了这个属性，但是手册上没有一点介绍
http://www.w3.org/TR/css3-grid-layout/

list-style：[ list-style-image ] || [ list-style-position ] || [ list-style-type ]

list-style：[ list-style-image ] || [ list-style-position ] || [ list-style-type ] 顺序应该是
list-style：[ list-style-type ] || [ list-style-position ] || [ list-style-image ]

速查总表和CSS3速查表中链接错误

counter()
counters()
attr()
这三个属性的链接都错了。

修改示例代码，点击运行还是执行回最初的代码

http://www.css88.com/book/css/properties/font/font-weight.htm
我是在此修改了示例代码，已经删除了部分内容想尝试不同效果，但点击运行之后还是本来的代码的样子；也就是说，运行没有用

属性-内补白-说明中第五条是否准确？

原文：
非替代(non-Replaced)行内元素可以使用该属性设置左、右两边的内补丁；若要设置上、下两边的内补丁，必须先使该对象表现为块级或内联块级。

标准里没说啊，是否误认为是margin的vertical方向无效
http://www.w3.org/TR/CSS21/box.html#padding-properties

发现几个index.htm中没有链接的文件

properties/layout/rotation-point.htm
properties/layout/rotation.htm
properties/speech/index.htm

html语法错误

\properties\background\background-origin.htm
\properties\background\background-clip.htm

这两个文件中，少写了一个空格

<td class="support"rowspan="3">3.0+</td>

应该为：

<td class="support" rowspan="3">3.0+</td>

flex-direction的取值错误

页面上：

取值：
row：
横向从左到右排列（左对齐），默认的排列方式。
row-reverse：
反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：
纵向排列。
row-reverse：
反转纵向排列，从后往前排，最后一项排在最上面。

正确：

取值：

row：
横向从左到右排列（左对齐），默认的排列方式。
row-reverse：
反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：
纵向排列。
column-reverse：
反转纵向排列，从后往前排，最后一项排在最上面。

发现一个页面链接错误

http://gucong3000.github.io/css-book/values/image/linear-gradient().htm
此页面有几个链接到404
angle：用角度值指定渐变的方向（或角度）。angle链接到404
length：用长度值指定起止色位置。不允许负值 length链接到404
percentage：用百分比指定起止色位置。percentage链接到404
http://gucong3000.github.io/css-book/values/image/radial-gradient().htm
http://gucong3000.github.io/css-book/values/image/repeating-linear-gradient().htm
http://gucong3000.github.io/css-book/values/image/repeating-radial-gradient().htm
percentage①：用百分比指定径向渐变圆心的横坐标值。可以为负值。percentage链接到404
length①：用长度值指定径向渐变圆心的横坐标值。可以为负值。 length链接到404
本页面涉及到这几个页面都是404
这几个问题修复, 应该就都可以了, 所以, 不在一一列举

发现一个页面链接错误

http://gucong3000.github.io/css-book/properties/border/box-shadow.htm
这个页面中有一个参阅text-shadow属性 text-shadow 有链接, 但是点击之后404

border-image-repeat对应脚本特征写错

这里是正确的写法
http://ridge/css-book/properties/border/border-image-repeat.htm

对应的脚本特性为borderImageRepeat。

vertical-align继承性性应该为无

根据w3c描述,和实际测试，vertical-align的继承性应该为:无

属性级hack失效

http://css.doyoe.com/hack/properties.htm
此页所描述的webkit内核的hack，Chrome27或Safari打开demo正常，Chrome37打开demo，未识别hack。

text-overflow "移除"是什么意思超出吧

clip：
当内联内容移除块容器时，将溢出部分裁切掉。
ellipsis：
当内联内容移除块容器时，将溢出部分替换为（...）。
“移除”是什么鬼，是表达超出的意思么?

文档格式优化

现在想添加点东西,感觉首先得熟悉html结构,是否考虑统一文档格式,比如用md文档,然后约定某些key&&value,然后用nodejs来跑整个网站,这样上手略快吧,比如:

# Properties Level Hack
## dir
hack

## description
css属性级Hack

## example
xxxxxxx

当然配置也可以走package.json格式...只是想法~

background-position css3 [3、4 values] 说明有误

Properties -> background -> background-position
说明中的第二条：
给偏移量添加关键字时只有边界left-right-top-bottom，而不能是center。

标准中说的是
If three or four values are given, then each or represents an offset and must be preceded by a keyword, which specifies from which edge the offset is given.

edge应该不包括center。

笔误

\css-handbook\properties\media-queries\grid.htm:
105: 5.1。7

发现死链接一处

/introduction/change-list.htm
此页面中的<a href="../values/content/counters.htm">counters</a>

目录和页面编码不一致

在mac 中切到 utf-8 时，页面显示正确目录乱码，切到GB2312/GBK时目录正确，页面乱码。

position属性的CSS3新增属性值: sticky。

Firefox 32+
Safari 6.1+
已获得支持

数据来源：
http://caniuse.com/#feat=css-sticky

Mac下 CHM格式显示乱码

图就不截了，应该是字符集的编码的问题。
我用read CHM 打开的

线上版有无可能加入搜索功能？

如题，线上版有无可能加上搜索功能？这样查找属性更方便。

Pixels说明文字错误

http://css.doyoe.com/values/length/px.htm 与 http://css.doyoe.com/values/length/length.htm 页面对于Pixels长度单位的定义相互矛盾：在length页面px是显示在绝对长度单位内， px页面显示“相对长度单位。像素（Pixels）。 ”

/rules/@import.htm 兼容性部分，注解错误，z-index的描述出现在了@import页面

            <ol class="support-info">
                <li id="support1">z-index负值是CSS2.1中定义的，在CSS2中是不被支持的；</li>
            </ol>

这里估计是错误的copy了代码，还是应该使用原来的代码。

用户界面 box-sizing 值的问题

w3cschool上的值有 inherit(规定应从父元素继承 box-sizing 属性的值),参考手册说没有继承性，求解惑。

\properties\positioning\position.htm

文件第二行写错啦
<html lang="zh-cmn-Hansn">
应该是：
<html lang="zh-cmn-Hans">
建议用编辑器批量替换所有页面的此行，不要手写
手写可能出现上述错误

columns页面的疑惑

http://css.doyoe.com/properties/multi-column/columns.htm 此页面的兼容性中出现橙色是何解....还有类似页面
Multi-column 此下面的属性页面全都出现橙色, 橙色有什么特殊意义吗?

非常感谢作者提供这么好的资源，不过我有点儿贪心

非常感谢！
请问可以出个kindle的版本吗？:)

transform介绍页面的疑惑

在兼容性那个位置, 上面注明绿色是兼容, 粉红色的部分兼容, 红色为不兼容, 但是, 那个表格上, 背景全为白色
http://css.doyoe.com/properties/transform/transform.htm 就是这个页面

list-style

list-style 语法的描述 list-style：[ list-style-image ] || [ list-style-position ] || [ list-style-type ] 后面的顺序是不是错了？

能否添加 CSS 3D 的相关内容？

/images/文件夹下俩问价日期写错

/images/文件夹下俩图片文件，图上日期写成了2014.0.26。已在我的分支下修正

一些新的CSS3规范，如：supports

发现CSS3有许多新的规范得到浏览器的支持，如：supports、filter等。有无计划加入手册呢？
http://caniuse.com/#search=filter
http://caniuse.com/#search=supports

速查总表中的链接错误

很遗憾楼主删掉了gulp脚本，我这边保留着，今天合并您的分支后跑gulp发现有死链接：
发现死链接(文件不存在): properties/text/text-size-adjust.htm
发现死链接(文件不存在): properties/only-webkit/tap-highlight-color.htm
发现死文件(没有链接指向此文件): properties\speech\index.htm

HTML 代码语法错误，约7处

1 error found in /properties/border/border-bottom-color.htm[L134:C4] Tag must be paired, Missing: [ </li> ] (tag-pair)</ol>

1 error found in /properties/border/border-left-color.htm[L134:C4] Tag must be paired, Missing: [ </li> ] (tag-pair)</ol>

1 error found in /properties/border/border-right-color.htm[L134:C4] Tag must be paired, Missing: [ </li> ] (tag-pair)</ol>

1 error found in /properties/border/border-top-color.htm[L134:C4] Tag must be paired, Missing: [ </li> ] (tag-pair)</ol>2 errors found in /rules/@media.htm[L81:C1] Special characters must be escaped : [ < ]. (spec-char-escape)<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?></xmp></code></blockquote>[L81:C88] Special characters must be escaped : [ > ]. (spec-char-escape)<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?></xmp></code></blockquote>

1 error found in /quicksearch.htm[L672:C10] Id redefinition of [ content ]. (id-unique)<section id="content" class="g-mod g-attr">

1 error found in /selectors/relationship/e-child-f.htm[L64:C56] Special characters must be escaped : [ > ]. (spec-char-escape)<blockquote class="gquote-cont"><code><xmp>.demo > div {

1 error found in /selectors/relationship/ef.htm[L77:C127] Special characters must be escaped : [ > ]. (spec-char-escape)<p class="gquote-info">此例，如果使用<code class="incode">.demo div</code>，那么 0, 1, 2, 3 都有有边框；如果使用 <code class="incode">.demo > div</code>，那么只有 0 有边框，即只有子元素会被命中；</p>3 errors found in /values/image/image-set().htm[L102:C7] Special characters must be escaped : [ < ]. (spec-char-escape)<td class="support"rowspan="2">15.0-28.0<br /><sup class="fix">-webkit-</sup> <sup><a href="#support1">#1</a></sup></td>[L102:C37] Special characters must be escaped : [ > ]. (spec-char-escape)<td class="support"rowspan="2">15.0-28.0<br /><sup class="fix">-webkit-</sup> <sup><a href="#support1">#1</a></sup></td>[L102:C122] Tag must be paired, No start tag: [ </td> ] (tag-pair)<td class="support"rowspan="2">15.0-28.0<br /><sup class="fix">-webkit-</sup> <sup><a href="#support1">#1</a></sup></td>

1 error found in /values/textual/url.htm[L82:C1] Tag must be paired, Missing: [ </url></string> ] (tag-pair)</xmp></code></blockquote>