Styles
This page describes simple solutions to big problems of web styles in the context of Zen and Mashweb.
Last updated
Was this helpful?
This page describes simple solutions to big problems of web styles in the context of Zen and Mashweb.
Last updated
Was this helpful?
While might not have a problem with CSS, it is obvious many people do. The css-tricks post lists the problems and their solutions (or workarounds), but there are other simple solutions (some perhaps better described as workarounds) to the big problems of web styles:
The essence of many CSS problems and the web's evolution past them are described in another css-tricks.com post, : "... CSS has always been used to lay out our web pages, but it’s never done a very good job of it. First, we used tables, then floats, positioning and inline-block, but all of these methods were essentially hacks and left out a lot of important functionality (vertical centering, for instance). Flexbox helped out, but it’s intended for simpler one-dimensional layouts, not complex two-dimensional ones (Flexbox and Grid actually work very well together). Grid is the very first CSS module created specifically to solve the layout problems we’ve all been hacking our way around for as long as we’ve been making websites." [Emphasis mine]
Vaadin.com's tutorial describes the problem of CSS's global scope and "the browser's very own solution to CSS encapsulation": "The Shadow DOM allows the browser to render DOM elements without putting them in the main DOM tree, which enables local scoping for HTML and CSS." Interestingly, as of , Chrome 90 browser will enable shadow DOMs to be created declaratively.
The basic idea of the Vaadin tutorial is to use a shadow DOM, but it is not necessary to do that directly. Web Components can create shadow DOMs automatically, and some of them (like at least some of the Vaadin components) are easy to target with JavaScript events, thus simplifying their direct manipulation via the mouse or touch. (See to learn how this is important.)
