Archive for the ‘chrome’ Category

cssRules null in Chrome

I found this problem when tryed to use cssRules of document.styleSheets[i] locally in Chrome but found that cssRules is null and only in Chrome. I need only to add some rules but not to read or modify existed rules so this fix is not for all.

Here’s the bug .

And here’s my workaround for this problem:

var styles = document.styleSheets;
var style = null;
for (var s = 0; s < styles.length; s++)
    if(!styles[s].href) {
        style = styles[s];
        break;
    }
if (style == null)
    style = jQuery("text/css\">")
        .appendTo('head').get(0);
var rules = style.cssRules; // is not null!!!

ContentEditable outline style in WebKit

As you know, when you make an editable node by setting an appropriate attribute, WebKit selects an editable area using outline. This outline is a border that surrounds the editable content. The editable area is selected only when you set focus on it, in other words, when contentEditable attribute has been set to true. To change styles of this outline we have to use CSS rules. There are limited amount of styles that can be changed for the outline of the editable area. They are:

  • Color (the same as border color)
  • Width (the same as border width)
  • Style (the same as border style)

Ok, let’s test!

Read the rest of this entry »