If you’ve been working with JavaScript for a while, you may be fairly familiar with DOM (Document Object Model) and CSSOM (CSS Object Model) scripting. Beyond the interfaces defined by the DOM and CSSOM specifications, a subset of methods and properties are specified in the CSSOM View Module, providing an API for determining and manipulating DOM element geometry to render interesting user interfaces on the web. Prerequisites:
Table of Contents: The CSSOM View ModuleThe CSS Object Model (CSSOM) is a set of APIs allowing CSS manipulation from JavaScript. Just like the DOM provides the interface for manipulating the HTML, the CSSOM allows authors to read and manipulate CSS. The CSSOM View is a module of CSS that contains a bunch of properties and methods, all bundled up to provide authors with a separate interface for obtaining information about the visual view of elements. The properties in this module are predominantly read-only and are calculated each time they are accessed — live values. Currently, the CSSOM View Module is only a working draft and under revision in the W3C’s Table of Specification. Its essence, therefore, is to define these interfaces, both already existing and new, in a manner that can be compatible across browsers. Why Do Geometry Methods and Properties Matter At All?From my perspective, there are a few reasons to try understanding and using the CSSOM View properties and methods. First, it is not that the everyday user interface requires movable components to achieve its most basic user stories. Unless you’re building a game interface, you may not always need to make stuff movable on your website. Geometry properties are useful despite these because the ability to programmatically manipulate the visual view of DOM elements gives developers more superpowers for implementing dynamic user interfaces. Kanban boards are implemented because components can be dragged and dropped at relevant sections. More content is loaded as users scroll to the bottom of a document because scroll position values are readable. So, while it may not seem immediately obvious, it is through knowing the accurate size and position information of elements that these features are achievable. Second, when viewing HTML documents in a web browser, DOM Elements are rendered in visual shapes, so they have a corresponding visual representation made viewable/visual by browsers. Accessing the live visual properties of these DOM elements through the CSSOM View properties and methods gives an advantage over the regular CSS properties. And then you ask how:
Finally, it just seems way more flexible and useful to have a set of read-only lives values that can be relied on when writing some other code that manipulates the elements based on the current live values.
More after jump! Continue reading below ↓
Element Node GeometryOffsets
Unlike other properties in the CSSOM View, offset properties are only available to Offset Left and TopUsing the read-only properties Offset ParentThe Offset Width and HeightThese read-only properties provide the full outer size of element nodes. The ClientsClient Left and TopIn the most basic sense of it, these read-only properties give the size in pixels of an element’s left border width and the top-border width, respectively. In a deeper sense, however, the value of the So, where a document has a right-to-left writing direction and left vertical scrollbars, the Client Width and HeightThe read-only ScrollsScroll Left and TopAn element with no overflowing content on its The pixels returned by the The Note: The Scroll Width and HeightThe This is why if an element has no overflowing content on its MDN explains the
Window and Document Geometry
The geometry properties of the document loaded in the window and the window itself are relevant for several reasons. Sometimes we need to read the width of the entire viewport and the entire height of our document, other times, we even want to scroll a page to some definite extent and whatnot. Well, of course, the properties to read the relevant values and information are not left out in the CSSOM View Module. Because there’s a root Window Width and HeightThe properties for calculating the width and height of the window are divided into inner and outer width and height properties. To calculate the outer width and height of the window, the To obtain the inner width and height of the window, the You may need to obtain the inner — viewport width or height of the window without the scrollbar and borders and, in such cases, use the Document Width and HeightWe never set borders, padding, or margin values on the root element itself. Still, on elements contained in the Document, using the Scroll Left and TopAs explored in the Element Node Geometry section, the Thus, to determine the left or top scroll state of a document, using the The scroll state values of a document can alternatively and more preferably be obtained using the We can programmatically scroll the page in response to certain user interactions using scroll methods defined in the CSSOM View Module. Let’s consider them. The
|
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
April 2023
Categories |