Search completed in 1.02 seconds.
218 results for "styleSheets":
Your results are loading. Please wait...
Correctly Using Titles With External Stylesheets - Archive of obsolete content
external stylesheets are often associated with html documents using the <link rel="stylesheeet"> element, but it is important to use the element's title attribute properly.
...in fact, the use of the title attribute is so significant that html 4.01 categorizes stylesheets according to the presence or absence of a title.
... there are three kinds of stylesheets that are possible: persistent, preferred, and alternate stylesheets.
...And 9 more matches
Document.lastStyleSheetSet - Web APIs
the document.laststylesheetset property returns the last enabled style sheet set.
... this property's value changes whenever the document.selectedstylesheetset property is changed.
... syntax var laststylesheetset = document.laststylesheetset on return, laststylesheetset indicates the style sheet set that was most recently set.
...And 3 more matches
Document.enableStyleSheetsForSet() - Web APIs
syntax document.enablestylesheetsforset(name); parameters name the name of the style sheets to enable.
... stylesheets that don't have a title are never affected by this method.
... this method never affects the values of document.laststylesheetset or document.preferredstylesheetset.
... example document.enablestylesheetsforset("some style sheet set name"); ...
Document.selectedStyleSheetSet - Web APIs
the selectedstylesheetset property indicates the name of the style sheet set that's currently in use.
... syntax currentstylesheetset = document.selectedstylesheetset; document.selectedstylesheet = newstylesheetset; on return, currentstylesheetset indicates the name of the style sheet set currently in use.
... setting the value of this property is equivalent to calling document.enablestylesheetsforset() with the value of currentstylesheetset, then setting the value of laststylesheetset to that value as well.
... example console.log('current style sheet set: ' + document.selectedstylesheetset); document.selectedstylesheetset = 'some other style sheet'; ...
Document.preferredStyleSheetSet - Web APIs
the preferredstylesheetset property returns the preferred style sheet set as set by the page author.
... syntax preferredstylesheetset = document.preferredstylesheetset on return, preferredstylesheetset indicates the author's preferred style sheet set.
... example if (document.preferredstylesheetset) { console.log("the preferred style sheet set is: " + document.preferredstylesheetset); } else { console.log("there is no preferred style sheet."); } ...
Document.styleSheetSets - Web APIs
the stylesheetsets read-only property returns a live list of all of the currently-available style sheet sets.
... syntax var sets = document.stylesheetsets; on return, sets is a list of style sheet sets that are available.
... example given an <ul> (list) element with the id "sheetlist", you can populate it with the names of all the available style sheet sets with code like this: let list = document.getelementbyid('sheetlist'); let sheets = document.stylesheetsets; list.innerhtml = ''; for (let i = 0; i < sheets.length; i++) { let item = document.createelement('li'); item.innerhtml = sheets[i]; list.appendchild(item); } notes the list of available style sheet sets is constructed by enumerating all the style sheets available for the document, in the order in which they're listed in the document.stylesheets attribute, adding the title of each style sheet that has a title to the list.
DocumentOrShadowRoot.styleSheets - Web APIs
the stylesheets read-only property of the documentorshadowroot interface returns a stylesheetlist of cssstylesheet objects, for stylesheets explicitly linked into or embedded in a document.
... examples function getstylesheet(unique_title) { for (var i=0; i<document.stylesheets.length; i++) { var sheet = document.stylesheets[i]; if (sheet.title == unique_title) { return sheet; } } } notes the returned list is ordered as follows: stylesheets retrieved from <link> headers are placed first, sorted in header order.
... stylesheets retrieved from the dom are placed after, sorted in tree order.
nsIStyleSheetService
layout/base/nsistylesheetservice.idlscriptable please add a summary to this article.
...to create an instance, use: var stylesheetservice = components.classes["@mozilla.org/content/style-sheet-service;1"] .getservice(components.interfaces.nsistylesheetservice); method overview void loadandregistersheet(in nsiuri sheeturi, in unsigned long type); boolean sheetregistered(in nsiuri sheeturi, in unsigned long type); void unregistersheet(in nsiuri sheeturi, in unsigned long type); constants constant value description agent_sheet 0 user_sheet 1 au...
Using the Stylesheet Service - Archive of obsolete content
the stylesheet service allows extensions to manage user and ua stylesheets without having to touch usercontent.css or userchrome.css files.
... the api is defined in nsistylesheetservice.idl.
... the stylesheets registered with this api apply to all documents; firefox 18 extended nsidomwindowutils with loadadditionalstylesheet() and removeadditionalstylesheet() to manage stylesheets for a specific document (bug 737003).
...And 10 more matches
Index - Web APIs
WebAPIIndex
906 document.enablestylesheetsforset() api, cssom, dom, method, needsmarkupwork, needsspectable, reference enables the style sheets matching the specified name in the current style sheet set, and disables all other style sheets (except those without a title, which are always enabled).
... 933 document.laststylesheetset api, cssom, dom, document, property, reference, stylesheets, laststylesheetset the document.laststylesheetset property returns the last enabled style sheet set.
... this property's value changes whenever the document.selectedstylesheetset property is changed.
...And 9 more matches
Organizing your CSS - Learn web development
previous overview: building blocks as you start to work on larger stylesheets and big projects you will discover that maintaining a huge css file can be challenging.
... prerequisites: basic computer literacy, basic software installed, basic knowledge of working with files, html basics (study introduction to html), and an idea of how css works (study css first steps.) objective: to learn some tips and best practices for organizing stylesheets, and find out about some of the naming conventions and tools in common usage to help with css organization and team working.
... tips to keep your css tidy here are some general suggestions for ways to keep your stylesheets organised and tidy.
...And 7 more matches
Document - Web APIs
WebAPIDocument
document.laststylesheetsetread only returns the name of the style sheet set that was last enabled.
... has the value null until the style sheet is changed by setting the value of selectedstylesheetset.
... document.preferredstylesheetsetread only returns the preferred style sheet set as specified by the page author.
...And 5 more matches
Introducing the CSS Cascade - CSS: Cascading Style Sheets
WebCSSCascade
css declarations originate from different origins: the user-agent stylesheets, the author stylesheets, and the user stylesheets.
... user-agent stylesheets the browser has a basic style sheet that gives a default style to any document.
... these style sheets are named user-agent stylesheets.
...And 4 more matches
page-mod - Archive of obsolete content
the pagemod constructor takes a number of other options to control its behavior: contentstyle lists stylesheets to attach, supplied as strings.
... contentstylefile lists stylesheets to attach, supplied in separate files.
... name: contentstylefile type: string,array use this option to load one or more stylesheets into the targeted documents as user stylesheets.
...And 3 more matches
panel - Archive of obsolete content
the urls point to css stylesheets to load into the panel.
... the stylesheets must be packaged with the add-on under the add-on's data directory.
... that is, they can't refer to remote stylesheets.
...And 3 more matches
Using dynamic styling information - Web APIs
however, there are cases where actually obtaining or manipulating the rules can be useful (whether for whole stylesheets or individual elements), and that is described in further detail below.
... note also that, as with individual element's dom styles, when speaking of manipulating the stylesheets, this is not actually manipulating the physical document(s), but merely the internal representation of the document.
... to get to the style objects from the document, you can use the document.stylesheets property and access the individual objects by index (e.g., document.stylesheets[0] is the first stylesheet defined for the document, etc.).
...And 2 more matches
tabs - Archive of obsolete content
attaching stylesheets new in firefox 34.
...it has one of four possible values: "uninitialized": the tab's document is not yet loading "loading": the tab's document is still in the process of loading "interactive": the tab's document has loaded and is parsed, but resources such as images and stylesheets may still be loading "complete": the tab's document and all resources are fully loaded once a tab's readystate has entered "interactive", you can retrieve properties such as the document's url.
...at this point the document itself is fully loaded and parsed, but resources such as stylesheets and images may still be loading.
...at this point the document and its resources, such as images and stylesheets, have finished loading.
How to convert an overlay extension to restartless - Archive of obsolete content
step 7: manually handle global css stylesheets any global css style sheets which you are using will need to be registered upon load and unregistered when your extension is unloaded.
... components.utils.import("resource://gre/modules/services.jsm"); var stylesheets = ["chrome://myextension/skin/mystylesheet.css"]; function startup(data,reason) { ...
... // load stylesheets let stylesheetservice= components.classes["@mozilla.org/content/style-sheet-service;1"] .getservice(components.interfaces.nsistylesheetservice); for (let i=0,len=stylesheets.length;i<len;i++) { let stylesheeturi = services.io.newuri(stylesheets[i], null, null); stylesheetservice.loadandregistersheet(stylesheeturi, stylesheetservice.author_sheet); } ...
... // unload stylesheets let stylesheetservice = components.classes["@mozilla.org/content/style-sheet-service;1"] .getservice(components.interfaces.nsistylesheetservice); for (let i=0,len=stylesheets.length;i<len;i++) { let stylesheeturi = services.io.newuri(stylesheets[i], null, null); if (stylesheetservice.sheetregistered(stylesheeturi, stylesheetservice.author_sheet)) { stylesheetservice.unregistersheet(stylesheeturi, stylesheetservice.author_sheet); } } ...
Index - Archive of obsolete content
105 stylesheet/utils helper functions for working with stylesheets.
... 307 using the stylesheet service add-ons, extensions the stylesheet service allows extensions to manage user and ua stylesheets without having to touch usercontent.css or userchrome.css files.
... the api is defined in nsistylesheetservice.idl.
... 3806 correctly using titles with external stylesheets css, dom, guide, junk, stylesheets external stylesheets are often associated with html documents using the <link rel="stylesheeet"> element, but it is important to use the element's title attribute properly.
Anonymous Content - Archive of obsolete content
binding stylesheets a binding file can load stylesheets using the stylesheet element.
... by default these stylesheets apply to the bound element and to all anonymous content generated by all bindings attached to the bound element.
...stylesheets loaded by bindings that are attached using the dom are treated as author-level sheets.
...by default, stylesheets specified in bindings files are applied only to the bound element and to anonymous content generated by bindings attached to the element.
Examples of web and XML development using the DOM - Web APIs
in the next example (see example 4), you can use stylesheets and their rules to change styles for whole documents.
...nging color and font-size example</title> <script> function changetext() { var p = document.getelementbyid("pid"); p.style.color = "blue" p.style.fontsize = "18pt" } </script> </head> <body> <p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> <form> <p><input value="rec" type="button" onclick="changetext();" /></p> </form> </body> </html> example 4: using stylesheets the stylesheets property on the document object returns a list of the stylesheets that have been loaded on that document.
... you can access these stylesheets and their rules individually using the stylesheet, style, and cssrule objects, as demonstrated in this example, which prints out all of the style rule selectors to the console.
... var ss = document.stylesheets; for(var i = 0; i < ss.length; i++) { for(var j = 0; j < ss[i].cssrules.length; j++) { dump( ss[i].cssrules[j].selectortext + "\n" ); } } for a document with a single stylesheet in which the following three rules are defined: body { background-color: darkblue; } p { font-face: arial; font-size: 10pt; margin-left: .125in; } #lumpy { display: none; } this script outputs the following: body p #lumpy example 5: event propagation this example demonstrates how events fire and are handled in the dom in a very simple way.
XSL Transformations in Mozilla FAQ - Web APIs
mozilla won't load xslt stylesheets from a different domain for security reasons.
... note: starting in gecko 7.0, both text/xsl and application/xslt+xml are supported mime types for xslt media stylesheets.
...if you need platform dependent code or stylesheets, just do <xsl:if test="system-property('xsl:vendor')='transformiix'"> <!-- mozilla specific markup --> </xsl:if> <xsl:if test="system-property('xsl:vendor')='microsoft'"> <!-- ie specific markup --> </xsl:if> check system-properties.xml for the properties of your favorite system.
... this does not affect css stylesheets loaded from the generated dom, those honor media just like in pages without xslt.
Alternative style sheets - CSS: Cascading Style Sheets
an example: specifying the alternative stylesheets the alternate stylesheets are commonly specified using a <link> element with rel="alternate stylesheet" and title="..." attributes.
...there can only be one preferred stylesheet, so providing stylesheets with different title attributes will cause some of them to be ignored.
... see correctly using titles with external stylesheets for a more detailed discussion.
... recommendation earlier, the html specification itself defined the concept of preferred and alternate stylesheets.
<link>: The External Resource Link element - HTML: Hypertext Markup Language
WebHTMLElementlink
this element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.
... setting the disabled property in the dom causes the stylesheet to be removed from the document's document.stylesheets list.
...this attribute is mainly useful when linking to external stylesheets — it allows the user agent to pick the best adapted one for the device it runs on.
... examples including a stylesheet to include a stylesheet in a page, use the following syntax: <link href="style.css" rel="stylesheet"> providing alternative stylesheets you can also specify alternative style sheets.
XML in Mozilla - Archive of obsolete content
supported core xml w3c recommendations the core xml support includes parsing xml without validation (we use the expat parser), displaying xml with css, manipulating xml documents with scripts via dom, associating stylesheets with xml documents, and namespaces in xml.
... specification or technology status and/or further documentation xml 1.0 w3c recommendation namespaces in xml w3c recommendation associating stylesheets with xml documents w3c recommendation styling xml documents with css manipulating xml documents with scripts through dom serializing xml dom trees to javascript object trees (jxon) other supported xml w3c recommendations specification or technology documentation xhtml ...
...both of them demonstrate xml, associating stylesheets with xml, displaying xml with css, namespaces in xml, xhtml, simple xlinks, and manipulation of xml with scripts via dom.
XML - Archive of obsolete content
using a combination of xul's ready-made widgets (e.g., menubar, scrollbar, progressmeter, and so on) and xul's incorporation of such standards as html4, dom1/2, and cascading stylesheets, you can design any interface that you can imagine, using any number of different features, tools, and methodologies.
... gecko was designed to be lightweight, standards-compliant and cross-platform, so rather than defining on its own how these widgets should be rendered, gecko depends for all but the most basic behavioral and presentational aspects of the widgets upon cascading stylesheets.
... the combination of structure, as defined in the xul, style as defined by the stylesheets, and the other standards are rendered by gecko into the interface.
Stylesheet - MDN Web Docs Glossary: Definitions of Web-related terms
internal stylesheets are placed inside a <style> element inside the <head> of a web document, and external stylesheets are placed inside a separate .css file, which is applied to a document by referencing the file inside a <link> element in the document's head.
... external stylesheets are generally preferred because they allow you to control the styling of multiple pages from a single place, rather than having to repeat the css across each page.
... learn more general knowledge css first steps stylesheets on wikipedia ...
Cascade and inheritance - Learn web development
the cascade stylesheets cascade — at a very simple level this means that the order of css rules matter; when two rules apply that have equal specificity the one that comes last in the css is the one that will be used.
... the effect of css location finally, it is also useful to note that the importance of a css declaration depends on what stylesheet it is specified in — it is possible for users to set custom stylesheets to override the developer's styles, for example the user might be visually impaired, and want to set the font size on all web pages they visit to be double the normal size to allow for easier reading.
... important declarations in author style sheets important declarations in user style sheets it makes sense for web developers' stylesheets to override user stylesheets, so the design can be kept as intended, but sometimes users have good reasons to override web developer styles, as mentioned above — this can be achieved by using !important in their rules.
How CSS is structured - Learn web development
octype html> <html> <head> <meta charset="utf-8"> <title>my css experiment</title> <style> h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; } </style> </head> <body> <h1>hello world!</h1> <p>this is my first css example</p> </body> </html> in some circumstances, internal stylesheets can be useful.
...to apply uniform css styling to multiple pages using internal stylesheets, you must have an internal stylesheet in every web page that will use the styling.
...with css in internal stylesheets, there is the risk that even one simple styling change may require edits to multiple web pages.
CSS FAQ - Learn web development
LearnCSSHowtoCSS FAQ
classes allow you to style multiple elements, therefore they can lead to shorter stylesheets, rather than having to write out the same styling information in multiple rules that use id selectors.
... shorter stylesheets are more performant.
... explicitly re-defined style rule in css stylesheets, order is important.
Index - Learn web development
102 learn to style html using css beginner, css, codingscripting, debugging, landing, style, topic, length, specificity cascading stylesheets — or css — is the first technology you should start learning after html.
... 121 organizing your css beginner, css, codingscripting, learn, comments, formatting, methodologies, organizing, post-processor, pre-processor, styleguide as you start to work on larger stylesheets and big projects you will discover that maintaining a huge css file can be challenging.
... 137 how css works beginner, css, dom, learn we have learned the basics of css, what it is for and how to write simple stylesheets.
Experimental features in Firefox
nightly 63 no developer edition 63 no beta 63 no release 63 starting in firefox 68, on android only preference name dom.visualviewport.enabled constructable stylesheets the addition of a constructor to the cssstylesheet interface as well as a variety of related changes makes it possible to directly create new stylesheets without having to add the sheet to the html.
... this makes it much easier to create reusable stylesheets for use with shadow dom.
... nightly 73 no developer edition 73 no beta 73 no release 73 no preference name layout.css.constructable-stylesheets.enabled webrtc and media the following experimental features include those found in the webrtc api, the web audio api, the media session api, the media source extensions api, the encrypted media extensions api, and the media capture and streams api.
Mozilla Style System Documentation
the pres context forwards these calls to its style set object (stylesetimpl, interface nsistyleset), which does the real work (and also maintains the lists of stylesheets and owns the rule tree).
...for the css stylesheets, this process corresponds to css selector matching.
...i'm reluctant to write it both since i don't know much about it.] problems:a bunch the code needs to be rewritten to prevent stylesheets from blocking the parser and to reduce string copying (although that partly goes with parsing).] parsing stylesheet representation problems: the stylesheet representation uses way too much memory.
CSSStyleSheet - Web APIs
a list of cssstylesheet objects for a given document can be obtained using the document.stylesheets property.
... a cssstylesheet object is created and inserted into the document's document.stylesheets list automatically by the browser, when a stylesheet is loaded for a document.
... stylesheets list getting the owner element/rule given the style sheet object the interface for the owner object getting the cssstylesheet object from the owner <style> and <link> elements in the document yes .ownernode htmllinkelement, htmlstyleelement, or svgstyleelement .sheet css @import rule in other style sheets applied to the document yes .ownerr...
Document: DOMContentLoaded event - Web APIs
the domcontentloaded event fires when the initial html document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
...if you want the dom to get parsed as fast as possible after the user has requested the page, you can make your javascript asynchronous and optimize loading of stylesheets.
... if loaded as usual, stylesheets slow down dom parsing as they're loaded in parallel, "stealing" traffic from the main html document.
Document.readyState - Web APIs
interactive the document has finished loading and the document has been parsed but sub-resources such as images, stylesheets and frames are still loading.
... // but sub-resources such as images, stylesheets and frames are still loading.
... console.log("the first css rule is: " + document.stylesheets[0].cssrules[0].csstext); break; } readystatechange as an alternative to domcontentloaded event // alternative to domcontentloaded event document.onreadystatechange = function () { if (document.readystate === 'interactive') { initapplication(); } } readystatechange as an alternative to load event // alternative to load event document.onreadystatechange = function () { if (document.readystate === 'complete') { initapplication(); } } readystatechange as event listener to insert or modify the dom before domcontentloaded docu...
Window - Web APIs
WebAPIWindow
window.getdefaultcomputedstyle() gets default computed style for the specified element, ignoring author stylesheets.
... domcontentloaded fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
... load fired when the whole page has loaded, including all dependent resources such as stylesheets images.
HTTP Index - HTTP
WebHTTPIndex
this includes not only urls loaded directly into <script> elements, but also things like inline script event handlers (onclick) and xslt stylesheets which can trigger script execution.
... 101 csp: style-src csp, content, content-security-policy, directive, http, reference, security, style, source, style-src the http content-security-policy (csp) style-src directive specifies valid sources for stylesheets.
... 103 csp: style-src-elem csp, content, content-security-policy, directive, http, reference, security, style, source, style-src, style-src-elem the http content-security-policy (csp) style-src-elem directive specifies valid sources for stylesheets <style> elements and <link> elements with rel="stylesheet".
Creating reusable content with CSS and XBL - Archive of obsolete content
you can place stylesheets in separate files, and you can place scripts in separate files.
...you can use xbl to link selected elements to their own: stylesheets content properties and methods event handlers because you avoid linking everything at the document level, you can make self-contained parts that are easy to maintain and reuse.
XUL user interfaces - Archive of obsolete content
like other xml-based languages, xul uses css stylesheets.
...mozilla also supports a specialized graphics language for creating shapes, using css stylesheets to specify the style.
Style System Overview - Archive of obsolete content
content nodes (instead of stylesheets) also hold onto cssstyleruleimpl objects that represent their style attributes.
... the cascade stylesetimpl manages the different origins of rules in the cascade (ua, user, author) style set gets the nsistyleruleprocessor implementations from the style sheets, and the css stylesheets force one cssruleprocessor per origin (rather than one per stylesheet).
Same origin policy for XBL - Archive of obsolete content
determining the originating principal the principal originating the load is determined using the following steps: for external stylesheets (<link>, <?xml-stylesheet?>, user sheets, and ua sheets), it depends on where the sheet is loaded from, just like it would for an html document loaded from a similar source.
... for inline stylesheets (<style> and style attributes), the principal of the element node involved (meaning the <style> element or the element whose style attribute is being looked at).
What is a web server? - Learn web development
(for example, html documents, images, css stylesheets, and javascript files) a web server connects to the internet and supports physical data interchange with other devices connected to the web.
... hosting files first, a web server has to store the website's files, namely all html documents and their related assets, including images, css stylesheets, javascript files, fonts, and video.
Getting started with the Web - Learn web development
dealing with files a website consists of many files: text content, code, stylesheets, media content, and so on.
... css basics cascading stylesheets (css) is the code that you use to style your website.
Chrome-only CSS reference
MozillaGeckoChromeCSS
ua stylesheets.) note: most of the css properties exposed to the web in general are also usable in chrome stylesheets: see the css documentation for a list of these.
...ly styles to tree rows.::-moz-tree-row(hover)the ::-moz-tree-row(hover) css pseudo-class will match an element if the mouse cursor is presently hovering over a tree row.::-moz-tree-separatoractivated by the properties attribute.::-moz-tree-twistyactivated by the properties attribute.css -moz-bool-pref() @supports functionthe -moz-bool-pref() @supports condition is available to gecko chrome and ua stylesheets to check if a boolean preference is enabled.css <display-xul> component</display-xul>firefox supports the following -moz- prefixed xul display values:overflow-clip-boxthe overflow-clip-box css property specifies relative to which box the clipping happens when there is an overflow.
CustomizableUI.jsm
this example here uses nsistylesheetservice to do so.
... thiswindowsselectedtabswindow.alert('alert from html window of selected tab'); thisdomwindow.alert('alert from xul window'); } }); //end - use customizableui.jsm to create the widget //start - use style sheet service to style our widget to give it an icon cu.import('resource://gre/modules/services.jsm'); var sss = cc['@mozilla.org/content/style-sheet-service;1'].getservice(ci.nsistylesheetservice); var css = ''; css += '@-moz-document url("chrome://browser/content/browser.xul") {'; css += ' #id_of_my_widget_within_customizableui_and_dom {'; css += ' list-style-image: url("chrome://branding/content/icon16.png")'; //a 16px x 16px icon for when in toolbar css += ' }'; css += ' #id_of_my_widget_within_customizableui_and_dom[cui-areatype="menu-panel"],'; css += ' ...
Index - Firefox Developer Tools
54 page inspector css, dom, html, stylesheets, web development, web development:tools, l10n:priority use the page inspector to examine and modify the html and css of a page.
... 111 style editor css, stylesheets, tools, web development, web development:tools the style editor enables you to: 112 taking screenshots screenshot, tools you can use the developer tools to take a screenshot of the entire page, or of a single element in the page.
CSSStyleDeclaration.setProperty() - Web APIs
we know that the rule we want to alter to do this is contained inside the second stylesheet applied to the page, so we grab a reference to it using document.stylesheets[1].
...er'); const bgcolorbtn = document.queryselector('.bgcolor'); const colorbtn = document.queryselector('.color'); const box = document.queryselector('.box'); function random(min,max) { const num = math.floor(math.random()*(max-min)) + min; return num; } function randomcolor() { return 'rgb(' + random(0,255) + ', ' + random(0,255) + ', ' + random(0,255) + ')'; } const stylesheet = document.stylesheets[1]; let boxpararule; for(let i = 0; i < stylesheet.cssrules.length; i++) { if(stylesheet.cssrules[i].selectortext === '.box p') { boxpararule = stylesheet.cssrules[i]; } } function setrandomborder() { const newborder = random(1, 50) + 'px solid ' + randomcolor(); boxpararule.style.setproperty('border', newborder); } function setrandombgcolor() { const newbgcolor = randomcolor(); ...
CSSStyleDeclaration - Web APIs
for example, document.stylesheets[0].cssrules[0].style returns a cssstyledeclaration object on the first css rule in the document's first stylesheet.
... example var styleobj = document.stylesheets[0].cssrules[0].style; console.log(styleobj.csstext); for (var i = styleobj.length; i--;) { var namestring = styleobj[i]; styleobj.removeproperty(namestring); } console.log(styleobj.csstext); specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration' in that specification.
StyleSheet.media - Web APIs
WebAPIStyleSheetmedia
example <!doctype html> <html> <head> <link rel="stylesheet" href="document.css" type="text/css" media="screen" /> <style rel="stylesheet" type="text/css" media="screen, print"> body { background-color: snow; } </style> </head> <body> <script> for (var isheetindex = 0; isheetindex < document.stylesheets.length; isheetindex++) { console.log('document.stylesheets[' + string(isheetindex) + '].media: ' + json.stringify(document.stylesheets[isheetindex].media)); if (isheetindex === 0) document.stylesheets[isheetindex].media.appendmedium('handheld'); if (isheetindex === 1) document.stylesheets[isheetindex].media.deletemedium('print'); console.log('document.stylesheets[' + string(is...
...heetindex) + '].media: ' + json.stringify(document.stylesheets[isheetindex].media)); } /* will log: document.stylesheets[0].media: {"0":"screen"} document.stylesheets[0].media: {"0":"screen","1":"handheld"} document.stylesheets[1].media: {"0":"screen","1":"print"} document.stylesheets[1].media: {"0":"screen"} */ </script> </body> </html> specifications specification status comment css object model (cssom)the definition of 'stylesheet: media' in that specification.
:has() - CSS: Cascading Style Sheets
WebCSS:has
in earlier revisions of the css selectors level 4 specification, :has had a limitation that it couldn't be used within stylesheets.
...instead, browsers currently only support the use of :has() within stylesheets.
Specificity - CSS: Cascading Style Sheets
(the selectors declared inside :not() do, however.) for more information, visit: "specificity" in "cascade and inheritance", you can also visit: https://specifishity.com inline styles added to an element (e.g., style="font-weight: bold;") always overwrite any styles in external stylesheets, and thus can be thought of as having the highest specificity.
...using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
the -moz-appearance property was used in xul stylesheets to design custom widgets with platform-appropriate styling.
...starting with gecko/firefox 80, these uses were changed to -moz-default-appearance, which should never be used outside of internal stylesheets.
revert - CSS: Cascading Style Sheets
WebCSSrevert
the only difference is for properties that have values set by the browser or by custom stylesheets created by users (set on the browser side).
...in contrast, user-agent stylesheets set default values on the basis of css selectors.
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
we're going to touch on most of what you'll need to know when using color, including a list of what you can color and what css properties are involved, how you describe colors, and how to actually use colors both in stylesheets and in scripts.
... specifying colors in stylesheets the easiest way to apply color to elements—and the way you'll usually do it—is to simply specify colors in the css that's used when rendering elements.
<style>: The Style Information element - HTML: Hypertext Markup Language
WebHTMLElementstyle
in general, it is better to put your styles in external stylesheets and apply them using <link> elements.
... in the same manner as <link> elements, <style> elements can include media attributes that contain media queries, allowing you to selectively apply internal stylesheets to your document depending on media features such as viewport width.
Content Security Policy (CSP) - HTTP
WebHTTPCSP
it uses the following policy, disallowing everything but stylesheets from cdn.example.com.
...stylesheets are allowed to be loaded only from cdn.example.com, yet the website tries to load one from its own origin (http://example.com).
CSP: style-src - HTTP
the http content-security-policy (csp) style-src directive specifies valid sources for stylesheets.
... examples violation cases given this csp header: content-security-policy: style-src https://example.com/ the following stylesheets are blocked and won't load: <link href="https://not-example.com/styles/main.css" rel="stylesheet" type="text/css" /> <style> #inline-style { background: red; } </style> <style> @import url("https://not-example.com/styles/print.css") print; </style> as well as styles loaded using the link header: link: <https://not-example.com/styles/stylesheet.css>;rel=stylesheet inline style attributes ...
Content-Security-Policy-Report-Only - HTTP
it uses the following policy, disallowing everything but stylesheets from cdn.example.com.
...stylesheets are only allowed to be loaded from cdn.example.com, yet the website tries to load one from its own origin (http://example.com).
Content-Security-Policy - HTTP
style-src specifies valid sources for stylesheets.
... style-src-elem specifies valid sources for stylesheets <style> elements and <link> elements with rel="stylesheet".
Index - HTTP
WebHTTPHeadersIndex
this includes not only urls loaded directly into <script> elements, but also things like inline script event handlers (onclick) and xslt stylesheets which can trigger script execution.
... 48 csp: style-src csp, directive, http, reference, security the http content-security-policy (csp) style-src directive specifies valid sources for stylesheets.
Referrer-Policy - HTTP
ntent="origin"> or set it for individual requests with the referrerpolicy attribute on <a>, <area>, <img>, <iframe>, <script>, or <link> elements: <a href="http://example.com" referrerpolicy="origin"> alternatively, a noreferrer link relation on an a, area, or link element can be set: <a href="http://example.com" rel="noreferrer"> integration with css css can fetch resources referenced from stylesheets.
... these resources follow a referrer policy as well: external css stylesheets use the default policy (no-referrer-when-downgrade), unless it's overwritten via a referrer-policy http header on the css stylesheet’s response.
Mixed content - Web security
active content examples this section lists some types of http requests which are considered active content: <script> (src attribute) <link> (href attribute) (this includes css stylesheets) <iframe> (src attribute) xmlhttprequest requests fetch() requests all cases in css where a <url> value is used (@font-face, cursor, background-image, and so forth).
...some common examples of mixed content include javascript files, stylesheets, images, videos, and other media.
<xsl:apply-imports> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:apply-imports> element is fairly arcane, used mostly in complex stylesheets.
... import precedence requires that template rules in main stylesheets have higher precedence than template rules in imported stylesheets.
Index - XSLT: Extensible Stylesheet Language Transformations
WebXSLTIndex
20 <xsl:apply-imports> element, reference, xslt, apply-imports the <xsl:apply-imports> element is fairly arcane, used mostly in complex stylesheets.
... import precedence requires that template rules in main stylesheets have higher precedence than template rules in imported stylesheets.
An Overview - XSLT: Extensible Stylesheet Language Transformations
another string that is occasionally seen in stylesheets, "http://www.w3.org/tr/wd-xsl", indicates compliance with an earlier working draft (hence the wd) of the w3c document.
... stylesheets can be attached to an xml document via a processing instruction.
Transforming XML with XSLT - XSLT: Extensible Stylesheet Language Transformations
built from the ground up utilizing a wide variety of xml technologies, firefox incorporates within itself all of the mechanisms needed to process both original xml documents and the specialized stylesheets used to style and lay them out for html display, reducing server load with client-side processing.
... at present, gecko (the layout engine behind firefox) supports two forms of xml stylesheets.
Loading Content Scripts - Archive of obsolete content
at this point, content scripts are able to interact with the dom content, but externally-referenced stylesheets and images may not have finished loading.
Content Scripts - Archive of obsolete content
at this point, content scripts are able to interact with the dom content, but externally-referenced stylesheets and images may not have finished loading.
dev/panel - Archive of obsolete content
for example, the root actor object has a method listtabs and the stylesheet actor object has a method getstylesheets.
stylesheet/utils - Archive of obsolete content
experimental helper functions for working with stylesheets.
Low-Level APIs - Archive of obsolete content
stylesheet/utils helper functions for working with stylesheets.
Release notes - Archive of obsolete content
"./my-file" introduced everywhere as an alias for require("sdk/self").data.url("my-file") added the ability to attach stylesheets to individual tabs.
Extension Theming Guidelines - Archive of obsolete content
branding certain items of your extensions style, in particular logos and icons can be kept in the chrome content package such that they are not replaceable by custom themes stylesheets guidelines include stylesheets for every new window that your extension adds and for every window that your extension overlays content into be sure to add a stylesheet from your chrome skin package.
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
again, since xul is a type of xml, stylesheets are read in using the xml-stylesheet processing instruction.
Appendix F: Monitoring DOM changes - Archive of obsolete content
while it is no longer possible for web sites to use xbl directly, chrome code can still attach xbl bindings to web content from stylesheets loaded via the stylesheet service.
Custom XUL Elements with XBL - Archive of obsolete content
also unlike scripts, you can include stylesheets using the stylesheet xbl element.
An Interview With Douglas Bowman of Wired News - Archive of obsolete content
technically, there are 13 total stylesheets used at any one time.
Index of archived content - Archive of obsolete content
ds in your web pages developing cross-browser and cross-platform pages references summary of changes using the w3c dom using workers in extensions web standards choosing standards compliance over proprietary practices community correctly using titles with external stylesheets describing microformats in javascript displaying a graphic with audio samples fixing incorrectly sized list item markers fixing table inheritance in quirks mode issues arising from arbitrary-element hover mozilla's doctype sniffing parsing microformats in javascript popup window controls rdf in fifty words o...
Making it into a static overlay - Archive of obsolete content
static overlays are added to a xul file via a reference at the top of the file (much like stylesheets and javascript scripts).
Specifying the appearance - Archive of obsolete content
l#tinderbox-status[status="success"] { list-style-image: url("chrome://navigator/content/tb-success.png"); } statusbarpanel#tinderbox-status[status="testfailed"] { list-style-image: url("chrome://navigator/content/tb-testfailed.png"); } statusbarpanel#tinderbox-status[status="busted"] { list-style-image: url("chrome://navigator/content/tb-busted.png"); } mozilla can have multiple sets of stylesheets that govern its appearance, and we don't want to have to add these rules to each set (and have our extension break when a new set gets installed), so we'll put this stylesheet in a file called tinderstatus.css in the same directory as navigator.xul and reference it at the top of that file right under the global stylesheet reference: <?xml-stylesheet href="chrome://navigator/skin/" type="text/css"...
Content states and the style system - Archive of obsolete content
this list is created during the parsing of the stylesheets involved.
jspage - Archive of obsolete content
er.compute(d[e].value,c[e].value,b),parser:d[e].parser}); });a.$family={name:"fx:css:value"};return a;},serve:function(c,b){if($type(c)!="fx:css:value"){c=this.parse(c);}var a=[];c.each(function(d){a=a.concat(d.parser.serve(d.value,b)); });return a;},render:function(a,d,c,b){a.setstyle(d,this.serve(c,b));},search:function(a){if(fx.css.cache[a]){return fx.css.cache[a];}var b={};array.each(document.stylesheets,function(e,d){var c=e.href; if(c&&c.contains("://")&&!c.contains(document.domain)){return;}var f=e.rules||e.cssrules;array.each(f,function(j,g){if(!j.style){return;}var h=(j.selectortext)?j.selectortext.replace(/^\w+/,function(i){return i.tolowercase(); }):null;if(!h||!h.test("^"+a+"$")){return;}element.styles.each(function(k,i){if(!j.style[i]||element.shortstyles[i]){return;}k=string(j.style[i])...
Microsummary topics - Archive of obsolete content
however, because of a technical limitation (bug 340746), it does download css stylesheets referenced by the page.
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
void reset() removes all parameters and stylesheets.
Prism - Archive of obsolete content
custom stylesheets can be used to tweak the ui.
XBL 1.0 Reference - Archive of obsolete content
anonymous content introduction scoping and access using the dom content generation rules for generation attribute forwarding insertion points <children> handling dom changes event flow and targeting flow and targeting across scopes focus and blur events mouseover and mouseout events anonymous content and css selectors and scopes binding stylesheets binding implementations introduction methods properties inheritance of implementations event handlers example - sticky notes updated and adjusted for the current firefox implementation.
Introduction to XUL - Archive of obsolete content
since xml has no implicit display semantics, there must always be associated stylesheets.
Creating toolbar buttons (Customize Toolbar Window) - Archive of obsolete content
rdf-syntax-ns#" xmlns:chrome="http://www.mozilla.org/rdf/chrome#"> <seq about="urn:mozilla:skin:root"> <li resource="urn:mozilla:skin:classic/1.0"/> </seq> <description about="urn:mozilla:skin:classic/1.0"> <chrome:packages> <seq about="urn:mozilla:skin:classic/1.0:packages"> <li resource="urn:mozilla:skin:classic/1.0:myextension"/> </seq> </chrome:packages> </description> <seq about="urn:mozilla:stylesheets"> <li resource="chrome://global/content/customizetoolbar.xul"/> </seq> <seq about="chrome://global/content/customizetoolbar.xul"> <li>chrome://myextension/skin/toolbar-button.css</li> </seq> </rdf> the skin/contents.rdf file is denigrated in developing for later releases of firefox.
Creating a Skin - Archive of obsolete content
some of the rules conflict with those already in the global stylesheets.
Cross Package Overlays - Archive of obsolete content
the following example shows how: <rdf:seq about="urn:mozilla:stylesheets"> <rdf:li resource="chrome://messenger/content/messenger.xul"/> </rdf:seq> <rdf:seq about="chrome://messenger/content/messenger.xul"> <rdf:li>chrome://blueswayedshoes/skin/myskinfile.css</rdf:li> </rdf:seq> next, we'll see how to create an installer for a xul application.
Modifying the Default Skin - Archive of obsolete content
« previousnext » as of firefox 69, you must set the toolkit.legacyuserprofilecustomizations.stylesheets preference to true in about:config in order to load userchrome.css or usercontent.css files.
Skinning XUL Files by Hand - Archive of obsolete content
loading stylesheets in xul for your custom skin, let's assume you want to skin the xul file, xulnote_sample1.xul.
Using Remote XUL - Archive of obsolete content
we could write one ourselves, but we'll make our lives easier and use one of the stylesheets that comes with mozilla-based browsers.
Proposal - Archive of obsolete content
the transform must already exist on the machine running newsgator; stylesheets will not be downloaded or installed automatically.
Browser Detection and Cross Browser Support - Archive of obsolete content
if (document.all) { // internet explorer 4+ document.write('<link rel="stylesheet" type="text/css" src="style-ie.css">'); } else if (document.layers) { // navigator 4 document.write('<link rel="stylesheet" type="text/css" src="style-nn.css">'); } note how the above example only provided stylesheets for internet explorer and navigator 4 and even then only if the visitor has javascript support turned on in their browser.
CDN - MDN Web Docs Glossary: Definitions of Web-related terms
cdns are used widely for delivering stylesheets and javascript files (static assets) of libraries like bootstrap, jquery etc.
Index - MDN Web Docs Glossary: Definitions of Web-related terms
internal stylesheets are placed inside a <style> element inside the <head> of a web document, and external stylesheets are placed inside a separate .css file, which is applied to a document by referencing the file inside a <link> element in the document's head.
Images, media, and form elements - Learn web development
this includes all the items mentioned in the last three sections: button, input, select, textarea { font-family: inherit; font-size: 100%; box-sizing: border-box; padding: 0; margin: 0; } textarea { overflow: auto; } note: normalizing stylesheets are used by many developers to create a set of baseline styles to use on all projects.
Type, class, and ID selectors - Learn web development
this kind of behavior can sometimes be seen in "reset stylesheets", which strips out all of the browser styling.
CSS building blocks - Learn web development
organizing your css as you start to work on larger stylesheets and big projects you will discover that maintaining a huge css file can be challenging.
Responsive design - Learn web development
this is still an approach used today, and in most stylesheets, you will find the following css somewhere: img { max-width: 100%; } there are obvious downsides to this approach.
Getting started with CSS - Learn web development
this happens because browsers have internal stylesheets containing default styles, which they apply to all pages by default; without them all of the text would run together in a clump and we would have to style everything from scratch.
How CSS works - Learn web development
previous overview: first steps next we have learned the basics of css, what it is for and how to write simple stylesheets.
CSS first steps - Learn web development
how css works we have learned the basics of css, what it is for and how to write simple stylesheets.
Learn to style HTML using CSS - Learn web development
cascading stylesheets — or css — is the first technology you should start learning after html.
Dealing with files - Learn web development
previous overview: getting started with the web next a website consists of many files: text content, code, stylesheets, media content, and so on.
Adding vector graphics to the Web - Learn web development
(external stylesheets invoked from the svg file take no effect.) you cannot restyle the image with css pseudoclasses (like :focus).
Manipulating documents - Learn web development
to start with, you can get a list of all the stylesheets attached to a document using document.stylesheets, which returns an array-like object with cssstylesheet objects.
What is JavaScript? - Learn web development
whereas css uses <link> elements to apply external stylesheets and <style> elements to apply internal stylesheets to html, javascript only needs one friend in the world of html — the <script> element.
CSS performance optimization - Learn web development
the browser blocks rendering until it parses all of these styles but will not block rendering on styles it knows it will not use, such the print stylesheets.
Properly configuring server MIME types - Learn web development
for security reasons, gecko 2.0 will no longer do this for stylesheets loaded from a different origin than the requesting document.
Framework main features - Learn web development
with the addition of some helper modules, you can style your framework apps in sass or less, or transpile your css stylesheets with postcss.
React resources - Learn web development
you can read more about component stylesheets in the create-react-app docs.
Beginning our React todo list - Learn web development
we're not going to write per-component stylesheets, so first delete the app.css import from the top of app.js.
Chrome registration
style style overlays (custom css which will be applied to a chrome page) are registered with the following syntax: style chrome://uri-to-style chrome://stylesheet-uri [flags] note: only stylesheets at chrome uris can be applied in this way.
The Firefox codebase: CSS Guidelines
when importing your stylesheets, it's best to import the content css before the theme css, that way the theme values get to override the content values (which is probably what you want), and you're going to want them both after the global values, so your imports will look like this: <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?> <?xml-stylesheet href="chrome://browser/content/path/module.css" type="t...
CSS -moz-bool-pref() @supports function
the -moz-bool-pref() @supports condition is available to gecko chrome and ua stylesheets to check if a boolean preference is enabled.
Gecko Chrome
ua stylesheets.) chrome-only events referencethis page lists events that are only available in gecko chrome code (and sometimes in other privileged circumstances, eg.
Fonts for Mozilla 2.0's MathML engine
finally, include the mathml-fonts/resource/mathml.css style sheet in your web pages, for example by adding the following rule to the default style sheet of your web site: @import url('/path/to/resource/mathml.css'); browsers have default font-families in their user agent stylesheets.
Mozilla MathML Project
create mathml documents authoring mathml editors converters stylesheets original document information author(s): roger b.
Mozilla Web Developer FAQ
comp.infosystems.www.authoring.html web authoring faq comp.infosystems.www.authoring.stylesheets faq ciwas stylesheet authoring faq comp.lang.javascript faq original document information author(s): henri sivonen (please, no authoring questions to this address.) last updated date: may 12, 2007 copyright information: henri sivonen ...
Mozilla Quirks Mode Behavior
(this also applies to getelementsbyclassname.) stylesheets linked in the document with an advisory mime type of text/css will still be treated as css even if the server gives a content-type header other than text/css.
Index
MozillaTechXPCOMIndex
929 nsistylesheetservice interfaces, interfaces:scriptable, stylesheets, xpcom, xpcom api reference, xpcom interface reference allows extensions or embeddors to add to the built-in list of user or agent style sheets.
nsIWebProgressListener
(see below for a description of document requests.) other types of requests, such as requests for inline content (for example images and stylesheets) are considered normal requests.
nsIXSLTProcessor
reset() remove all parameters and stylesheets from this nsixsltprocessor.
XPCOM Interface Reference
vicemanagernsisessionstartupnsisessionstorensisimpleenumeratornsismsdatabaseservicensismsrequestmanagernsismsservicensisocketprovidernsisocketproviderservicensisockettransportnsisockettransportservicensisoundnsispeculativeconnectnsistackframensistandardurlnsistreamconverternsistreamlistenernsistringbundlensistringbundleoverridensistringbundleservicensistringenumeratornsistructuredclonecontainernsistylesheetservicensisupportsnsisupports proxiesnsisupportsarraynsisupportscstringnsisupportscharnsisupportsdoublensisupportsfloatnsisupportsidnsisupportsinterfacepointernsisupportsprboolnsisupportsprint16nsisupportsprint32nsisupportsprint64nsisupportsprtimensisupportspruint8nsisupportspruint16nsisupportspruint32nsisupportspruint64nsisupportsprimitivensisupportsprioritynsisupportsstringnsisupportsvoidnsisuppo...
XPCOM Interface Reference by grouping
ssibleretrieval nsiaccessiblerole nsiaccessiblescrolltype nsiaccessibleselectable nsiaccessiblestates nsiaccessibletable nsiaccessibletext nsiaccessibletreecache nsiaccessiblevalue nsiaccessnode nsisyncmessagesender script nsiscriptableunescapehtml nsiscriptableunicodeconverter nsiscripterror nsiscripterror2 stylesheet nsistylesheetservice url nsiuri nsiurl util nsidomserializer nsidomxpathevaluator nsidomxpathexception nsidomxpathexpression nsidomxpathresult xslt nsixsltexception nsixsltprocessor download nsidownload nsidownloadmanager nsidownloadprogresslistener element internal nsiworker nsiworkerglobalscope nsiworkermessa...
Theme Packaging
pre-requisites making a theme for thunderbird requires knowledge of cascading stylesheets (css), probably xbl, and some graphic design and aesthetic skill (...or maybe not).
Style Editor - Firefox Developer Tools
the style editor enables you to: view and edit all the stylesheets associated with a page create new stylesheets from scratch and apply them to the page import existing stylesheets and apply them to the page to open the style editor choose the "style editor" option from the "web developer" menu (which is a submenu in the "tools" menu on the mac).
CSSRule.cssText - Web APIs
WebAPICSSRulecssText
syntax string = cssrule.csstext example <style> body { background-color: darkblue; } </style> <script> var stylesheet = document.stylesheets[0]; alert(stylesheet.cssrules[0].csstext); // body { background-color: darkblue; } </script> specifications specification status comment css object model (cssom)the definition of 'cssrule: csstext' in that specification.
CSSRuleList - Web APIs
example // get the first style sheet’s first rule var first_rule = document.stylesheets[0].cssrules[0]; see also cssrule cssrulelist implementations there are multiple properties in the cssom that will return a cssrulelist.
CSSStyleDeclaration.getPropertyPriority() - Web APIs
example the following javascript code checks whether margin is marked as important in a css selector rule: var declaration = document.stylesheets[0].cssrules[0].style; var isimportant = declaration.getpropertypriority('margin') === 'important'; specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.getpropertypriority()' in that specification.
CSSStyleDeclaration.getPropertyValue() - Web APIs
example the following javascript code queries the value of the margin property in a css selector rule: var declaration = document.stylesheets[0].cssrules[0].style; var value = declaration.getpropertyvalue('margin'); // "1px 2px" specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.getpropertyvalue()' in that specification.
CSSStyleDeclaration.parentRule - Web APIs
example the following javascript code gets the parent css style rule from a cssstyledeclaration: var declaration = document.stylesheets[0].rules[0].style; var rule = declaration.parentrule; specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.parentrule' in that specification.
CSSStyleDeclaration.removeProperty() - Web APIs
example the following javascript code removes the background-color css property from a selector rule: var declaration = document.stylesheets[0].rules[0].style; var oldvalue = declaration.removeproperty('background-color'); specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.removeproperty()' in that specification.
CSSStyleRule.selectorText - Web APIs
syntax string = cssrule.selectortext example // for cssrule: body { background-color: darkblue; } var stylesheet = document.stylesheets[0]; alert(stylesheet.cssrules[0].selectortext); // body notes the implementation may have stripped out insignificant whitespace while parsing the selector.
CSSStyleRule.style - Web APIs
syntax styleobj = cssrule.style example function stilo() { alert(document.stylesheets[0].cssrules[0].style.csstext); } // displays "background-color: gray;" notes the declaration block is that part of the style rule that appears within the braces and that actually provides the style definitions (for the selector, the part that comes before the braces).
CSSStyleSheet.cssRules - Web APIs
examples individual rules within the stylesheet can then be accessed by index: let rulelist = document.stylesheets[0].cssrules; for (let i=0; i < rulelist.length; i++) { processrule(rulelist[i]); } rules can also be accessed using for...of: let rulelist = document.stylesheets[0].cssrules; for (let rule of rulelist) { processrule(rule); } however, because cssrule is not a proper array, you can't use foreach().
CSSStyleSheet.insertRule() - Web APIs
mystyle.insertrule('#blanc { color: white }', 0); function to add a stylesheet rule /** * add a stylesheet rule to the document (it may be better practice * to dynamically change classes, so style information can be kept in * genuine stylesheets and avoid adding extra elements to the dom).
CSSStyleSheet.ownerRule - Web APIs
let rulelist = document.stylesheets[0].cssrules; for (let rule of rulelist) { if (!rule.ownerrule) { /* rule is not imported */ } } this snipped obtains a reference to the stylesheet associated with the @import and processes it in some manner: let rulelist = document.stylesheets[0].cssrules; for (let rule of rulelist) { if (rule.ownerrule) { checkstylesheet(rule.ownerrule.stylesheet); } } specifications ...
CSSValue.cssText - Web APIs
WebAPICSSValuecssText
example var styledeclaration = document.stylesheets[0].cssrules[0].style; var cssvalue = styledeclaration.getpropertycssvalue("color"); console.log(cssvalue.csstext); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssvalue.csstext' in that specification.
CSSValue.cssValueType - Web APIs
example var styledeclaration = document.stylesheets[0].cssrules[0].style; var cssvalue = styledeclaration.getpropertycssvalue("color"); console.log(cssvalue.cssvaluetype); specifications specification status comment document object model (dom) level 2 style specificationthe definition of 'cssvalue.cssvaluetype' in that specification.
DocumentOrShadowRoot - Web APIs
documentorshadowroot.stylesheetsread only returns a stylesheetlist of cssstylesheet objects for stylesheets explicitly linked into, or embedded in a document.
Document Object Model (DOM) - Web APIs
the html dom api provides access to various browser features such as tabs and windows, css styles and stylesheets, browser history, and so forth.
KeyframeEffect.getKeyframes() - Web APIs
this is equivalent to specifying start and end states in percentages in css stylesheets using @keyframes.
KeyframeEffect.setKeyframes() - Web APIs
this is equivalent to specifying start and end states in percentages in css stylesheets using @keyframes.
MediaList.mediaText - Web APIs
const stylesheets = document.stylesheets; let stylesheet = stylesheets[0]; console.log(stylesheet.media.mediatext); specifications specification status comment css object model (cssom)the definition of 'mediatext' in that specification.
MediaList - Web APIs
WebAPIMediaList
const stylesheets = document.stylesheets; let stylesheet = stylesheets[0]; console.log(stylesheet.media.mediatext); specifications specification status comment css object model (cssom)the definition of 'medialist' in that specification.
ShadowRoot - Web APIs
documentorshadowroot.stylesheets read only returns a stylesheetlist of cssstylesheet objects for stylesheets explicitly linked into, or embedded in a document.
Storage Access API - Web APIs
scripts, images, stylesheets, etc.) will load with access to their first-party storage, which means they may send cookie headers and honor incoming set-cookie headers.
Stylesheet.href - Web APIs
WebAPIStyleSheethref
example // on a local machine: <html> <head> <link rel="stylesheet" href="example.css" type="text/css" /> <script> function sref() { alert(document.stylesheets[0].href); } </script> </head> <body> <div class="thunder">thunder</div> <button onclick="sref()">ss</button> </body> </html> // returns "file:////c:/windows/desktop/example.css notes if the style sheet is a linked style sheet, the value of its attribute is its location.
StyleSheet.ownerNode - Web APIs
syntax noderef = stylesheet.ownernode example <html lang="en"> <head> <link rel="stylesheet" href="example.css"> </head> <body> <button onclick="alert(document.stylesheets[0].ownernode)">show example.css’s ownernode</button> </body> </html> // displays "object htmllinkelement" notes for style sheets that are included by other style sheets, such as with @import, the value of this property is null.
StyleSheetList - Web APIs
examples get document stylesheet objects with for loop for (let i = 0; i < document.stylesheets.length; i++) { let stylesheet = document.stylesheets[i]; } get all css rules for the document using array methods const allcss = [...document.stylesheets] .map(stylesheet => { try { return [...stylesheet.cssrules] .map(rule => rule.csstext) .join(''); } catch (e) { console.log('access to stylesheet %s is denied.
Keyframe Formats - Web APIs
this is equivalent to specifying start and end states in percentages in css stylesheets using @keyframes.
Using the Web Animations API - Web APIs
with the web animations api, we can move interactive animations from stylesheets to javascript, separating presentation from behavior.
Window: DOMContentLoaded event - Web APIs
the domcontentloaded event fires when the initial html document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
Window.getComputedStyle() - Web APIs
the window.getcomputedstyle() method returns an object containing the values of all css properties of an element, after applying active stylesheets and resolving any basic computation those values may contain.
Window: load event - Web APIs
WebAPIWindowload event
the load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images.
Browser Differences - Web APIs
ie 5.0 and 5.5 (both windows) supported only the working draft of xslt, and thus are not compatible with xslt 1.0 stylesheets.
XSLTProcessor - Web APIs
void xsltprocessor.reset() removes all parameters and stylesheets from the xsltprocessor.
Accessibility Information for Web Authors - Accessibility
the juicy studio css analyzer will also analyze and report the color contrast and color brightness differences involved in your stylesheets.
:fullscreen - CSS: Cascading Style Sheets
syntax :fullscreen usage notes the :fullscreen pseudo-class lets you configure your stylesheets to automatically adjust the size, style, or layout of content when elements switch back and forth between full-screen and traditional presentations.
Detecting CSS animation support - CSS: Cascading Style Sheets
if( animation === false ) { // animate in javascript fallback } else { elem.style[ animationstring ] = 'rotate 1s linear infinite'; var keyframes = '@' + keyframeprefix + 'keyframes rotate { '+ 'from {' + keyframeprefix + 'transform:rotate( 0deg ) }'+ 'to {' + keyframeprefix + 'transform:rotate( 360deg ) }'+ '}'; if( document.stylesheets && document.stylesheets.length ) { document.stylesheets[0].insertrule( keyframes, 0 ); } else { var s = document.createelement( 'style' ); s.innerhtml = keyframes; document.getelementsbytagname( 'head' )[ 0 ].appendchild( s ); } } this code looks at the value of animation; if it's false, we know we need to use our javascript fallback code to perform our animation.
CSS reference - CSS: Cascading Style Sheets
WebCSSReference
d properties specificity value definition syntax css unit and value types values actual value computed value initial value resolved value specified value used value layout block formatting context box model containing block layout mode margin collapsing replaced elements stacking context visual formatting model dom-css / cssom major object types documentorshadowroot.stylesheets stylesheets[i].cssrules cssrules[i].csstext (selector & style) cssrules[i].selectortext htmlelement.style htmlelement.style.csstext (just style) element.classname element.classlist important methods cssstylesheet.insertrule() cssstylesheet.deleterule() ...
Replaced elements - CSS: Cascading Style Sheets
some replaced elements, such as <iframe> elements, may have stylesheets of their own, but they don't inherit the styles of the parent document.
Tools - CSS: Cascading Style Sheets
WebCSSTools
other tools css animation - stylie to check the device display information (helpful in responsive web design) - mydevice.io css menus - cssmenumaker.com a mighty, modern css linter that helps you enforce consistent conventions and avoid errors in your stylesheets - stylelint ...
CSS Tutorials - CSS: Cascading Style Sheets
WebCSSTutorials
it explains the fundamental concepts of the language and guides you in writing basic stylesheets.
will-change - CSS: Cascading Style Sheets
but use caution with the will-change property directly in stylesheets.
<b>: The Bring Attention To element - HTML: Hypertext Markup Language
WebHTMLElementb
further, stylesheets can change the default style of these elements, with the result that they are not necessarily displayed in bold.
<input type="search"> - HTML: Hypertext Markup Language
WebHTMLElementinputsearch
they are basically equivalent in behavior, but user agents may choose to style them differently by default (and, of course, sites may use stylesheets to apply custom styles to them).
HTML elements reference - HTML: Hypertext Markup Language
WebHTMLElement
this element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.
HTML documentation index - HTML: Hypertext Markup Language
WebHTMLIndex
this element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.
Reason: CORS request not HTTP - HTTP
to fix this problem, simply make sure you use https urls when issuing requests involving cors, such as xmlhttprequest, fetch apis, web fonts (@font-face), and webgl textures, and xsl stylesheets.
HTTP caching - HTTP
WebHTTPCaching
this is very important when web sites have css stylesheets or js scripts that have mutual dependencies, i.e., they depend on each other because they refer to the same html elements.
CSP: script-src - HTTP
this includes not only urls loaded directly into <script> elements, but also things like inline script event handlers (onclick) and xslt stylesheets which can trigger script execution.
CSP: style-src-elem - HTTP
the http content-security-policy (csp) style-src-elem directive specifies valid sources for stylesheets <style> elements and <link> elements with rel="stylesheet".
HTTP
WebHTTP
web pages today very commonly load cross-site resources, including css stylesheets, images, scripts, and other resources.
Authoring MathML - MathML
see this github repository to get woff fonts and sample css stylesheets to use on your web site and check its test page.
<maction> - MathML
class, id, style provided for use with stylesheets.
<math> - MathML
WebMathMLElementmath
class, id, style provided for use with stylesheets.
<menclose> - MathML
attributes class, id, style provided for use with stylesheets.
<merror> - MathML
WebMathMLElementmerror
attributes class, id, style provided for use with stylesheets.
<mfenced> - MathML
attributes class, id, style provided for use with stylesheets.
<mfrac> - MathML
WebMathMLElementmfrac
class, id, style provided for use with stylesheets.
<mglyph> - MathML
WebMathMLElementmglyph
class, id, style provided for use with stylesheets.
<mi> - MathML
WebMathMLElementmi
attributes class, id, style provided for use with stylesheets.
<mlabeledtr> - MathML
attributes class, id, style provided for use with stylesheets.
<mmultiscripts> - MathML
attributes class, id, style provided for use with stylesheets.
<mn> - MathML
WebMathMLElementmn
attributes class, id, style provided for use with stylesheets.
<mo> - MathML
WebMathMLElementmo
class, id, style provided for use with stylesheets.
<mover> - MathML
WebMathMLElementmover
class, id, style provided for use with stylesheets.
<mpadded> - MathML
attributes class, id, style provided for use with stylesheets.
<mphantom> - MathML
attributes class, id, style provided for use with stylesheets.
<mroot> - MathML
WebMathMLElementmroot
attributes class, id, style provided for use with stylesheets.
<mrow> - MathML
WebMathMLElementmrow
attributes class, id, style provided for use with stylesheets.
<ms> - MathML
WebMathMLElementms
attributes class, id, style provided for use with stylesheets.
<mspace> - MathML
WebMathMLElementmspace
attributes class, id, style provided for use with stylesheets.
<msqrt> - MathML
WebMathMLElementmsqrt
attributes class, id, style provided for use with stylesheets.
<msub> - MathML
WebMathMLElementmsub
attributes class, id, style provided for use with stylesheets.
<msubsup> - MathML
attributes class, id, style provided for use with stylesheets.
<msup> - MathML
WebMathMLElementmsup
attributes class, id, style provided for use with stylesheets.
<mtable> - MathML
WebMathMLElementmtable
alignmentscope unimplemented class, id, style provided for use with stylesheets.
<mtd> - MathML
WebMathMLElementmtd
attributes class, id, style provided for use with stylesheets.
<mtext> - MathML
WebMathMLElementmtext
attributes class, id, style provided for use with stylesheets.
<mtr> - MathML
WebMathMLElementmtr
attributes class, id, style provided for use with stylesheets.
<munder> - MathML
WebMathMLElementmunder
class, id, style provided for use with stylesheets.
<munderover> - MathML
class, id, style provided for use with stylesheets.
Critical rendering path - Web Performance
the browser initiates requests every time it finds links to external resources, be they stylesheets, scripts, or embedded image references.
Performance fundamentals - Web Performance
see if you can reproduce the problem by saving and loading a static copy of an html page (including any images/stylesheets/scripts it embeds).
Populating the page: how browsers work - Web Performance
tags that aren't going to be displayed, like the <head> and its children and any nodes with display: none, such as the script { display: none; } you will find in user agent stylesheets, are not included in the render tree as they will not appear in the rendered output.
Optimizing startup performance - Web Performance
don't include scripts or stylesheets that don't participate in the critical path in your startup html file.
SVG as an Image - SVG: Scalable Vector Graphics
images, stylesheets) cannot be loaded, though they can be used if inlined through data: uris.
Subresource Integrity - Web security
how subresource integrity helps using content delivery networks (cdns) to host files such as scripts and stylesheets that are shared among multiple sites can improve site performance and conserve bandwidth.
Common XSLT Errors - XSLT: Extensible Stylesheet Language Transformations
often times stylesheets contain code like <xsl:text disable-output-escaping="yes">&nbsp;</xsl:text>, this is equivalent to simply putting &#160; in the stylesheet which will work great in all xslt engines.
PI Parameters - XSLT: Extensible Stylesheet Language Transformations
if there are multiple xml-stylesheet pis the parameters apply to all stylesheets as a consequence of that all stylesheets are imported into a single stylesheet per the xslt spec.reference?
Resources - XSLT: Extensible Stylesheet Language Transformations
xsl results firefox extension (presently awaiting review) - allows one to experiment with xsl, by applying xsl stylesheets (which are manually entered, found via a url or on the file-system) to an xml document (the currently-loaded document or a manually entered/pasted one).
Using the Mozilla JavaScript interface to XSL Transformations - XSLT: Extensible Stylesheet Language Transformations
resetting the xsltprocessor object also implements a xsltprocessor.reset() method, which can be used to remove all stylesheets and parameters then put the processor back into its initial state.