{"id":27716,"date":"2021-02-09T23:33:35","date_gmt":"2021-02-09T15:33:35","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=27716"},"modified":"2021-02-09T19:37:31","modified_gmt":"2021-02-09T11:37:31","slug":"css-object-model-cssom","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-object-model-cssom\/","title":{"rendered":"The Beginners Guide to CSS Object Model (CSSOM)"},"content":{"rendered":"<p>A lot happens between the <strong>first HTTP request<\/strong> and the <strong>final delivery<\/strong> of a web page. Data transmission and the browser\u2019s rendering pipeline require a lot of different technologies, one of them is the <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/drafts.csswg.org\/cssom\/\">CSS Object Model<\/a><\/strong>, or the <strong>CSSOM<\/strong>.<\/p>\n<p>The CSS Object Model takes the CSS code, and renders every selector <strong>into a tree structure<\/strong> for easier parsing. Perhaps it\u2019s not crucial for developers to fully understand this concept, but it\u2019s a valuable topic to study if you want to learn more about <strong>how browsers render code into a working website<\/strong>.<\/p>\n<p>In this post, I\u2019m going to cover the basics of the CSS Object Model, and show you how it works.<\/p>\n<div class=\"ref-block ref-block--post\" id=\"ref-post-1\">\n\t\t\t\t\t<a href=\"https:\/\/www.hongkiat.com\/blog\/css-priority-level\/\" class=\"ref-block__link\" title=\"Read More: A Guide to Understanding CSS Style Priorities\" rel=\"bookmark\"><span class=\"screen-reader-text\">A Guide to Understanding CSS Style Priorities<\/span><\/a>\n<div class=\"ref-block__thumbnail img-thumb img-thumb--jumbo\" data-img='{ \"src\" : \"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-priority-level.jpg\" }'>\n\t\t\t\t\t\t\t<noscript>\n<style>.no-js #ref-block-post-14194 .ref-block__thumbnail { background-image: url(\"https:\/\/assets.hongkiat.com\/uploads\/thumbs\/250x160\/css-priority-level.jpg\"); }<\/style>\n<\/noscript>\n\t\t\t\t\t\t<\/div>\n<div class=\"ref-block__summary\">\n<h4 class=\"ref-title\">A Guide to Understanding CSS Style Priorities<\/h4>\n<p class=\"ref-description\">\n\t\t\t\t\t\tThe Cascading Style Sheet (CSS) is one of the simplest web-related languages. Hence, many beginners starting their web...\t\t\t\t\t\t<span>Read more<\/span><\/p>\n<\/div>\n<\/div>\n<h3>What Is CSSOM?<\/h3>\n<p>The term CSS Object Model describes a <strong>map of all CSS selectors & relevant properties for each selector<\/strong>. These styles can be root elements or have nested children.<\/p>\n<p>CSSOM is very similar to the <strong>DOM in HTML<\/strong>, which stands for Document Object Model. Both of them are part of the <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/web.dev\/\/performance\/critical-rendering-path\">critical rendering path<\/a><\/strong> which is a series of steps that must happen to <strong>properly render a website<\/strong>. All these processes happen <strong>automatically<\/strong>, behind the scenes.<\/p>\n<p>So why is CSSOM important? It\u2019s the map used by the browser to <strong>properly render CSS styles<\/strong> on a web page. There\u2019s no easy way to tell a computer that all paragraphs in a <code>.main-content<\/code> div must have extra line-height.<\/p>\n<p>The solution is the CSS Object Model which <strong>maps out all elements and properties<\/strong> from your CSS code.<\/p>\n<p>CSSOM makes it easier for the browser to <strong>render styles on the page<\/strong>. The whole thing is very technical but it\u2019s worth understanding a little about the process, especially if you build websites.<\/p>\n<h3>How It Works<\/h3>\n<p>Both the DOM and CSSOM are <strong>used extensively by all web browsers<\/strong> to interpret and render web pages. The diagram below is from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/web.dev\/\/performance\/critical-rendering-path\/constructing-the-object-model?hl=en\">Google Developers Web Fundamentals guide<\/a>, and explains how the <strong>DOM is rendered in a web browser<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-object-model-cssom\/dom-rendering.jpg\" alt=\"Rendering the Document Object Model\" width=\"700\" height=\"384\"><\/figure>\n<p>In both the DOM & CSSOM, all information is <strong>converted from bytes into digital maps<\/strong> that render every element in a web document. The process works as follows:<\/p>\n<ol>\n<li>The browser <strong>downloads the HTML<\/strong> for a web page.<\/li>\n<li>While processing the HTML, the parser may bump into a link element <strong>referencing an external stylesheet<\/strong>.<\/li>\n<li>This CSS stylesheet is then <strong>parsed into a map<\/strong> using the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/cssom-1\/\">CSS Object Model specs<\/a>.<\/li>\n<li>The resulting code can then be <strong>applied to elements in the DOM<\/strong>.<\/li>\n<\/ol>\n<p>All of this happens very quickly, and occurs <strong>with every single page request<\/strong>. This other diagram below showcases an <strong>example tree structure of the CSSOM<\/strong>.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-object-model-cssom\/cssom-rendering.jpg\" alt=\"Rendering the CSS Object Model\" width=\"650\" height=\"355\"><\/figure>\n<p>Notice how some properties in the diagram have lighter grey font colors. These properties are <strong><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en\/docs\/Web\/Guide\/CSS\/Getting_started\/Cascading_and_inheritance\">inherited<\/a> from the parent<\/strong>. Since the body has a specific font size, all elements within the body also get that font size unless it\u2019s overridden.<\/p>\n<p>HTML and CSS strings are <strong>converted into tokens<\/strong> which can then be <strong>understood as nodes<\/strong> by the browser. These nodes are like <strong>objects within the tree structure<\/strong> that defines how the entire page should be constructed.<\/p>\n<p>The CSSOM and DOM are completely <strong>separate data models<\/strong>, therefore they\u2019re <strong>parsed separately of each other<\/strong>. But they both have <strong>similar tree structures<\/strong>, and both serve the same purpose: giving the browser a structure to render and identify different elements on the page.<\/p>\n<h3>Why Web Developers Should Care<\/h3>\n<p>Since all of the rendering <strong>happens on the backend<\/strong>, you really don\u2019t need to worry much about the CSSOM tree. But it can be useful to understand how it works.<\/p>\n<p>One thing to remember is that the <strong>CSSOM must be fully loaded<\/strong> before the web page will be displayed, as it will define how every element on the page should look like. If the page loaded before the CSSOM, it would appear as plain HTML first, followed by the styles a few seconds later.<\/p>\n<p>Browsers specifically avoid that because it would be confusing to end users. And it\u2019s worth noting that the CSSOM <strong>cannot be cached<\/strong>; it must be <strong>recreated on each page<\/strong>.<\/p>\n<p>Actual CSS files can be cached in order to load the assets quicker but rendering a page in the browser <strong>always requires running the CSSOM parser<\/strong>. This also means that JavaScript can have a negative impact on rendering and performance.<\/p>\n<p>I would highly recommend <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/dash.plotly.com\/external-resources\">reading this article<\/a> to learn more about external CSS\/JS resources and their load times.<\/p>\n<p>The best way to optimize your site is by crafting a <strong>natural cascade<\/strong> of resources which <strong>are loaded in tandem<\/strong>.<\/p>\n<p>It is possible to manipulate the CSSOM using JavaScript because it is <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/docs.w3cub.com\/dom\/css_object_model\">technically a JS API<\/a>. But it doesn\u2019t serve much of a purpose compared to <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.w3schools.com\/js\/js_htmldom.asp\">JavaScript DOM manipulation<\/a>.<\/p>\n<p>The bigger reason to learn about the CSSOM is to further educate yourself regarding how websites actually work.<\/p>\n<p>There are lots of things we take for granted that keep the Internet running smoothly. When you understand a little more about the entire process you can visualize how the whole thing comes together, and hopefully gain some appreciation for the existence of the World Wide Web.<\/p>\n<h3>Further Reading<\/h3>\n<p>I hope this intro can give you a solid idea of what the CSS Object Model is, and how it affects web pages. There <strong>isn\u2019t much to manipulate in the CSSOM<\/strong>, so it differs a bit from the DOM.<\/p>\n<p>However it\u2019s still a critical technology in web development, and it should clarify major aspects of browser rendering.<\/p>\n<p>There are many other resources discussing the CSSOM, and how it works. If you\u2019re looking to learn more, here are some posts I recommend:<\/p>\n<ul>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"http:\/\/nimbupani.com\/css-object-model.html\">CSS Object Model Overview<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/blog.frankmtaylor.com\/2013\/10\/15\/exploring-the-cssom-making-a-css-object-analyzer\/\">Exploring the CSSOM: Making a CSS Object Analyzer<\/a><\/li>\n<li><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/qarea.com\/blog\/webpage-rendering-how-it-works-tips-on-optimization\">What Every Frontend Developer Should Know About Webpage Rendering<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>A lot happens between the first HTTP request and the final delivery of a web page. Data transmission and the browser\u2019s rendering pipeline require a lot of different technologies, one of them is the CSS Object Model, or the CSSOM. The CSS Object Model takes the CSS code, and renders every selector into a tree&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3392],"tags":[507,4501],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>The Beginners Guide to CSS Object Model (CSSOM) - Hongkiat<\/title>\n<meta name=\"description\" content=\"A lot happens between the first HTTP request and the final delivery of a web page. Data transmission and the browser&#039;s rendering pipeline require a lot of\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/css-object-model-cssom\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"The Beginners Guide to CSS Object Model (CSSOM)\" \/>\n<meta property=\"og:description\" content=\"A lot happens between the first HTTP request and the final delivery of a web page. Data transmission and the browser&#039;s rendering pipeline require a lot of\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-object-model-cssom\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2021-02-09T15:33:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-object-model-cssom\/dom-rendering.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-object-model-cssom\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-object-model-cssom\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"The Beginners Guide to CSS Object Model (CSSOM)\",\"datePublished\":\"2021-02-09T15:33:35+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-object-model-cssom\\\/\"},\"wordCount\":969,\"commentCount\":4,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-object-model-cssom\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-object-model-cssom\\\/dom-rendering.jpg\",\"keywords\":[\"CSS\",\"CSS Tutorials\"],\"articleSection\":[\"Coding\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-object-model-cssom\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-object-model-cssom\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-object-model-cssom\\\/\",\"name\":\"The Beginners Guide to CSS Object Model (CSSOM) - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-object-model-cssom\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-object-model-cssom\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-object-model-cssom\\\/dom-rendering.jpg\",\"datePublished\":\"2021-02-09T15:33:35+00:00\",\"description\":\"A lot happens between the first HTTP request and the final delivery of a web page. Data transmission and the browser's rendering pipeline require a lot of\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-object-model-cssom\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-object-model-cssom\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-object-model-cssom\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-object-model-cssom\\\/dom-rendering.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-object-model-cssom\\\/dom-rendering.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-object-model-cssom\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"The Beginners Guide to CSS Object Model (CSSOM)\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"The Beginners Guide to CSS Object Model (CSSOM) - Hongkiat","description":"A lot happens between the first HTTP request and the final delivery of a web page. Data transmission and the browser's rendering pipeline require a lot of","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/css-object-model-cssom\/","og_locale":"en_US","og_type":"article","og_title":"The Beginners Guide to CSS Object Model (CSSOM)","og_description":"A lot happens between the first HTTP request and the final delivery of a web page. Data transmission and the browser's rendering pipeline require a lot of","og_url":"https:\/\/www.hongkiat.com\/blog\/css-object-model-cssom\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2021-02-09T15:33:35+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-object-model-cssom\/dom-rendering.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-object-model-cssom\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-object-model-cssom\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"The Beginners Guide to CSS Object Model (CSSOM)","datePublished":"2021-02-09T15:33:35+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-object-model-cssom\/"},"wordCount":969,"commentCount":4,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-object-model-cssom\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-object-model-cssom\/dom-rendering.jpg","keywords":["CSS","CSS Tutorials"],"articleSection":["Coding"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-object-model-cssom\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-object-model-cssom\/","url":"https:\/\/www.hongkiat.com\/blog\/css-object-model-cssom\/","name":"The Beginners Guide to CSS Object Model (CSSOM) - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-object-model-cssom\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-object-model-cssom\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-object-model-cssom\/dom-rendering.jpg","datePublished":"2021-02-09T15:33:35+00:00","description":"A lot happens between the first HTTP request and the final delivery of a web page. Data transmission and the browser's rendering pipeline require a lot of","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-object-model-cssom\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-object-model-cssom\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-object-model-cssom\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-object-model-cssom\/dom-rendering.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-object-model-cssom\/dom-rendering.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-object-model-cssom\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"The Beginners Guide to CSS Object Model (CSSOM)"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7d2","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27716","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=27716"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27716\/revisions"}],"predecessor-version":[{"id":52963,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/27716\/revisions\/52963"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=27716"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=27716"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=27716"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=27716"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}