{"id":7463,"date":"2025-12-27T12:39:36","date_gmt":"2025-12-27T09:39:36","guid":{"rendered":"https:\/\/1.cbm.ua\/?p=7463"},"modified":"2026-01-13T19:47:56","modified_gmt":"2026-01-13T16:47:56","slug":"11-new-css-features-every-browser-supports-in-2025","status":"publish","type":"post","link":"https:\/\/1.cbm.ua\/?p=7463","title":{"rendered":"11 New CSS (\u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438) Features Every Browser Supports in 2025"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\" style=\"width: 300px; height: 100%; border: 1px solid black;\">\n<div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"11 New CSS Features Every Browser Supports in 2025\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/55uUK-iJeNM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p>Color Switcher using light-dark(): <a href=\"https:\/\/codepen.io\/fbernack\/pen\/myePZYR\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/codepen.io\/fbernack\/pen\/myePZYR<\/a> <\/p>\n\n\n\n<style>\n.jp_my-gallery {\n  display: flex;       \/* \u0412\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0440\u044f\u0434 *\/\n  gap: 30px;           \/* \u0420\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438 *\/\n  align-items: center; \/* \u0412\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 *\/\n}\n<\/style>\n\n<div class=\"jp_my-gallery\">\n  <img loading=\"lazy\" decoding=\"async\" width=\"183\" height=\"112\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-4.png\" alt=\"\" class=\"wp-image-7570\" style=\"width:66px;height:auto\"\/>\n  <img loading=\"lazy\" decoding=\"async\" width=\"165\" height=\"110\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-5.png\" alt=\"\" class=\"wp-image-7572\" \nstyle=\"width:69px;height:auto\"\/>\n<\/div>\n\n\n\n<p><br>Popover API: <a href=\"https:\/\/codepen.io\/fbernack\/pen\/rNgmexV\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/codepen.io\/fbernack\/pen\/rNgmexV<\/a> <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"419\" height=\"180\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-6.png\" alt=\"\" class=\"wp-image-7584\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-6.png 419w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-6-300x129.png 300w\" sizes=\"auto, (max-width: 419px) 100vw, 419px\" \/><\/figure>\n\n\n\n<p><br>Popover Example by Arby: <a href=\"https:\/\/codepen.io\/mobalti\/pen\/EaYVJgr\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/codepen.io\/mobalti\/pen\/EaYVJgr<\/a> <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"455\" height=\"557\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-7.png\" alt=\"\" class=\"wp-image-7590\" style=\"width:149px;height:auto\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-7.png 455w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-7-245x300.png 245w\" sizes=\"auto, (max-width: 455px) 100vw, 455px\" \/><\/figure>\n\n\n\n<p><br>Relative Color Syntax: <a href=\"https:\/\/codepen.io\/fbernack\/pen\/jEbegJg\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/codepen.io\/fbernack\/pen\/jEbegJg<\/a> <\/p>\n\n\n\n<p>&#8212;base: #7c3aed;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"305\" height=\"99\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-8.png\" alt=\"\" class=\"wp-image-7591\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-8.png 305w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-8-300x97.png 300w\" sizes=\"auto, (max-width: 305px) 100vw, 305px\" \/><\/figure>\n\n\n\n<p><br>Align content vertically: <a href=\"https:\/\/codepen.io\/fbernack\/pen\/EaVYrrg\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/codepen.io\/fbernack\/pen\/EaVYrrg<\/a> <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"200\" height=\"195\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-11.png\" alt=\"\" class=\"wp-image-7603\" style=\"width:66px;height:auto\"\/><\/figure>\n\n\n\n<p><br>Form with contenteditable toggle: <a href=\"https:\/\/codepen.io\/fbernack\/pen\/GgpeqpY\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/codepen.io\/fbernack\/pen\/GgpeqpY<\/a> <\/p>\n\n\n\n<style>\n.jp_my-gallery {\n  display: flex;       \/* \u0412\u044b\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u0442 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b \u0432 \u0440\u044f\u0434 *\/\n  gap: 30px;           \/* \u0420\u0430\u0441\u0441\u0442\u043e\u044f\u043d\u0438\u0435 \u043c\u0435\u0436\u0434\u0443 \u043a\u0430\u0440\u0442\u0438\u043d\u043a\u0430\u043c\u0438 *\/\n  align-items: center; \/* \u0412\u044b\u0440\u0430\u0432\u043d\u0438\u0432\u0430\u043d\u0438\u0435 \u043f\u043e \u0432\u0435\u0440\u0442\u0438\u043a\u0430\u043b\u0438 *\/\n}\n<\/style>\n\n<div class=\"jp_my-gallery\">\n  <img decoding=\"async\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-9.png\" alt=\"\" class=\"wp-image-7570\" style=\"width:200px;height:auto\"\/>\n  <img decoding=\"async\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-10.png\" alt=\"\" class=\"wp-image-7570\" style=\"width:200px;height:auto\"\/>\n<\/div>\n\n\n\n<p><br>@property Example: <a href=\"https:\/\/codepen.io\/fbernack\/pen\/QwjZpNz\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/codepen.io\/fbernack\/pen\/QwjZpNz<\/a> <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"466\" height=\"460\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-12.png\" alt=\"\" class=\"wp-image-7609\" style=\"width:122px;height:auto\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-12.png 466w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-12-300x296.png 300w\" sizes=\"auto, (max-width: 466px) 100vw, 466px\" \/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>cod<\/summary>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;h1>Event Highlights&lt;\/h1>\n&lt;div id=\"highlights\" class=\"shelf\">\n  &lt;div class=\"tile\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1619229665876-f54b2276b7bd?q=80&amp;w=2070&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');\">&lt;\/div>\n  &lt;div class=\"tile\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1629276301687-be2af9fd6ba8?q=80&amp;w=2070&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');\">&lt;\/div>\n&lt;div class=\"tile\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1598387993441-a364f854c3e1?q=80&amp;w=2076&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');\">&lt;\/div>\n&lt;\/div>\n&lt;h2>On the Weekend&lt;\/h2>\n&lt;div class=\"shelf\">\n  &lt;div class=\"tile\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1507808973436-a4ed7b5e87c9?q=80&amp;w=1480&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');\">&lt;\/div>\n  &lt;div class=\"tile\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1415201364774-f6f0bb35f28f?q=80&amp;w=2070&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');\">&lt;\/div>\n  &lt;div class=\"tile\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1544013360-983116d2a733?q=80&amp;w=1674&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');\">&lt;\/div>\n  &lt;div class=\"tile\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1485872299829-c673f5194813?q=80&amp;w=1460&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');\">&lt;\/div>\n  &lt;div class=\"tile\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1429962714451-bb934ecdc4ec?q=80&amp;w=2070&amp;auto=format&amp;fit=crop&amp;ixlib=rb-4.1.0&amp;ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');\">&lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@property --tile {\n  syntax: \"&lt;length>\";\n  inherits: false;\n  initial-value: 50px;\n}\n\nbody {\n  font-family: system-ui, sans-serif;\n}\n\n.shelf {\n  display: flex;\n  gap: 1rem;\n  margin-bottom: 2rem;\n}\n\n.tile {\n  width: var(--tile);\n  height: var(--tile);\n  border-radius: 1rem;\n  background: lightgrey;\n  background-position: center;\n  background-size: cover;\n}\n\n#highlights .tile {\n  --tile: 100px;\n}<\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n<\/details>\n\n\n\n<p><br>@property Animating Gradient: <a href=\"https:\/\/codepen.io\/fbernack\/pen\/EaVKzvw\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/codepen.io\/fbernack\/pen\/EaVKzvw<\/a> <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"291\" height=\"150\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-13.png\" alt=\"\" class=\"wp-image-7611\" style=\"width:129px;height:auto\"\/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>cod<\/summary>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"wrap\">\n  &lt;div class=\"box old\" data-label=\"without @property\">&lt;\/div>\n  &lt;div class=\"box reg\" data-label=\"with @property\">&lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">:root {\n  --c1: hsl(210 90% 62%); \/* blue *\/\n  --c2: hsl(280 70% 72%); \/* purple *\/\n  --blend: 10%;\n}\n\n.wrap {\n  display: flex;\n  justify-content: space-between;\n  gap: 1.25rem;\n  max-width: 460px;\n  margin: 2rem auto;\n  font-family: system-ui, sans-serif;\n}\n\n.box {\n  width: 200px;\n  height: 200px;\n  border-radius: 16px;\n  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);\n  position: relative;\n  overflow: hidden;\n}\n\n.box::after {\n  content: attr(data-label);\n  position: absolute;\n  left: 8px;\n  bottom: 8px;\n  font-size: 12px;\n  opacity: 0.75;\n  background: rgba(255, 255, 255, 0.6);\n  padding: 0.15rem 0.45rem;\n  border-radius: 0.4rem;\n  -webkit-backdrop-filter: blur(6px);\n  backdrop-filter: blur(6px);\n}\n\n\/* LEFT BOX: old way -> stop jumps *\/\n.old {\n  --old-stop: 20%;\n  background: linear-gradient(\n    135deg,\n    var(--c1) 0%,\n    var(--c1) calc(var(--old-stop) - var(--blend)),\n    var(--c2) calc(var(--old-stop) + var(--blend)),\n    var(--c2) 100%\n  );\n  transition: --old-stop 0.5s ease; \/* discrete jump *\/\n}\n.old:hover {\n  --old-stop: 60%;\n}\n\n\/* RIGHT BOX: stop animates smoothly *\/\n@property --new-stop {\n  syntax: \"&lt;percentage>\";\n  inherits: false;\n  initial-value: 20%;\n}\n.reg {\n  --new-stop: 20%;\n  background: linear-gradient(\n    135deg,\n    var(--c1) 0%,\n    var(--c1) calc(var(--new-stop) - var(--blend)),\n    var(--c2) calc(var(--new-stop) + var(--blend)),\n    var(--c2) 100%\n  );\n  transition: --new-stop 0.5s ease; \/* smooth animation *\/\n}\n.reg:hover {\n  --new-stop: 60%;\n}\n<\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n<\/details>\n\n\n\n<p><br>Exclusive Accordion: <a href=\"https:\/\/codepen.io\/fbernack\/pen\/ogjXXdj\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/codepen.io\/fbernack\/pen\/ogjXXdj<\/a> <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"631\" height=\"593\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-14.png\" alt=\"\" class=\"wp-image-7615\" style=\"width:219px;height:auto\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-14.png 631w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-14-300x282.png 300w\" sizes=\"auto, (max-width: 631px) 100vw, 631px\" \/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>cod<\/summary>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"wrapper\">\n\n  &lt;div class=\"box\">\n    &lt;h1>The Accordion&lt;\/h1>\n    &lt;p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.&lt;\/p>\n    &lt;details name=\"my-accordion\">\n      &lt;summary>Lorem ipsum dolor sit amet&lt;\/summary>\n      &lt;p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.&lt;\/p>\n    &lt;\/details>\n    &lt;details name=\"my-accordion\" open>\n      &lt;summary>Consetetur sadipscing elitr&lt;\/summary>\n      &lt;p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.&lt;\/p>\n    &lt;\/details>\n    &lt;details name=\"my-accordion\">\n      &lt;summary>Sed diam nonumy&lt;\/summary>\n      &lt;p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.&lt;\/p>\n    &lt;\/details>\n  &lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">* {\n  font-family: sans-serif;\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  body: 0;\n}\n\n.wrapper {\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  min-height: 100vh;\n  background: #eee;\n  padding: 2rem;\n}\n\n.box {\n  width: 800px;\n  background: #fff;\n  border-radius: 2rem;\n  padding: 3rem 6rem;\n}\n\nsummary,\ndetails {\n  margin-bottom: 1em;\n}\nsummary {\n  font-weight: bold;\n  cursor: pointer;\n  &amp;::marker {\n    content: \"\";\n  }\n  &amp;::before {\n    content: \"+\";\n    width: 2rem;\n    height: 2rem;\n    display: inline-block;\n    background: #333;\n    border-radius: 1rem;\n    text-align: center;\n    line-height: 2rem;\n    color: #fff;\n    font-weight: 100;\n    margin-right: 1rem;\n  }\n}\ndetails {\n  border-bottom: 1px solid #ccc;\n\n  &amp;[open] summary::before {\n    content: \"\u2013\";\n  }\n}\n<\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n<\/details>\n\n\n\n<p><br>Horizontal Exclusive Accordion by web.dev: <a href=\"https:\/\/codepen.io\/web-dot-dev\/pen\/XWvBZNo\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/codepen.io\/web-dot-dev\/pen\/XWvBZNo<\/a> <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"610\" height=\"774\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-15.png\" alt=\"\" class=\"wp-image-7618\" style=\"aspect-ratio:0.7881420446912364;width:187px;height:auto\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-15.png 610w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-15-236x300.png 236w\" sizes=\"auto, (max-width: 610px) 100vw, 610px\" \/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>cod<\/summary>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script>\ndocument.documentElement.dataset.embed = window.location.search.includes('type=embed') ? \"yep\" : \"nope\";\n&lt;\/script>\n\n&lt;main>\n\t&lt;h1>Styling &lt;code>&amp;lt;details&amp;gt;&lt;\/code>: Horizontal Accordion&lt;\/h1>\n\n\t&lt;p class=\"warning\">Your browser does not support &lt;code>::details-content&lt;\/code>, so this demo won\u2019t work as intended. Please use a browser with support \u2013 such as Chrome 131 or newer \u2013 to check out this page.&lt;\/p>\n\n\t&lt;h2>Demo&lt;\/h2>\n\t\n\t&lt;div id=\"demo\">\n\t\t&lt;div class=\"accordion-wrapper\">\n\t\t\t&lt;details name=\"accordion\" id=\"boating\" open>\n\t\t\t&lt;summary>\n\t\t\t\t&lt;span>\ud83d\udea4&lt;\/span>\n\t\t\t\t&lt;!-- Source: https:\/\/unsplash.com\/photos\/white-sail-boat-on-sea-during-daytime-hXPG0Bk6JiM -->\n\t\t\t\t&lt;img draggable=false src=\"https:\/\/assets.codepen.io\/5928893\/lazarescu-alexandra-hXPG0Bk6JiM-unsplash.jpg\" alt=\"\">\n\t\t\t&lt;\/summary>\n\t\t\t&lt;div class=\"details-content-wrapper\">\n\t\t\t\t&lt;h3>Boating&lt;\/h3>\n\t\t\t\t&lt;p>Port mutiny draught handsomely ye furl flogging line shrouds hulk. Spirits Plate Fleet code of conduct.&lt;\/p>\n\t\t\t&lt;\/div>\n\t\t&lt;\/details>\n\t\t&lt;details name=\"accordion\" id=\"anchoring\">\n\t\t\t&lt;summary>\n\t\t\t\t&lt;span>\u2693\ufe0f&lt;\/span>\n\t\t\t\t&lt;!-- Source: https:\/\/unsplash.com\/photos\/black-metal-chain-on-grey-concrete-floor-3NjBnYmbsDg -->\n\t\t\t\t&lt;img draggable=false src=\"https:\/\/assets.codepen.io\/5928893\/sophie-walker-3NjBnYmbsDg-unsplash.jpg\" alt=\"\">\n\t\t\t&lt;\/summary>\n\t\t\t&lt;div class=\"details-content-wrapper\">\n\t\t\t\t&lt;h3>Anchoring&lt;\/h3>\n\t\t\t\t&lt;p>Ahoy league hands Sea Legs keelhaul salmagundi fire ship crimp Privateer galleon. Booty boom yard boatswain quarter.&lt;\/p>\n\t\t\t&lt;\/div>\n\t\t&lt;\/details>\n\t\t&lt;details name=\"accordion\" id=\"fishing\">\n\t\t\t&lt;summary>\n\t\t\t\t&lt;span>\ud83c\udfa3&lt;\/span>\n\t\t\t\t&lt;!-- https:\/\/unsplash.com\/photos\/person-holding-black-fishing-rod-6_HqvY1E7NI -->\n\t\t\t\t&lt;img draggable=false src=\"https:\/\/assets.codepen.io\/5928893\/mathieu-le-roux-6_HqvY1E7NI-unsplash.jpg\" alt=\"\">\n\t\t\t&lt;\/summary>\n\t\t\t&lt;div class=\"details-content-wrapper\">\n\t\t\t\t&lt;h3>Fishing&lt;\/h3>\n\t\t\t\t&lt;p>No prey, no pay heave down splice the main brace furl cable snow walk the plank chase guns piracy bucko.&lt;\/p>\n\t\t\t&lt;\/div>\n\t\t&lt;\/details>\n\t\t&lt;details name=\"accordion\" id=\"lighthouses\">\n\t\t\t&lt;summary>\n\t\t\t\t&lt;span>\ud83d\udd26&lt;\/span>\n\t\t\t\t&lt;!-- https:\/\/unsplash.com\/photos\/a-white-and-red-lighthouse-sitting-on-top-of-a-cliff-3ml9wykJCWQ -->\n\t\t\t\t&lt;img draggable=false src=\"https:\/\/assets.codepen.io\/5928893\/kamy-3ml9wykJCWQ-unsplash.jpg\" alt=\"\">\n\t\t\t&lt;\/summary>\n\t\t\t&lt;div class=\"details-content-wrapper\">\n\t\t\t\t&lt;h3>Lighthouses&lt;\/h3>\n\t\t\t\t&lt;p>Deadlights squiffy salmagundi cable pinnace parrel topsail Corsair Arr mizzenmast.&lt;\/p>\n\t\t\t&lt;\/div>\n\t\t&lt;\/details>\n\t\t&lt;details name=\"accordion\" id=\"reefs\">\n\t\t\t&lt;summary>\n\t\t\t\t&lt;span>\ud83e\udeb8&lt;\/span>\n\t\t\t\t&lt;!-- https:\/\/unsplash.com\/photos\/gray-and-black-fish-under-water-hqAGgNsMpEY -->\n\t\t\t\t&lt;img draggable=false src=\"https:\/\/assets.codepen.io\/5928893\/francesco-ungaro-hqAGgNsMpEY-unsplash.jpg\" alt=\"\">\n\t\t\t&lt;\/summary>\n\t\t\t&lt;div class=\"details-content-wrapper\">\n\t\t\t\t&lt;h3>Reefs&lt;\/h3>\n\t\t\t\t&lt;p>Keel yard poop deck brigantine gaff six pounders bring a spring\n\t\t\t\t\tupon her cable interloper lad pink.&lt;\/p>\n\t\t\t&lt;\/div>\n\t\t&lt;\/details>\n\t\t&lt;\/div>\n\t&lt;\/div>\n\n\t&lt;p>Demo for &lt;a href=\"https:\/\/developer.chrome.com\/blog\/styling-details\" target=\"_top\">https:\/\/developer.chrome.com\/blog\/styling-details&lt;\/a>, built after &lt;a href=\"https:\/\/codepen.io\/jakob-e\/full\/MWzRjNe\" target=\"_top\">https:\/\/codepen.io\/jakob-e\/full\/MWzRjNe&lt;\/a>&lt;\/p>\n\n\t&lt;h2>The Code&lt;\/h2>\n\t\n\t&lt;h3>UI&lt;\/h3>\n\t\n\t&lt;pre>&lt;code>.accordion-wrapper {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 1rem;\n}\n\ndetails {\n\tdisplay: flex;\n\tflex-direction: row;\n\t\n\theight: 30rem;\n\tborder-radius: 2rem;\n\toverflow: hidden;\n\t\n\t\/* To make the image positioning work \u2026*\/\n\tposition: relative;\n\tz-index: 1;\n\t\n\t\/* Hide marker *\/\n\t::marker {\n\t\tcontent: '';\n\t}\n\t\n\t\/* The image is tucked in the summary, because otherwise it would be hidden when not [open] as it ends up in the ::details-content pseudo *\/\n\tsummary img {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tobject-fit: cover;\n\t\tz-index: -1;\n\t\ttransition: filter 0.5s ease;\n\t}\n\t\/* Animate the image *\/\n\t&amp;[open] summary img {\n\t\tfilter: brightness(0.5);\n\t}\n\t\n\tsummary {\n\t\tpadding: 1rem 1em;\n\t\twidth: 5rem;\n\t\tflex-shrink: 0; \/* Prevent shrinking *\/\n\t\ttext-align: center;\n\t}\n\t\n\t.details-content-wrapper {\n\t\tpadding: 1.5rem 1em;\n\t\twidth: 300px; \/* Fixate the width of the content so that the text doesn\u2019t wrap\/unwrap when expanding the details *\/\n\t}\n}\n\n.details-content-wrapper {\n\t\/* Animate-in the text when open *\/\n\tp {\n\t\ttransform: translateY(2rem);\n\t\topacity: 0;\n\t\ttransition: all 0.5s ease;\n\t\ttransition-delay: 0.5s;\n\t}\n\t\n\t[open] &amp; p {\n\t\ttransform: none;\n\t\topacity: 1;\n\t\ttransition-delay: 0.5s;\n\t}\n}&lt;\/code>&lt;\/pre>\n\t\n\t&lt;h3>Animation&lt;\/h3>\n\t&lt;pre>&lt;code>\/* Animation *\/\n::details-content {\n\ttransition: width 0.5s ease, content-visibility 0.5s ease allow-discrete;\n\twidth: 0;\n}\n\n[open]::details-content {\n\twidth: 300px;\n}&lt;\/code>&lt;\/pre>\n&lt;\/main><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">@supports selector(::details-content) {\n\t.warning {\n\t\tdisplay: none;\n\t}\n}\n\n.accordion-wrapper {\n\tdisplay: flex;\n\tflex-direction: row;\n\tgap: 1rem;\n\twidth: min-content;\n\tmargin: 0 auto;\n}\n\ndetails {\n\tdisplay: flex;\n\tflex-direction: row;\n\n\tbackground: transparent;\n\tcolor: white;\n\t\n\theight: 30rem;\n\tborder-radius: 2rem;\n\toverflow: hidden;\n\t\n\t\/* To make the image work \u2026*\/\n\tposition: relative;\n\tz-index: 1;\n\t\n\t--open-size: min(30vw, 300px);\n\t\n\t\/* Hide marker *\/\n\t::marker {\n\t\tcontent: '';\n\t}\n\t\n\t\/* The image is tucked in the summary, because otherwise it would be hidden when not [open] as it ends up in the ::details-content pseudo *\/\n\tsummary img {\n\t\tposition: absolute;\n\t\ttop: 0;\n\t\tleft: 0;\n\t\twidth: 100%;\n\t\theight: 100%;\n\t\tobject-fit: cover;\n\t\tz-index: -1;\n\t\ttransition: filter 0.5s ease;\n\t}\n\t\/* Animate the image *\/\n\t&amp;[open] summary img {\n\t\tfilter: brightness(0.5);\n\t}\n\t\n\tsummary {\n\t\tpadding: 1rem 1em;\n\t\twidth: 5rem;\n\t\tflex-shrink: 0; \/* Prevent shrinking *\/\n\t\ttext-align: center;\n\t\t\n\t\tspan {\n\t\t\tdisplay: grid;\n\t\t\tplace-content: center;\n\t\t\twidth: 100%;\n\t\t\taspect-ratio: 1;\n\t\t\tborder-radius: 50%;\n\t\t\tbackground: rgb(0 0 0 \/ 0.25);\n\t\t}\n\t\t\n\t\t&amp;:focus {\n\t\t\toutline: none;\n\t\t}\n\t}\n\t\n\t.details-content-wrapper {\n\t\tpadding: 1.5rem 1em;\n\t\twidth: var(--open-size);\n\t}\n\t\n\t&amp;:hover, &amp;:has(summary:focus) {\n\t\toutline: 3px solid cadetblue;\n\t\toutline-offset: 3px;\n\t}\n}\n\n.details-content-wrapper {\n\t\/* We need margin-trim \u2026 *\/\n\t:first-child { margin-top: 0; }\n\t:last-child {\tmargin-bottom: 0;\t}\n\t\n\t\/* Animate-in the text when open *\/\n\tp {\n\t\ttransform: translateY(2rem);\n\t\topacity: 0;\n\t\ttransition: all 0.5s ease;\n\t\ttransition-delay: 0.5s;\n\t}\n\t\n\t[open] &amp; p {\n\t\ttransform: none;\n\t\topacity: 1;\n\t\ttransition-delay: 0.5s;\n\t\t\n\t\t@starting-style {\n\t\t\ttransform: translateY(2rem);\n\t\t\topacity: 0;\n\t\t}\n\t}\n}\n\n\/* Animation *\/\n::details-content {\n\ttransition: width 0.5s ease, content-visibility 0.5s ease allow-discrete;\n\twidth: 0;\n}\n\n[open]::details-content {\n\twidth: var(--open-size);\n}\n\n@layer reset {\n\t* {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t\tbox-sizing: border-box;\n\t}\n\n\thtml,\n\tbody {\n\t\theight: 100%;\n\t}\n\t\n\thtml {\n\t\tfont-size: 14px;\n\t}\n}\n\n@layer baselayout {\n\thtml {\n\t\tbackground: white;\n\t\tcolor: #444;\n\t\tfont-family: system-ui;\n\t\tline-height: 1.42;\n\t\t\n\t\toverscroll-behavior-x: none;\n\t\toverflow: auto;\n\t}\n\n\tmain {\n\t\tmax-width: 90ch;\n\t\tmargin: 0 auto;\n\t\tpadding-bottom: 10rem;\n\t}\n\n\tp {\n\t\tmargin-bottom: 1em;\n\t}\n\t\n\th1, h2 {\n\t\tmargin: 4em 0 1em;\n\t}\n\th3 {\n\t\tmargin: 1em 0 0.5em;\n\t}\n\t\n\t#demo {\n\t\tpadding: 1em;\n\t\tborder: 1px solid #ccc;\n\t\tbackground: #f4f6f9;\n\t}\n}\n\n@layer code {\n\tpre {\n\t\tborder: 1px solid #dedede;\n\t\tpadding: 1em;\n\t\tbackground: #f7f7f7;\n\t\tfont-family: \"Courier 10 Pitch\", Courier, monospace;\n\t\toverflow-x: auto;\n\t\tborder-left: 0.4em solid cornflowerblue;\n\t\ttab-size: 4;\n\t}\n\n\tcode:not(pre code) {\n\t\tbackground: #f7f7f7;\n\t\tborder: 1px solid rgb(0 0 0 \/ 0.2);\n\t\tpadding: 0.1rem 0.3rem;\n\t\tmargin: 0.1rem 0;\n\t\tborder-radius: 0.2rem;\n\t\t\/* \t\t\tdisplay: inline-block; *\/\n\t\t-webkit-box-decoration-break: clone;\n\t\twhite-space: pre-wrap;\n\t}\n}\n\n@layer warning {\n\t.warning {\n\t\tbox-sizing: border-box;\n\t\tpadding: 1em;\n\t\tmargin: 1em 0;\n\t\tborder: 1px solid #ccc;\n\t\tbackground: rgba(255 255 205 \/ 0.8);\n\t}\n\n\t.warning > :first-child {\n\t\tmargin-top: 0;\n\t}\n\n\t.warning > :last-child {\n\t\tmargin-bottom: 0;\n\t}\n\n\t.warning a {\n\t\tcolor: blue;\n\t}\n\t.warning--info {\n\t\tborder: 1px solid #123456;\n\t\tbackground: rgb(205 230 255 \/ 0.8);\n\t}\n\t.warning--alarm {\n\t\tborder: 1px solid red;\n\t\tbackground: #ff000010;\n\t}\n}\n\n\/* Hide a bunch of stuff when embedded *\/\n:root[data-embed=\"yep\"] {\n\tmain {\n\t\tpadding: 2em 1em;\n\t\t\n\t\t:not(p.warning, p.warning *, #demo, #demo *, #demo ~ p, #demo ~ p *) {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\t#demo ~ p {\n\t\tmargin-top: 1em;\n\t\ttext-align: center;\n\t}\n}<\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n<\/details>\n\n\n\n<p><\/p>\n\n\n\n<p><br>Backdrop-Filter Liquid Glass Effect: <a href=\"https:\/\/codepen.io\/fbernack\/pen\/VYvEWeZ\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/codepen.io\/fbernack\/pen\/VYvEWeZ<\/a> <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"625\" height=\"364\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-16.png\" alt=\"\" class=\"wp-image-7621\" style=\"width:336px;height:auto\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-16.png 625w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-16-300x175.png 300w\" sizes=\"auto, (max-width: 625px) 100vw, 625px\" \/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>cod<\/summary>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"wrapper\">\n  &lt;div class=\"liquid-glass-button\">\n    &lt;div class=\"inner\">\n      Hover me\n    &lt;\/div>\n  &lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">body {\n  font-family: system-ui, sans-serif;\n  margin: 0;\n  padding: 0;\n}\n\n.wrapper {\n  background-image: url(\"https:\/\/picsum.photos\/id\/484\/2400\/1600\");\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center 50%;\n  height: 100vh;\n  align-content: center;\n  justify-items: center;\n}\n\n.liquid-glass-button {\n  cursor: pointer;\n  font-size: 2rem;\n  color: #fff;\n  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.2);\n  border-radius: 2rem;\n  will-change: transform;\n  transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);\n\n  &amp;:hover {\n    transform: scale(1.2);\n  }\n\n  .inner {\n    border-radius: 2rem;\n    backdrop-filter: blur(3px);\n    padding: 1rem 2rem;\n    box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.4),\n      inset -1px -1px 1px 1px rgba(255, 255, 255, 0.4);\n  }\n}\n<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">body {\n  font-family: system-ui, sans-serif;\n  margin: 0;\n  padding: 0;\n}\n\n.wrapper {\n  background-image: url(\"https:\/\/picsum.photos\/id\/484\/2400\/1600\");\n  background-size: cover;\n  background-repeat: no-repeat;\n  background-position: center 50%;\n  height: 100vh;\n  align-content: center;\n  justify-items: center;\n}\n\n.liquid-glass-button {\n  cursor: pointer;\n  font-size: 2rem;\n  color: #fff;\n  box-shadow: 0 6px 6px rgba(0, 0, 0, 0.3), 0 0 20px rgba(0, 0, 0, 0.2);\n  border-radius: 2rem;\n  will-change: transform;\n  transition: transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1);\n\n  &amp;:hover {\n    transform: scale(1.2);\n  }\n\n  .inner {\n    border-radius: 2rem;\n    backdrop-filter: blur(3px);\n    padding: 1rem 2rem;\n    box-shadow: inset 2px 2px 1px 0 rgba(255, 255, 255, 0.4),\n      inset -1px -1px 1px 1px rgba(255, 255, 255, 0.4);\n  }\n}\n<\/pre>\n\n\n\n<p><\/p>\n<\/details>\n\n\n\n<p><br>Backdrop-Filter Gallery: <a href=\"https:\/\/codepen.io\/fbernack\/pen\/WbQQvwR\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/codepen.io\/fbernack\/pen\/WbQQvwR<\/a> <\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"626\" height=\"377\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-17.png\" alt=\"\" class=\"wp-image-7626\" style=\"aspect-ratio:1.6605405405405405;width:217px;height:auto\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-17.png 626w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-17-300x181.png 300w\" sizes=\"auto, (max-width: 626px) 100vw, 626px\" \/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>cod<\/summary>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"container\">\n  &lt;div class=\"filter-card\">\n    &lt;span>blur(2px)&lt;\/span>\n    &lt;div class=\"img\">&lt;img class=\"img-bg\" src=\"https:\/\/picsum.photos\/id\/110\/200\/300\" alt=\"\" \/>\n      &lt;div class=\"img-overlay\" style=\"backdrop-filter: blur(2px);\">&lt;\/div>\n    &lt;\/div>\n  &lt;\/div>\n  &lt;div class=\"filter-card\">\n    &lt;span>brightness(60%)&lt;\/span>\n    &lt;div class=\"img\">&lt;img class=\"img-bg\" src=\"https:\/\/picsum.photos\/id\/110\/200\/300\" alt=\"\" \/>\n      &lt;div class=\"img-overlay\" style=\"backdrop-filter: brightness(60%);\">&lt;\/div>\n    &lt;\/div>\n  &lt;\/div>\n  &lt;div class=\"filter-card\">\n    &lt;span>contrast(40%)&lt;\/span>\n    &lt;div class=\"img\">&lt;img class=\"img-bg\" src=\"https:\/\/picsum.photos\/id\/110\/200\/300\" alt=\"\" \/>\n      &lt;div class=\"img-overlay\" style=\"backdrop-filter: contrast(40%);\">&lt;\/div>\n    &lt;\/div>\n  &lt;\/div>\n  &lt;div class=\"filter-card\">\n    &lt;span>drop-shadow(4px 4px 10px blue)&lt;\/span>\n    &lt;div class=\"img\">&lt;img class=\"img-bg\" src=\"https:\/\/picsum.photos\/id\/110\/200\/300\" alt=\"\" \/>\n      &lt;div class=\"img-overlay\" style=\"backdrop-filter: drop-shadow(4px 4px 10px blue);\">&lt;\/div>\n    &lt;\/div>\n  &lt;\/div>\n  &lt;div class=\"filter-card\">\n    &lt;span>grayscale(30%)&lt;\/span>\n    &lt;div class=\"img\">&lt;img class=\"img-bg\" src=\"https:\/\/picsum.photos\/id\/110\/200\/300\" alt=\"\" \/>\n      &lt;div class=\"img-overlay\" style=\"backdrop-filter: grayscale(30%);\">&lt;\/div>\n    &lt;\/div>\n  &lt;\/div>\n  &lt;div class=\"filter-card\">\n    &lt;span>hue-rotate(120deg)&lt;\/span>\n    &lt;div class=\"img\">&lt;img class=\"img-bg\" src=\"https:\/\/picsum.photos\/id\/110\/200\/300\" alt=\"\" \/>\n      &lt;div class=\"img-overlay\" style=\"backdrop-filter: hue-rotate(120deg);\">&lt;\/div>\n    &lt;\/div>\n  &lt;\/div>\n  &lt;div class=\"filter-card\">\n    &lt;span>invert(70%)&lt;\/span>\n    &lt;div class=\"img\">&lt;img class=\"img-bg\" src=\"https:\/\/picsum.photos\/id\/110\/200\/300\" alt=\"\" \/>\n      &lt;div class=\"img-overlay\" style=\"backdrop-filter: invert(70%);\">&lt;\/div>\n    &lt;\/div>\n  &lt;\/div>\n  &lt;div class=\"filter-card\">\n    &lt;span>opacity(20%)&lt;\/span>\n    &lt;div class=\"img\">&lt;img class=\"img-bg\" src=\"https:\/\/picsum.photos\/id\/110\/200\/300\" alt=\"\" \/>\n      &lt;div class=\"img-overlay\" style=\"backdrop-filter: opacity(20%);\">&lt;\/div>\n    &lt;\/div>\n  &lt;\/div>\n  &lt;div class=\"filter-card\">\n    &lt;span>sepia(90%)&lt;\/span>\n    &lt;div class=\"img\">&lt;img class=\"img-bg\" src=\"https:\/\/picsum.photos\/id\/110\/200\/300\" alt=\"\" \/>\n      &lt;div class=\"img-overlay\" style=\"backdrop-filter: sepia(90%);\">&lt;\/div>\n    &lt;\/div>\n  &lt;\/div>\n  &lt;div class=\"filter-card\">\n    &lt;span>saturate(80%)&lt;\/span>\n    &lt;div class=\"img\">&lt;img class=\"img-bg\" src=\"https:\/\/picsum.photos\/id\/110\/200\/300\" alt=\"\" \/>\n      &lt;div class=\"img-overlay\" style=\"backdrop-filter: saturate(80%);\">&lt;\/div>\n    &lt;\/div>\n  &lt;\/div>\n&lt;\/div><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.container {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 2rem;\n  justify-content: center;\n}\n.filter-card {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 260px;\n}\n.filter-card span {\n  margin-bottom: 0.5rem;\n  font-size: 1rem;\n  text-align: center;\n}\n.img {\n  width: 240px;\n  height: 160px;\n  border-radius: 1rem;\n  overflow: hidden;\n  position: relative;\n}\n.img .img-bg {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 1rem;\n  z-index: 1;\n}\n.img .img-overlay {\n  position: absolute;\n  inset: 0;\n  z-index: 2;\n  background: rgba(255,255,255,0.3);\n  pointer-events: none;\n  width: 50%;\n  right: 0;\n  left: auto;\n  border-top-right-radius: 1rem;\n  border-bottom-right-radius: 1rem;\n}<\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n<\/details>\n\n\n\n<p><br>Scrollbar-gutter &amp; scrollbar-width: <a href=\"https:\/\/codepen.io\/fbernack\/pen\/KwdrpQM\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/codepen.io\/fbernack\/pen\/KwdrpQM<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"629\" height=\"546\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-18.png\" alt=\"\" class=\"wp-image-7628\" style=\"width:208px;height:auto\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-18.png 629w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-18-300x260.png 300w\" sizes=\"auto, (max-width: 629px) 100vw, 629px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"420\" height=\"479\" src=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-19.png\" alt=\"\" class=\"wp-image-7629\" style=\"width:184px;height:auto\" srcset=\"https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-19.png 420w, https:\/\/fjngqp1mvftjzxfzrdiggafze9wxueam.cdn-freehost.com.ua\/wp-content\/uploads\/2025\/12\/image-19-263x300.png 263w\" sizes=\"auto, (max-width: 420px) 100vw, 420px\" \/><\/figure>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>cod<\/summary>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;div class=\"wrap\">\n  &lt;div class=\"title\">\n    &lt;h1>scrollbar-gutter &amp; scrollbar-width&lt;\/h1>\n  &lt;\/div>\n\n  &lt;div class=\"controls\" role=\"group\" aria-label=\"Controls\">\n    &lt;label>&lt;input id=\"use-gutter\" type=\"checkbox\"> Use &lt;code>scrollbar-gutter: stable&lt;\/code>&lt;\/label>\n    &lt;button id=\"toggle\" type=\"button\">Toggle content&lt;\/button>\n    &lt;fieldset class=\"sw\" role=\"radiogroup\" aria-label=\"Scrollbar width\">\n      &lt;label>&lt;input type=\"radio\" name=\"sw\" value=\"auto\" checked> auto&lt;\/label>\n      &lt;label>&lt;input type=\"radio\" name=\"sw\" value=\"thin\"> thin&lt;\/label>\n      &lt;label>&lt;input type=\"radio\" name=\"sw\" value=\"none\"> none&lt;\/label>\n    &lt;\/fieldset>\n  &lt;\/div>\n\n  &lt;section class=\"card\">\n    &lt;h2>Scrollable area&lt;\/h2>\n    &lt;div id=\"scroller\" class=\"scroller\">\n      &lt;div id=\"tiles\" class=\"tiles\" data-cols=\"6\">&lt;\/div>\n    &lt;\/div>\n  &lt;\/section>\n\n  &lt;small class=\"hint\">Note: On systems with overlay scrollbars (e.g., macOS), the visible difference can be smaller.&lt;\/small>\n&lt;\/div><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">:root {\n  --line: #e5e7eb;\n  --muted: #6b7280;\n  --tile-gap: 12px;\n}\n* {\n  box-sizing: border-box;\n}\nhtml,\nbody {\n  height: 100%;\n}\nbody {\n  margin: 0;\n  font-family:  system-ui,  sans-serif;\n  background: #f8fafc;\n  display: grid;\n  place-items: center;\n  padding: 24px;\n}\n.wrap {\n  width: min(800px, 100%);\n  display: grid;\n  gap: 16px;\n}\n.title {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 12px;\n}\n.title h1 {\n  font-size: 18px;\n  margin: 0;\n}\n.title small {\n  color: var(--muted);\n}\n.controls {\n  display: flex;\n  gap: 12px;\n  align-items: center;\n  flex-wrap: wrap;\n}\nbutton {\n  appearance: none;\n  border: 1px solid var(--line);\n  background: white;\n  padding: 8px 10px;\n  border-radius: 10px;\n  cursor: pointer;\n}\nlabel {\n  display: inline-flex;\n  gap: 6px;\n  align-items: center;\n}\nfieldset.sw {\n  display: flex;\n  gap: 8px;\n  margin: 0;\n  padding: 0;\n  border: 0;\n}\n.card {\n  background: white;\n  border: 1px solid var(--line);\n  border-radius: 12px;\n  padding: 12px;\n  display: grid;\n  gap: 8px;\n}\n.card h2 {\n  margin: 0;\n  font-size: 16px;\n}\n.scroller {\n  height: 320px;\n  overflow: auto;\n  border: 1px solid var(--line);\n  border-radius: 10px;\n  resize: vertical;\n}\n.scroller.gutter {\n  scrollbar-gutter: stable;\n}\n.scroller.thin {\n  scrollbar-width: thin;\n}\n.scroller.none {\n  scrollbar-width: none;\n}\n.tiles {\n  --tile: 80px;\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--tile-gap);\n  padding: 12px;\n}\n.tile {\n  flex: 0 0 auto;\n  width: var(--tile);\n  height: var(--tile);\n  border-radius: 8px;\n  border: 1px solid var(--line);\n  display: grid;\n  place-items: center;\n  font: 600 12px\/1 ui-monospace, Menlo, Consolas, monospace;\n  color: var(--muted);\n  user-select: none;\n  background: #fff;\n}\n\n.tile:nth-child(6) {\n  background: red;\n  color: #FFF;\n}\n\n.hint {\n  color: var(--muted);\n  font-size: 12px;\n}\n<\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">const scroller = document.getElementById(\"scroller\");\nconst tiles = document.getElementById(\"tiles\");\nconst toggle = document.getElementById(\"toggle\");\nconst cbGutter = document.getElementById(\"use-gutter\");\nconst swRadios = document.querySelectorAll('input[name=\"sw\"]');\n\nlet long = false; \/\/ false \u2192 7 tiles (one row), true \u2192 many tiles (overflow)\n\nfunction buildTiles(count) {\n  tiles.innerHTML = \"\";\n  const frag = document.createDocumentFragment();\n  for (let i = 1; i &lt;= count; i++) {\n    const d = document.createElement(\"div\");\n    d.className = \"tile\";\n    d.textContent = i;\n    frag.appendChild(d);\n  }\n  tiles.appendChild(frag);\n}\n\nfunction parseGapPx(el) {\n  const cs = getComputedStyle(el);\n  const gap = (cs.gap || cs.columnGap || \"0px\").split(\" \")[0];\n  return parseFloat(gap);\n}\n\n\/\/ Baseline tile width is computed WITHOUT gutter so enabling it causes a wrap\/shift\nfunction setTileSizeBaseline() {\n  const cols = parseInt(tiles.dataset.cols || \"6\", 10);\n  const hadGutter = scroller.classList.contains(\"gutter\");\n  if (hadGutter) scroller.classList.remove(\"gutter\");\n\n  const cs = getComputedStyle(tiles);\n  const padX = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight);\n  const gap = parseGapPx(tiles);\n  const width = tiles.clientWidth - padX;\n  const tile = Math.floor((width - gap * (cols - 1)) \/ cols);\n  tiles.style.setProperty(\"--tile\", tile + \"px\");\n\n  if (hadGutter) scroller.classList.add(\"gutter\");\n}\n\nfunction setContent() {\n  const cols = parseInt(tiles.dataset.cols, 10);\n  buildTiles(long ? cols * 8 : cols * 1);\n}\n\nfunction applyScrollbarWidth(value) {\n  scroller.classList.remove(\"thin\", \"none\");\n  if (value === \"thin\") scroller.classList.add(\"thin\");\n  if (value === \"none\") scroller.classList.add(\"none\");\n}\n\n\/\/ Events\ntoggle.addEventListener(\"click\", () => {\n  long = !long;\n  setContent();\n});\ncbGutter.addEventListener(\"change\", (e) => {\n  scroller.classList.toggle(\"gutter\", e.target.checked);\n  if (!long) {\n    setTileSizeBaseline();\n    setContent();\n  }\n});\nswRadios.forEach((r) =>\n  r.addEventListener(\"change\", (e) => {\n    if (!e.target.checked) return;\n    applyScrollbarWidth(e.target.value);\n    if (!long &amp;&amp; !cbGutter.checked) {\n      setTileSizeBaseline();\n      setContent();\n    }\n  })\n);\n\nwindow.addEventListener(\"resize\", () => {\n  if (!long) {\n    setTileSizeBaseline();\n    setContent();\n  }\n});\n\nsetTileSizeBaseline();\nsetContent();\n<\/pre>\n\n\n\n<p><\/p>\n<\/details>\n\n\n\n<p><br><br>MDN target-text Demo: <a href=\"https:\/\/mdn.github.io\/css-examples\/target-text\/index.html#:~:text=Space%20forbids,first%20sighthttps:\/\/mdn.github.io\/css-examples\/target-text\/index.html#:~:text=Space%20forbids,first%20sight\">https:\/\/mdn.github.io\/css-examples\/target-text\/index.html#:~:text=Space%20forbids,first%20sight<\/a><\/p>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary>cod<\/summary>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"><\/pre>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"><\/pre>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n<\/details>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<!DOCTYPE html>\n<html lang=\"ru\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Overlay \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 CSS<\/title>\n    <style>\n\n        \/* 1. \u0421\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0441\u0430\u043c \u0447\u0435\u043a\u0431\u043e\u043a\u0441 *\/\n        #toggle {\n            display: none;\n        }\n\n        \/* 2. \u0421\u0442\u0438\u043b\u0438\u0437\u0443\u0435\u043c Label \u043a\u0430\u043a \u043a\u043d\u043e\u043f\u043a\u0443 \"\u041e\u0442\u043a\u0440\u044b\u0442\u044c\" *\/\n        .open-btn {\n            padding: 15px 30px;\n            background-color: #6200ee;\n            color: white;\n            border-radius: 5px;\n            cursor: pointer;\n            user-select: none;\n        }\n\n        \/* 3. \u0421\u0442\u0438\u043b\u0438 \u043e\u0432\u0435\u0440\u043b\u0435\u044f (\u043d\u043e\u0432\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u044b) *\/\n        .full-page-overlay {\n            position: fixed;\n            top: 0;\n            left: 0;\n            width: 100%;\n            height: 100%;\n            background-color: white;\n            z-index: 1000;\n            \n            \/* \u0418\u0437\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e \u0441\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0447\u0435\u0440\u0435\u0437 \u043f\u0440\u043e\u0437\u0440\u0430\u0447\u043d\u043e\u0441\u0442\u044c \u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0435 \u0441\u043e\u0431\u044b\u0442\u0438\u0439 *\/\n            opacity: 0;\n            pointer-events: none;\n            transition: opacity 0.3s ease;\n            \n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n        }\n\n        \/* 4. \u041c\u0410\u0413\u0418\u042f CSS: \u0415\u0441\u043b\u0438 \u0447\u0435\u043a\u0431\u043e\u043a\u0441 \u043d\u0430\u0436\u0430\u0442, \u043f\u043e\u043a\u0430\u0437\u044b\u0432\u0430\u0435\u043c \u043e\u0432\u0435\u0440\u043b\u0435\u0439 *\/\n        #toggle:checked ~ .full-page-overlay {\n            opacity: 1;\n            pointer-events: auto;\n        }\n\n        \/* 5. \u041a\u043d\u043e\u043f\u043a\u0430 \u0437\u0430\u043a\u0440\u044b\u0442\u0438\u044f \u0432 \u0443\u0433\u043b\u0443 *\/\n        .close-btn {\n            position: absolute;\n            top: 20px;\n            right: 20px;\n            padding: 10px 20px;\n            background-color: #333;\n            color: white;\n            border-radius: 5px;\n            cursor: pointer;\n        }\n    <\/style>\n<\/head>\n<body>\n\t<h1>\u041e\u0442\u043a\u0440\u044b\u0432\u0430\u0435\u043c \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u043e\u043c \u043f\u043e\u0432\u0435\u0440\u0445 \u0434\u0430\u043d\u043d\u043e\u0433\u043e \u043e\u043a\u043d\u0430!<\/h1>\n\t<h1>\u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 CSS!<\/h1>\n\t<p>\u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0441\u0432\u044f\u0437\u043a\u0443 checkbox + label.<\/p>\n    <input type=\"checkbox\" id=\"toggle\">\n    <label for=\"toggle\" class=\"open-btn\">\u041e\u0442\u043a\u0440\u044b\u0442\u044c \u0431\u0435\u0437 JS<\/label>\n\n\n\n    <div class=\"full-page-overlay\">\n        <label for=\"toggle\" class=\"close-btn\">\u2715<\/label>\n\t\t\n\t\t\n\t\t\n\t\t\n<style>\n* {\n  font-family: sans-serif;\n  box-sizing: border-box;\n}\n\nbody {\n  margin: 0;\n  body: 0;\n}\n\n.wrapper {\n  justify-content: center;\n  align-items: center;\n  display: flex;\n  min-height: 100vh;\n  background: #eee;\n  padding: 2rem;\n}\n\n.box {\n  width: 800px;\n  background: #fff;\n  border-radius: 2rem;\n  padding: 3rem 6rem;\n}\n\nsummary,\ndetails {\n  margin-bottom: 1em;\n}\nsummary {\n  font-weight: bold;\n  cursor: pointer;\n  &::marker {\n    content: \"\";\n  }\n  &::before {\n    content: \"+\";\n    width: 2rem;\n    height: 2rem;\n    display: inline-block;\n    background: #333;\n    border-radius: 1rem;\n    text-align: center;\n    line-height: 2rem;\n    color: #fff;\n    font-weight: 100;\n    margin-right: 1rem;\n  }\n}\ndetails {\n  border-bottom: 1px solid #ccc;\n\n  &[open] summary::before {\n    content: \"-\";\n  }\n}\n\n<\/style>\n\n\n<div class=\"wrapper\">\n\n  <div class=\"box\">\n    <h1>The Accordion<\/h1>\n    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<\/p>\n    <details name=\"my-accordion\">\n      <summary>Lorem ipsum dolor sit amet<\/summary>\n      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<\/p>\n    <\/details>\n    <details name=\"my-accordion\" open>\n      <summary>Consetetur sadipscing elitr<\/summary>\n      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<\/p>\n    <\/details>\n    <details name=\"my-accordion\">\n      <summary>Sed diam nonumy<\/summary>\n      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.<\/p>\n    <\/details>\n  <\/div>\n<\/div>\n\n\t\t\n\t\t\n\t\t\n\t\t\n    <\/div>\n\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<details class=\"wp-block-details is-layout-flow wp-block-details-is-layout-flow\"><summary><\/summary>\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class=\"nv-iframe-embed\"><iframe loading=\"lazy\" title=\"11 New CSS Features Every Browser Supports in 2025\" width=\"1200\" height=\"675\" src=\"https:\/\/www.youtube.com\/embed\/55uUK-iJeNM?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<\/div><\/figure>\n<\/details>\n","protected":false},"excerpt":{"rendered":"<p>Color Switcher using light-dark(): https:\/\/codepen.io\/fbernack\/pen\/myePZYR Popover API: https:\/\/codepen.io\/fbernack\/pen\/rNgmexV Popover Example by Arby: https:\/\/codepen.io\/mobalti\/pen\/EaYVJgr Relative Color Syntax: https:\/\/codepen.io\/fbernack\/pen\/jEbegJg &#8212;base: #7c3aed; Align content vertically: https:\/\/codepen.io\/fbernack\/pen\/EaVYrrg Form with contenteditable toggle: https:\/\/codepen.io\/fbernack\/pen\/GgpeqpY @property Example: https:\/\/codepen.io\/fbernack\/pen\/QwjZpNz @property Animating Gradient: https:\/\/codepen.io\/fbernack\/pen\/EaVKzvw Exclusive Accordion: https:\/\/codepen.io\/fbernack\/pen\/ogjXXdj Horizontal Exclusive Accordion by web.dev: https:\/\/codepen.io\/web-dot-dev\/pen\/XWvBZNo Backdrop-Filter Liquid Glass Effect: https:\/\/codepen.io\/fbernack\/pen\/VYvEWeZ Backdrop-Filter Gallery: https:\/\/codepen.io\/fbernack\/pen\/WbQQvwR Scrollbar-gutter &amp; scrollbar-width:&hellip;&nbsp;<a href=\"https:\/\/1.cbm.ua\/?p=7463\" rel=\"bookmark\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 &raquo;<span class=\"screen-reader-text\">11 New CSS (\u0441 \u043f\u0440\u0438\u043c\u0435\u0440\u0430\u043c\u0438) Features Every Browser Supports in 2025<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":7572,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"","neve_meta_content_width":0,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"","neve_meta_disable_title":"","footnotes":""},"categories":[194,195,5],"tags":[],"class_list":["post-7463","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-spr-jk_pwa-1","category-it","category-css"],"_links":{"self":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/7463","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7463"}],"version-history":[{"count":64,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/7463\/revisions"}],"predecessor-version":[{"id":7736,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/posts\/7463\/revisions\/7736"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/media\/7572"}],"wp:attachment":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7463"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=7463"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=7463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}