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>\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;\nwidth: unset;\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","protected":false},"excerpt":{"rendered":"<p>Overlay \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 CSS \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 CSS! \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0441\u0432\u044f\u0437\u043a\u0443 checkbox + label. \u041e\u0442\u043a\u0440\u044b\u0442\u044c \u0431\u0435\u0437 JS \u2715 The Accordion 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… <a href=\"https:\/\/1.cbm.ua\/?page_id=7469\" rel=\"bookmark\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 »<span class=\"screen-reader-text\">11 New CSS Features Every Browser Supports in 2025 \u0432\u0441\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","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":""},"class_list":["post-7469","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/pages\/7469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/types\/page"}],"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=7469"}],"version-history":[{"count":9,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/pages\/7469\/revisions"}],"predecessor-version":[{"id":7547,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/pages\/7469\/revisions\/7547"}],"wp:attachment":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":7469,"date":"2025-12-27T13:10:55","date_gmt":"2025-12-27T10:10:55","guid":{"rendered":"https:\/\/1.cbm.ua\/?page_id=7469"},"modified":"2025-12-27T15:03:23","modified_gmt":"2025-12-27T12:03:23","slug":"11-new-css-features-every-browser-supports-in-2025-%d0%b2%d1%81%d0%b5-%d0%bf%d1%80%d0%b8%d0%bc%d0%b5%d1%80%d1%8b-%d0%bd%d0%b0-%d0%be%d0%b4%d0%bd%d0%be%d0%b9-%d1%81%d1%82%d1%80%d0%b0%d0%bd%d0%b8%d1%86","status":"publish","type":"page","link":"https:\/\/1.cbm.ua\/?page_id=7469","title":{"rendered":"11 New CSS Features Every Browser Supports in 2025 \u0432\u0441\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435."},"content":{"rendered":"\n\n\n\n \n \n 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>\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;\nwidth: unset;\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","protected":false},"excerpt":{"rendered":"<p>Overlay \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 CSS \u0420\u0430\u0431\u043e\u0442\u0430\u0435\u0442 \u0442\u043e\u043b\u044c\u043a\u043e \u043d\u0430 CSS! \u041c\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043b\u0438 \u0441\u0432\u044f\u0437\u043a\u0443 checkbox + label. \u041e\u0442\u043a\u0440\u044b\u0442\u044c \u0431\u0435\u0437 JS \u2715 The Accordion 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… <a href=\"https:\/\/1.cbm.ua\/?page_id=7469\" rel=\"bookmark\">\u041f\u043e\u0434\u0440\u043e\u0431\u043d\u0435\u0435 »<span class=\"screen-reader-text\">11 New CSS Features Every Browser Supports in 2025 \u0432\u0441\u0435 \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435.<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","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":""},"class_list":["post-7469","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/pages\/7469","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/types\/page"}],"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=7469"}],"version-history":[{"count":9,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/pages\/7469\/revisions"}],"predecessor-version":[{"id":7547,"href":"https:\/\/1.cbm.ua\/index.php?rest_route=\/wp\/v2\/pages\/7469\/revisions\/7547"}],"wp:attachment":[{"href":"https:\/\/1.cbm.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}