и оно работает!?
Oh, and yes-it-works-in-IE6™ & yes-it-validates™
Approximately 10% of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
body.-red {
--my-color: #f00;
}
.test {
color: var(--my-color);
}
То есть надо как то это всё масштабировать... Как вы решаете такие задачи?
Вопрос к верстальщикам, которые передают верстку бэкэндерам
... over9000 lines of code ....
</div>
</div>
</div>
<!-- /slide -->
</div>
<!-- /custom-slider -->
</div>
<!-- /column -->
</div>
<!-- /row -->
</div>
<!-- /content-container -->
</div>
<!-- /page-container -->
Может быть есть какие-то полезные ресурсы, где уже описано, какие свойства ведут себя некорректно в определенных браузерах и как с этим бороться?
Как сделать на чистом css?
.button {
display: inline-block;
position: relative;
margin: 2rem;
padding: 0 2rem;
line-height: 2rem;
font-family: 'Montserrat', sans-serif;
color: #FFF;
background:
linear-gradient(to right, #41D3BD, #791E94),
linear-gradient(to bottom, #791E94, #FE9920),
linear-gradient(-45deg, transparent, transparent 40%, #FE9920 45%, #FE9920 55%, transparent 60%, transparent),
linear-gradient(to left, #FE9920, #FCFF4B),
linear-gradient(to top, #FCFF4B, #41D3BD),
linear-gradient(-45deg, transparent, transparent 40%, #41D3BD 45%, #41D3BD 55%, transparent 60%, transparent);
background-repeat: no-repeat;
background-position: top right, top right, bottom right, bottom left, bottom left, top left;
background-size:
calc(100% - 10px) 2px,
2px calc(100% - 10px),
10px 10px,
calc(100% - 10px) 2px,
2px calc(100% - 10px),
10px 10px;
&::before {
content: '';
display: inline-block;
height: 100%;
width: 100%;
position: absolute;
bottom: -4px;
right: -4px;
background:
linear-gradient(to bottom, #791E94, #FE9920),
linear-gradient(-45deg, transparent, transparent 45%, #FE9920 50%, #FE9920 55%, transparent 60%, transparent),
linear-gradient(to left, #FE9920, #FCFF4B);
background-repeat: no-repeat;
background-position: top right, bottom right, bottom left;
background-size:
2px calc(100% - 12px),
12px 12px,
calc(100% - 12px) 2px;
}
}