[prev in list] [next in list] [prev in thread] [next in thread]
List: kfm-devel
Subject: Re: cssRules [ref: Konqueror crash - cssRules?]
From: Vadim Plessky <lucy-ples () mtu-net ! ru>
Date: 2001-09-25 10:29:30
[Download RAW message or body]
On Monday 24 September 2001 14:48, Lars Knoll wrote:
| On Monday 24 September 2001 16:28, Martijn Klingens wrote:
[...]
|
| Once you get a style sheet, a CSSStyleSheet object is created and the
| CSSParser parses the style sheet (actually StyleBaseImpl is the parser,
| so every CSS element sort of has a parser builtin).
|
| Parsing a style sheet gives you a tree like representation of it. Think
| of the simple style sheet
|
| a { color: red }
|
| This gets transformed into:
|
| CSSStyleSheetImpl
| CSSRuleImpl //contains a style declaration
| CSSStyleDeclarationImpl // contains a { ... }
| CSSSelector // the selector for the declaration ( "a" ), not part of
| DOM CSSPropertyList //list of properties, here "color: red"
ok, let me ask you following.
Suppose we have in HTML file 2 CSS stylesheets
...
<LINK href="mystyleA.css" rel=Stylesheet>
<LINK href="mystyleB.css" rel=Stylesheet>
...
After parsing HTML/CSS, they become
mystyleA.css - styleSheets[0]
mystyleB.css - styleSheets[1]
Than I want to disable mystyleA.css using following simple JS command:
document.styleSheets[0].disabled = true;
Is it possible to be done with current KHTML implementation?
Concerning @MEDIA directives, I see it as following
MEDIA [j]
stylesheet [i] Screen Print Aureal
CSS A rule 1,2 rule 3,4 ...
CSS B rule 7,9 rule 10,15 ...
So, each CSS Rule should have 2-dimensional cooredinates - one is indication
which stylesheet it belongs too, second - to which media.
Than it's quite easy to implement @MEDIA handling -
to enable rendering @screen, you enable MEDIA[1] rules, and disbale MEDIA[2],
..[N]
For printing, you enable MEDIA[2] and disable the rest.
|
| The Style selector is invoked _after_ all sheets have been parsed. It has
| nothing to do with the DOM. It just colects all style sheets it can find
| for the document and pulls out the useable style rules. These are then
| processed according to the CSS specs and applied to the rendering elements.
Are these rules actually *stored*?
If not, than to access Rule[i] in styleSheet[0]
( rule = document.styleSheets[0].cssRules[i] )
you need to reconstruct (to text) CSS rule from CSSStyleDeclarationImpl
I attach short testing script which illustrates handling of cssRules by MS IE
and NS6/Mozilla.
It seems I need to extend this script for checking @media, but even current
implementation provides comprehensive info how it's handled by those two
browsers.
NOTE: this script crashes Konq, be careful.
|
| All you need to worry about for the @media support is the parser, the DOM
| part (CSSMediaList and co.), and in the end making sure the
| CSSStyleSelector picks up the correct rules for the document from the style
| sheet (ie. leaves out media=print for visual rendering and vice versa).
|
| Cheers,
| Lars
Best Regards,
--
Vadim Plessky
http://kde2.newmail.ru (English)
33 Window Decorations and 6 Widget Styles for KDE
http://kde2.newmail.ru/kde_themes.html
Do you have Arial font installed? Just test it!
http://kde2.newmail.ru/font_test_arial.html
["DOM_CSS.html" (text/html)]
<html>
<head>
<title>DOM CSS Rules (document.styleSheets array)</title>
</head>
<body BGCOLOR="White" TEXT="Black" LINK="Blue" VLINK="Purple" ALINK="Red">
<STYLE type=text/css>
P { BACKGROUND: #FFFFFF;
COLOR: #3333FF;
}
/* dummy class below, to check how we handle calsses */
.vadtest
{
background: red;
color: green;
margin: 8px;
}
</STYLE>
<SCRIPT language=JavaScript>
var d = document;
var atitle = d.title;
// var areferrer = d.referrer;
// var adomain = d.domain;
document.write( "<P>");
// document.write( "<BR>Document = "+document);
// document.write( "<BR>d.getElementById : "+d.getElementById);
// document.write( "<BR>d.getElementsByName : "+d.getElementsByName);
document.write( "<BR>Document = ",document);
document.write( "<BR>d.getElementById : ",d.getElementById);
document.write( "<BR>d.getElementsByName : ",d.getElementsByName);
// document.write( "<BR> d.implementation = ",d.implementation);
document.write( "<BR> d.doctype = ",d.doctype);
document.write( "<BR> document.styleSheets = ",d.styleSheets);
if (document.styleSheets)
{
var theRules = new Array();
document.write( "<BR> document.styleSheets.length = ", d.styleSheets.length );
var NoOfCSS = d.styleSheets.length;
var RulLen, MyRule;
if ( NoOfCSS > 0 )
if (document.styleSheets[0].cssRules)
{
theRules = document.styleSheets[0].cssRules;
RulLen = document.styleSheets[0].cssRules.length;
document.write( "<BR> document.styleSheets[0].cssRules = \
",d.styleSheets[0].cssRules); document.write( "<BR> Number of cssRules [.length]= \
",RulLen); for (i=0; i<RulLen; i++)
{
MyRule = d.styleSheets[0].cssRules[i];
document.write( "<BR> cssRules ["+i+"] = ",d.styleSheets[0].cssRules[i]);
document.write( "<BR> cssRules ["+i+"].style = ",MyRule.style);
if (MyRule.style.color)
document.write( "<BR> style.color = ",MyRule.style.color);
if (MyRule.style.background)
document.write( "<BR> style.background = \
",MyRule.style.background); if (MyRule.style.margin)
document.write( "<BR> style.margin = ",MyRule.style.margin);
/* now check in W3C manner */
col = document.styleSheets[0].cssRules[i].style.getPropertyValue('color')
document.write( "<BR> \
document.styleSheets[0].cssRules[1].style.getPropertyValue('color') = ",col); \
bg = document.styleSheets[0].cssRules[i].style.getPropertyValue('background') \
document.write( "<BR> \
document.styleSheets[0].cssRules[1].style.getPropertyValue('background') = \
",bg); marg = document.styleSheets[0].cssRules[i].style.getPropertyValue('margin')
document.write( "<BR> \
document.styleSheets[0].cssRules[1].style.getPropertyValue('margin') = ",marg); \
document.write( "<BR> cssRules ["+i+"].selectorText = ",MyRule.selectorText);
document.write( "<BR> cssRules ["+i+"].cssText = ",MyRule.cssText);
}
}
else
if (document.styleSheets[0].rules)
{
theRules = document.styleSheets[0].rules;
RulLen = document.styleSheets[0].rules.length;
document.write( "<BR> document.styleSheets[0].rules = ",d.styleSheets[0].rules);
document.write( "<BR> Number of cssRules [.length]= ",RulLen);
for (i=0; i<RulLen; i++)
{
MyRule = d.styleSheets[0].rules[i];
document.write( "<BR> cssRules ["+i+"] = ",d.styleSheets[0].rules[i]);
document.write( "<BR> cssRules ["+i+"].style = ",MyRule.style);
if (MyRule.style.color)
document.write( "<BR> style.color = ",MyRule.style.color);
if (MyRule.style.background)
document.write( "<BR> style.background = \
",MyRule.style.background); if (MyRule.style.margin)
document.write( "<BR> style.margin = ",MyRule.style.margin);
document.write( "<BR> cssRules ["+i+"].selectorText = ",MyRule.selectorText);
/* doesn't work in MS IE */
document.write( "<BR> cssRules ["+i+"].cssText = ",MyRule.cssText);
}
/* now we do it in MS IE=specific way */
document.write( "<BR> document.styleSheets[0].cssText = \
",document.styleSheets[0].cssText);
}
}
document.write( "</P>");
</SCRIPT>
</body>
</html>
["DOM-CSS-results.txt" (text/plain)]
MS IE 5.0 on Windows
------------------------------------------
Document = [object]
d.getElementById : function getElementById() { [native code] }
d.getElementsByName : function getElementsByName() { [native code] }
d.doctype = undefined
document.styleSheets = [object]
document.styleSheets.length = 1
document.styleSheets[0].rules = [object]
Number of cssRules [.length]= 2
cssRules [0] = [object]
cssRules [0].style = [object]
style.color = #3333ff
style.background = #ffffff
cssRules [0].selectorText = P
cssRules [0].cssText = undefined
cssRules [1] = [object]
cssRules [1].style = [object]
style.color = green
style.background = red
style.margin = 8px
cssRules [1].selectorText = .vadtest
cssRules [1].cssText = undefined
document.styleSheets[0].cssText = P { BACKGROUND: #ffffff; COLOR: #3333ff } .vadtest \
{ BACKGROUND: red; COLOR: green; MARGIN: 8px }
NETSCAPE6 on Windows
---------------------------------------
Document = [object HTMLDocument]
d.getElementById : function getElementById() { [native code] }
d.getElementsByName : function getElementsByName() { [native code] }
d.doctype = null
document.styleSheets = [object StyleSheetList]
document.styleSheets.length = 1
document.styleSheets[0].cssRules = [object CSSRuleList]
Number of cssRules [.length]= 2
cssRules [0] = [object CSSStyleRule]
cssRules [0].style = [object CSS2Properties]
style.color = rgb(51,51,255)
style.background = rgb(255,255,255) none repeat scroll 0% 0%
document.styleSheets[0].cssRules[1].style.getPropertyValue('color') = rgb(51,51,255)
document.styleSheets[0].cssRules[1].style.getPropertyValue('background') = \
rgb(255,255,255) none repeat scroll 0% 0% \
document.styleSheets[0].cssRules[1].style.getPropertyValue('margin') = cssRules \
[0].selectorText = cssRules [0].cssText = background-color: rgb(255,255,255); \
background-image: none; background-repeat: repeat; background-attachment: scroll; \
-x-background-x-position: 0%; -x-background-y-position: 0%; color: rgb(51,51,255); \
cssRules [1] = [object CSSStyleRule] cssRules [1].style = [object CSS2Properties]
style.color = green
style.background = red none repeat scroll 0% 0%
style.margin = 8px 8px 8px 8px
document.styleSheets[0].cssRules[1].style.getPropertyValue('color') = green
document.styleSheets[0].cssRules[1].style.getPropertyValue('background') = red none \
repeat scroll 0% 0% \
document.styleSheets[0].cssRules[1].style.getPropertyValue('margin') = 8px 8px 8px \
8px cssRules [1].selectorText =
cssRules [1].cssText = background-color: red; background-image: none; \
background-repeat: repeat; background-attachment: scroll; -x-background-x-position: \
0%; -x-background-y-position: 0%; color: green; margin-top: 8px; margin-right: 8px; \
margin-bottom: 8px; margin-left: 8px;
------------------------------------------
[prev in list] [next in list] [prev in thread] [next in thread]
Configure |
About |
News |
Add a list |
Sponsored by KoreLogic