Skip to content

Diagnostic CSS stylesheet that helps visually detect any potentially invalid, inaccessible or erroneous HTML markup.

License

Notifications You must be signed in to change notification settings

kellerkichel/diagnosticss

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

56 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

DiagnostiCSS

Diagnostic CSS stylesheet that helps visually detect any potentially invalid, inaccessible or erroneous HTML markup.

DiagnostiCSS highlights the following problems:

  • inline styles and event attributes
  • invalid links
  • empty or deprecated elements
  • elements missing required attributes

Sponsored by Flatstack.

Installation & Usage

Rails

Add this line to your application's Gemfile:

gem 'diagnosticss', github: 'diagnosticss', group: :development

And run:

$ bundle install

Sinatra

Add 'diagnosticss' to your application's Gemfile as described above and then use DiagnostiCSS middleware in your application:

require 'diagnosticss'

class App < Sinatra::Base
  use Diagnosticss::Middleware
  # ...
end

HTML

Include a stylesheet link to the diagnostic css:

<link rel="stylesheet" href="//diagnosticss.github.io/css/diagnosticss.css" media="all">

Chrome Extension

Yep. This is it. Courtesy of @nicck, @kamilhism. Install it from Chrome Webstore.

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Don't forget to run rake compile (see also rake -T) after making any changes to stylesheet
  6. Create new Pull Request

Ideas, TODOs

  • configuration? (ability to disable/enable some of inspections)

About

Diagnostic CSS stylesheet that helps visually detect any potentially invalid, inaccessible or erroneous HTML markup.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 71.7%
  • Ruby 28.3%