Code Monkey home page Code Monkey logo

qa-style-sheet's Introduction

QA Style Sheet

The QA style sheet looks for a new owner. Contact Jens.


The QA style sheet highlights specific HTML problems like use of deprecated elements, inaccessible images, layout tables, empty elements, or styling-related maintenance issues. Theoretically, it is “unobtrusive” in a sense that when everything’s fine it won’t cause any visible changes.

3 Ways to Use the QA Style Sheet

  1. Use it on demand as a bookmarklet: Add the bookmarklet or favelet, respectively, to your bookmarks and access it when needed. When customizing the style sheet better compress it, generate a new bookmarklet, but make sure to add %20newSS.id%20=%20'x-qa'; to the bookmarklet code to avoid false positives when it comes to style sheet references on a page (this assumes you’re keeping the #x-qa selector in the QA style sheet, too).

  2. Temporarily import the style sheet in your project’s default style sheet. Do not forget to remove the style sheet reference after testing.

  3. Use it permanently as a user style sheet with your browser (userContent.css for Gecko browsers). For more information please see documentation at CSS-Discuss or at About.com. It’s easy though.

User Agent Support

The style sheet is supported differently across browsers as it makes some use of CSS 3 selectors, and when it comes to warnings for images, at least Internet Explorer might display errors that must not necessarily be there. To get the most of the QA style sheet test the respective pages with recent releases of Firefox, Safari, Chrome, or Opera.

Background and Design Considerations

While Eric Meyer once published a comparable style sheet, this QA style sheet has a slightly different scope. It spots the following problems, indicated in yellow (warning) and red (error) assuming a modern browser:

  • Errors:
    • deprecated elements like applet, basefont, center, dir, font, isindex, menu, s, spacer, strike, and u;
    • layout tables (nested tables, to be precise);
    • images (img elements) without any alt attribute;
    • anchors with an empty href attribute thus pointing to nothing;
    • style attributes.
  • Warnings:
    • images with an empty alt attribute;
    • anchors linking GIF, JPG, or PNG images as well as PDF documents;
    • empty p, li, th, td, div, and span elements unless they’re using an id attribute;
    • style elements;
    • more than one link elements with rel=stylesheet attribute.

The style sheet is somewhat unmaintained (as of January 17, 2018). Contributions welcome.

qa-style-sheet's People

Contributors

cstrobbe avatar ihmels avatar j9t avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Forkers

cstrobbe jensgro

qa-style-sheet's Issues

Refresh emoji

At least replace “☹”—perhaps by “⚠”?

(Also add no-break spaces before them.)

Job Search Results Pages Disappear

What steps will reproduce the problem?
1. Search for "Google Jobs" on google
2. Click on the "Search US Openings" hyperlink beneath the main 
"www.google.com/jobs" link
3. Enter in the following search criteria:
      Location: CA - Los Angeles
      Departments: All Departments
4. Click on the "Search US Jobs" button
5. Scroll to the bottom of the search results page
   --> Results are returned with 4 pages
6. Click on the "3" page to advance to the next page of results
7. Scroll to the bottom of the page
   --> Results are returned with 2 pages - 3 and 4 have disappeared
8. Click on the "1" page
   --> Pages 1-4 return


What is the expected output? What do you see instead?
I would expect to see the page that I click on when navigating pages in the 
search results. I do not expect the pages to disappear :)

What version of the product are you using? On what operating system?
2012 Google. Mac OS X Version 10.7.2

Please provide any additional information below.
Attached files include:
1. Screen shot of original search results return - the number of visible pages
2. Screen shot after clicking on page 3 of the search results - pages 3/4 
disappear


Original issue reported on code.google.com by [email protected] on 11 Feb 2012 at 5:51

Attachments:

Revise versioning and update mechanism

It would be great to use semantic versioning for the style sheets (once maintained again). Alas, semver would only work with the current mechanism if it was clear what type of version jumps comes next (major, minor, or patch). As that’s not the case, consider simple numbering instead of the “1.x” scheme in use now.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.