Stack Overflow
Stack Overflow

Questions tagged [cssom]

CSSOM defines APIs (including generic parsing and serialization rules) for Media Queries, Selectors, and CSS itself.

The core features of the CSSOM are oriented towards providing basic capabilities to author-defined scripts to permit access to and manipulation of style related state information and processes.

Documentation: http://dev.w3.org/csswg/cssom/

64 questions
4
votes
1 answer

Is CSSOM and DOM creation asynchronous?

I have read that CSSOM creation is a bottleneck in terms of web page performance. But there seems to be some ways around it, like adding the media property to the stylesheet link. I'm trying to understand how to optimise my web app and came across…
nikjohn
  • 20,026
  • 14
  • 50
  • 86
3
votes
0 answers

When using styled-components together with content-security-policy React SPA fails to render on iOS Safari

I've been trying to lock down our production release to satisfy CSP requirements and have been successful except for when it comes to the styled-components script tag. Nonce is not really an option with an SPA so a sha seemed the best solution, and…
Jason
  • 2,271
  • 2
  • 24
  • 23
3
votes
1 answer

How to detect device's screen resolution on macbook?

It's said that to calculate screen real resolution I need to multiply screen.width by window.devicePixelRatio. The thing is on one of my laptops it works perfectly fine, window.screen.width = 1280, multiplying by pixel ratio (2) = 2560, which is…
yolope
  • 51
  • 5
3
votes
2 answers

How to show hidden pseudo-element with JavaScript

I'm using CSS to hide form elements: #main_form #form-field-email, #form-field-realtor_select { display: none;} #main_form .elementor-select-wrapper::before { display: none; } Then JavaScript to show them…
chris
  • 77
  • 8
3
votes
2 answers

Listening for changes made to CSS classes in Chrome Devtools

I want to check if someone has modified the CSS rules of an element through Chrome Devtools. Normally MutationObserver would suffice for this, however, MutationObserver is only able to observe changes to the inline style attribute, and cannot detect…
DataPools
  • 43
  • 5
3
votes
1 answer

Maintaining Vertical Rhythm on arbitrary images

I would like to be able to maintain vertical rhythm on a page that contains images of unknown heights. I found this but am using vanilla-js rather than jquery so a jquery plugin is out of the question. The other answer requires that the baseline be…
Aaron Sterling
  • 31
  • 2
3
votes
2 answers

Snapshot All CSS on a website

I am trying to write a tool that runs in the browser (in Javascript) and can take a "snapshot" of the state of a website at a single point in time. It strips out script tags, inlines images and fonts to data urls, and inlines CSS. The CSS part is…
ichdenkealso
  • 83
  • 6
3
votes
1 answer

Misconception of DOMContentLoaded event

From MDN, I know DOMContentLoaded would not wait for stylesheets. The DOMContentLoaded event is fired when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish…
ygjack
  • 53
  • 6
3
votes
2 answers

WebKit/Phantomjs why output of getComputedStyles is that way?

on most browsers (e.g. Firefox, Opera) getting the computed Style for a element return a nice object of type CSSStyleDeclaration. On Chrome 28 and PhantomJS 1.9 I get an object that starts with numbered keys listing all the CSS properties, and then…
gcb
  • 13,901
  • 7
  • 67
  • 92
3
votes
1 answer

How can I get the value of a CSS property that the browser does not support?

So I'm looking to get the value of a CSS property that the browser doesn't support. This is something I'd like to use to create a polyfill, but I need to know the value of the property at any given time. Here's a test file with all the methods I've…
LoveAndCoding
  • 7,857
  • 2
  • 31
  • 55
2
votes
1 answer

Serialize programmatic CSS style sheets (stylesheets that use CSSOM API)?

You can use document.documentElement.outerHTML in order to serialize a document to a HTML string. However, if we paste the result into a file and try to render it as HTML, it will not be always be faithful to the original display (ignoring truly…
Foobar
  • 7,458
  • 16
  • 81
  • 161
2
votes
1 answer

How to get the inherited values of element from JavaScript

Okay, so I've a script that gets the CSS property value of a clicked element. For this, I avoided window.getComputedStyle() because it basically converts rem values to px and so on... Instead, I've used CSSStyleSheet.cssRules just to keep the…
Abhay Salvi
  • 890
  • 3
  • 15
  • 39
2
votes
1 answer

Media queries: Overriding CSS rules vs defining screen specific CSS rules

I assume that, just like the media queries that are used in link tags, the media queries which we define in our CSS files are parsed/overwritten or omitted by the browser according to their media query rules (Actually I know that, although the CSS…
BWV831
  • 31
  • 4
2
votes
1 answer

What's the difference between VisualViewport.offsetTop and VisualViewport.pageTop?

Spec's here, https://wicg.github.io/visual-viewport/, but I can't understand the difference. Aren't the "initial containing block origin" coordinates always the same as the layout viewport coordinates? Thank you.
Wes
  • 3,978
  • 4
  • 24
  • 45
2
votes
3 answers

CSS Typed OM -- parsing background color?

const box = document.getElementById('rb'); console.log(box.computedStyleMap().get('background-color')) .red { background-color: #FF0000; } .box { width: 100px; height: 100px; }
Using the new…
mpen
  • 272,448
  • 266
  • 850
  • 1,236
1
2
3 4 5