{"id":2333,"date":"2024-12-13T16:44:36","date_gmt":"2024-12-13T15:44:36","guid":{"rendered":"https:\/\/blog.kodono.info\/wordpress\/?p=2333"},"modified":"2024-12-13T16:47:01","modified_gmt":"2024-12-13T15:47:01","slug":"determine-an-element-height-and-width-in-css-only-and-reuse-it-within-another-css-rule","status":"publish","type":"post","link":"https:\/\/blog.kodono.info\/wordpress\/2024\/12\/13\/determine-an-element-height-and-width-in-css-only-and-reuse-it-within-another-css-rule\/","title":{"rendered":"Determine an element `height` and `width` in CSS only and reuse it within another CSS rule"},"content":{"rendered":"<p>I found this technic on <a href=\"https:\/\/frontendmasters.com\/blog\/how-to-get-the-width-height-of-any-element-in-only-css\/\">https:\/\/frontendmasters.com\/blog\/how-to-get-the-width-height-of-any-element-in-only-css\/<\/a> \u2013 <strong>it only works on modern browsers (mainly Chrome and Edge)<\/strong><\/p>\n<p>Let&#8217;s define the properties:<\/p>\n<pre class=\"brush:css\">\r\n@property --_x {\r\n  syntax: \"&lt;number>\";\r\n  inherits: true;\r\n  initial-value: 0; \r\n}\r\n@property --_y {\r\n  syntax: \"&lt;number>\";\r\n  inherits: true;\r\n  initial-value: 0; \r\n}\r\n@property --w {\r\n  syntax: \"&lt;integer>\";\r\n  inherits: true;\r\n  initial-value: 0; \r\n}\r\n@property --h {\r\n  syntax: \"&lt;integer>\";\r\n  inherits: true;\r\n  initial-value: 0; \r\n}\r\n<\/pre>\n<p>Then, let&#8217;s find an element that is a common parent for both the element where we&#8217;ll calculate the height\/width, and the element that will use this height\/width, and we apply some CSS:<\/p>\n<pre class=\"brush:css\">\r\n.parent {\r\n  timeline-scope: --cx,--cy;\r\n  --w:calc(1\/(1 - var(--_x)));\r\n  --h:calc(1\/(1 - var(--_y)));\r\n  animation: x linear,y linear;\r\n  animation-timeline: --cx,--cy !important;\r\n  animation-range: entry 100% exit 100%;\r\n}\r\n<\/pre>\n<p>We finish up with some additional CSS:<\/p>\n<pre class=\"brush:css\">\r\n.get-dimension {\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n.get-dimension:before {\r\n  content:\"\";\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n  width: 1px;\r\n  aspect-ratio: 1;\r\n  view-timeline: --cx inline,--cy block;\r\n}\r\n@keyframes x {to{--_x:1}}\r\n@keyframes y {to{--_y:1}}\r\n<\/pre>\n<p>And finally, we can use <code>--w<\/code> and <code>--h<\/code> in the other element:<\/p>\n<pre class=\"brush:css\">\r\n.apply-dimension {\r\n  height: calc(var(--h)*1px);\r\n  width: calc(var(--w)*1px);\r\n}\r\n<\/pre>\n<p>Here is a demo:<br \/>\n<p class='codepen'  data-height='500' data-theme-id='1' data-slug-hash='vEByKod' data-default-tab='result' data-animations='run' data-editable='' data-embed-version='2'>\n\n<\/p>\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I found this technic on https:\/\/frontendmasters.com\/blog\/how-to-get-the-width-height-of-any-element-in-only-css\/ \u2013 it only works on modern browsers (mainly Chrome and Edge) Let&#8217;s define the properties: @property &#8211;_x { syntax: &#8220;&lt;number>&#8221;; inherits: true; initial-value: 0; } @property &#8211;_y { syntax: &#8220;&lt;number>&#8221;; inherits: true; initial-value: 0; } @property &#8211;w { syntax: &#8220;&lt;integer>&#8221;; inherits: true; initial-value: 0; } @property &#8211;h { syntax: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","hide_page_title":"","footnotes":""},"categories":[15,170,13],"tags":[153,123,152],"class_list":["post-2333","post","type-post","status-publish","format-standard","hentry","category-astuce","category-english","category-niveau-intermediaire","tag-astuce","tag-english","tag-niveau-intermediaire"],"_links":{"self":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/2333","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/comments?post=2333"}],"version-history":[{"count":10,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/2333\/revisions"}],"predecessor-version":[{"id":2340,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/2333\/revisions\/2340"}],"wp:attachment":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/media?parent=2333"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/categories?post=2333"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/tags?post=2333"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}