doyoe / css-handbook Goto Github PK

View Code? Open in Web Editor NEW

1.5K 113.0 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%

css handbook reference browser

css-handbook's Issues

Pixels说明文字错误

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

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。

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

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

\properties\positioning\position.htm

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

发现死链接一处

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

运行代码里的问题？

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

属性级hack失效

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

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
这几个问题修复, 应该就都可以了, 所以, 不在一一列举

难道还不考虑将CSS3 3d变形加入手册么？

首先感谢大神的辛勤劳作。
如题，为何一直没有将CSS3 3D变形加入手册呢？

浏览器兼容数据

一个个去更新浏览器兼容性数据太麻烦了，我这边一直在构思，node下调用caniuse.com的数据来自动化完成此项工作，不知大神您有没有思路呢？咱吧grunt或者gulp搞进来怎样？

cursor属性: *.jpg 重复

原文：
Firefox, Chrome, Safari既支持特定图片类型也支持常见的*.jpg, *.gif, *.jpg等图片格式。

应为：
Firefox, Chrome, Safari既支持特定图片类型也支持常见的*.png, *.gif, *.jpg等图片格式。

display里没有grid相关的属性

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

flex-direction的取值错误

页面上：

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

正确：

取值：

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

目录和页面编码不一致

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

关于属性选择符的说明

关于E[att|="val"]的说明好像有点小问题：
原描述：选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
实际上应该是：属性值为val(-\w+)*，连接符"-"不是必须的。

速查总表中的链接错误

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

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

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

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

发现一个页面链接错误

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

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

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

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

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

一些新的CSS3规范，如：supports

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

box-sizing兼容性视图有误

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

columns页面的疑惑

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

文档格式优化

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

# Properties Level Hack
## dir
hack

## description
css属性级Hack

## example
xxxxxxx

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

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

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

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

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

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>

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>

关于左边栏水平滚动条的问题

左边栏是固定宽度为270，在_skin\layout.css_中。
skin\layout.css
#side{width:300px;}
#main{left:310px;}
让main和side增加30，水平滚动条就消失了。

doyoe / css-handbook Goto Github PK

css-handbook's Issues

Recommend Projects

Recommend Topics

Recommend Org