karlgroves/diagnostic.css

语言: CSS

git: https://github.com/karlgroves/diagnostic.css

Diagnostic.css是一个样式表,允许用户测试页面标记中的常见错误
Diagnostic.css is a stylesheet which allows the user to test for common errors in a page's markup
README.md (中文)

diagnostic.css

Diagnostic.css是一个样式表,允许用户测试页面标记中的常见错误。 受Eric Meyer诊断CSS文件的启发,这个文件旨在充实页面上与辅助功能相关的问题。

哲学

此样式表的目标是提供非常快速,非常准确的反馈。因此,过于保守并产生“误报”的项目可能会从工作表中消除,并且不会包含在任何合并中。

如何使用

如果您正在使用自己的网站,请将此(当然暂时)添加到您的网站以显示错误。

如果您正在检查您无权访问的工作,请将其用作用户样式。

小书签

或者,使用此repo中的bookmarklet.js。在浏览器中创建书签,然后在您要测试的页面上单击它。

用户脚本

NEW,截至2013年12月7日,此repo中有一个新文件diagnostic-css.user.js,可用作用户脚本。这使您可以获得诊断CSS反馈,而无需不断激活上面的书签。这对于用例测试或用户验收测试特别有用,因为您只需激活此脚本并浏览要测试的屏幕即可。

如果您在Firefox上安装了Greasemonkey,请使用Firefox打开diagnostic-css.user.js文件。这将安装脚本作为用户脚本。 通过https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/下载Greasemonkey

请注意,正如现在设置的那样,此用户脚本对所有网站都“开启”。要仅为某些站点(例如您拥有的站点)启用此功能,请修改脚本文件中的@include指令。或者,您可以在greasemonkey本身内启用/禁用脚本。

让它更好

这是一个公开的回购。贡献它,添加到文档,提交问题等。

更改日志

2013年12月7日:添加了用户脚本。

2013年9月28日:修复了没有alt属性的区域元素的错误否定选择器。

2013年9月6日:完全改进了样式表。添加了新的选择器。添加生成的内容以显示错误信息。

2013年9月13日:AWK合并要求改变过于保守的规则。

哦,具有讽刺意味

我意识到CSS生成的内容不是内容。我甚至发布了它:http://www.karlgroves.com/2013/08/26/css-generated-content-is-not-content/

这是开发人员无需工具即可立即获得反馈的快捷方式。如果有人希望扩展,建立或合作 这是一个更容易接触的方式,请联系!

本文使用googletrans自动翻译,仅供参考, 原文来自github.com

en_README.md

diagnostic.css

Diagnostic.css is a stylesheet which allows the user to test for common errors in a page's markup.
Inspired by Eric Meyer's diagnostic CSS file, this one is intended to flesh out accessibility related issues on a page.

Philosophy

The goal of this stylesheet is to provide very quick, very accurate feedback. As a consequence, items that are too conservative and create "false positives" are likely to be eliminated from the sheet and won't be included in any merges.

How to use

If you're working with a site you own, add this (temporarily, of course) to your site to display the errors.

If you're checking work you don't have access to, use this as a user style.

Bookmarklet

Alternately, use the bookmarklet.js found in this repo. Create a bookmarklet in your browser and then click it when you're on a page you want to test.

User Script

NEW, as of 07-December 2013, there's a new file, diagnostic-css.user.js in this repo which can be used as a user script. This enables you to get the diagnostic CSS feedback without having to constantly activate the bookmarklet above. This is particularly useful for use case testing or user acceptance testing because you can simply activate this script and browse the screens you want to test.

If you have Greasemonkey installed on Firefox, open the diagnostic-css.user.js file with Firefox. This will install the script as a userscript.
Download Greasemonkey at https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/

Note, as it is set-up now, this userscript is "on" for all websites. To turn this on for only certain sites, such as those you own, modify the @include directive in the script file. Alternately, you can enable/ disable the script within greasemonkey itself.

Make it better

This is an open repo. Contribute to it, add to the documentation, submit an issue, etc.

Change Log

07-December 2013: Added user script.

28-September 2013: Fixed a bad negation selector for area elements without alt attributes.

06-September 2013: Totally revamped the stylesheet. Added new selectors. Added generated content to show error information.

13-September 2013: Merged request from AWK to change overly conservative rule.

OH, the irony

I realize that CSS-generated content is not content. I've even posted about it: http://www.karlgroves.com/2013/08/26/css-generated-content-is-not-content/

This is intended to be a quick way for developers to get immediate feedback without requiring a tool. If anyone wishes to expand, build upon, or collaborate on
this in a more accessible way, please get in touch!