Show CSS

Overview

Show CSS is a minor mode for Emacs.

With showcss-mode turned on, as you navigate around an HTML file the matching css for that element will be displayed in another buffer.

All the css will display combined in one buffer and any edits made there will be sent back to the source css buffer.

Features

• Displays a breadcrumb of the current elements parents
• Displays the css for the current element grouped by file
• Each field that shows the css is editable, and any changes are sent back to the source file
• ctrl-x ctrl-s in the display buffer, saves the source buffers
• The default mode showcss uses is css-mode, but it can be set to any other mode such as sass-mode if your working with sass files

What doesn’t work

All this is a fancy display for some regex searching. What is does not do is apply any parsing of the found results to see if it actually applies to the current tag.

The way it works now, is that for each tag and for each parent tag, it searches all the associated css buffers for any matches for the tag name, id name, and any class names.

There is no css parsing, so a selector such as: div ul{...} or div > ul{...} won’t won’t mean anything to showcss. If your on a div tag, both those results would be displayed even though they don’t apply to the div tag.

So in short, you get more info that you want.

Options

I am currently investigating how to deal with this. Some options are:

1. Use remote debugging with chrome
2. Find a third party css parser
3. Write a css parser in Emacs

The first would be the easiest to program, but the most complex for the user. They would have to start a browser, load a file in it, then connect to it from Emacs. And then the info would be for a file in the browser, not the edited file in Emacs. The user would have to save the file each time they wanted acurate information about it.

Also (I suspect) that I couldn’t get the specific file location of the css that applies to the tag so I could display that buffer location in Emacs.

The second option requires the user to install a third party library or program and has the same drawbacks as the first option.

The third option would be the best option, no external dependancies, but it would be difficult to build. Best case if I built it (which I do not have the skills for), it would never support all css selectors, only the most common.

If anyone has any ideas, I’d be glad to hear them!

Dependencies

• cl-lib
• dom - http://www.emacswiki.org/cgi-bin/wiki?XmlParser
• s - https://github.com/magnars/s.el#functions

cl-lib is available through GNU ELPA, and dom and s are available through MELPA

Compatibility

Emacs 24

Usage

Put this in your init.el or .emacs file:

(autoload 'showcss-mode "show_css"
   "Display the css of the class or id the cursor is at" t)

Personally, I find this mode to distracting to use all the time, so I use this function to quickly toggle the mode on and off.

(defun sm/toggle-showcss()
  "Toggle showcss-mode"
  (interactive)
  (if (derived-mode-p
       'html-mode
       'nxml-mode
       'nxhtml-mode
       'web-mode
       'handlebars-mode)
      (showcss-mode 'toggle)
    (message "Not in an html mode")))
(global-set-key (kbd "C-c C-k") 'sm/toggle-showcss)

Older version

The older version is at: https://github.com/smmcg/showcss-mode/tree/505d8374bc35e8e76ca7f14cce25dc9e6c9d9570