AlexZaw

<div class="wrap"> <div class="block">item1</div> <div class="block">item2</div> <div class="block">item3</div> <div class="block">item4</div> </div> .wrap{ display: grid; grid-template-columns: repeat(4, max-content); justify-content: center; max-width: 900px; margin: 0 auto; border: 1px solid #000; } .block{ padding: 15px 30px; } .block:nth-child(1){ background-color: #31D9FF; } .block:nth-child(2){ background-color: #67B2FF; } .block:nth-child(3){ background-color: #C289FF; } .block:nth-child(4){ background-color: #FF81FF; } .block:nth-child(4n + 1), .block:nth-child(4n + 4) { position: relative; } .block:nth-child(4n + 1):before, .block:nth-child(4n + 4):before { content: ''; position: absolute; z-index: -1; top: 0; right: 100%; width: calc(100vw - 100%); height: 100%; } .block:nth-child(4n + 1):before{ background: inherit; } .block:nth-child(4n + 4):before { box-shadow: 100vw 0 0 0 #FF81FF; } See the Pen by Alexandr (@AlexZaw) on CodePen.

Прям захотелось чтобы мою работу так же по косточкам разобрали 🙂

Потому, что style.css не сохранен 🙂

Судя по указанному пути папка с вашим шрифтом лежит в одной папке с файлом css т.е. структура выглядит примерно так: . | index.html | style.css | \—fonts Lato-Italic.ttf так ли это на самом деле?

Потому, что ширина сайдбара в 330 пикселей это ширина вместе с margin-ами слева и справа по 10 пикселей. Ну а так как margin это внешний отступ и он не закрашивается фоном сайдбара, отсюда и расстояние

а я и не говорил что HTML описывает внешний вид, хотя у него и есть такие возможности. Пусть немного, но есть. Ну вот как минимум по этому критерию CSS не проходит в ЯП 🙂 Абсолютно эквивалентны и абсолютно во всех случаях можно заменить как универсальное свойство отдельными свойствами, так и наоборот. Другое дело что некоторые отдельные свойства не имеют смысла в отрыве от других, но заменить можно всегда

CSS - формальный язык описания внешнего вида документа, написанного с использованием языка разметки HTML и CSS описывают представление , тогда как языки программирования описывают функцию по поводу этого я вам уже писал - используйте отдельные свойства, а не сокращенные и тогда не будет никаких неочевидных результатов

Так CSS это не язык программирования, поэтому здесь нет четких правил А это вообще не является проблемой CSS 🙂 В этом то и дело, цвет фона должен задаваться в конце. А вообще это извечная проблема при использовании сокращенных свойств. Чтобы не путаться можно использовать полные свойства, тогда никаких конфликтов и недопонимания не будет.

Назовите хоть один язык где ничего не надо зубрить и все интуитивно понятно 🙂 background-color можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона. Т.е. этот "гладкий" фон лежит под градиентом. Он там есть и работает, но его просто не видно так как его сверху закрывает градиент. В том, что ваш "гладкий" фон на самом деле присутствует можно убедиться задав полупрозрачный градиент. Градиенты это не цвет фона, это фоновое изображение Это как покрасить обои на стене и на них повесить картину. Фоном (background-color)будут являться обои, а картина будет градиентом, т.е. background-image Если вы поклеите обои поверх картины вы ведь не будете удивляться почему вдруг картины не стало видно? Так и здесь

Все удобно и логично если знать как он работает: Предупреждение: background-color можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона. https://developer.mozilla.org/ru/docs/Web/CSS/background

Потому, что слой с обычным фоновым цветом (другими словами это обычное свойство background-color) всегда находится в самом низу. А вот положением градиентов которые на самом деле задаются с помощью background-image мы можем управлять

Можно так: <div class="box">Some text</div> .box{ position: relative; margin: 50px; width: 400px; height: 200px; background: url(http://placekitten.com/50), #fff ; background-repeat: no-repeat; background-position: calc(100% - 10px) calc(100% - 10px); border: 15px dashed #000; background-clip: content-box; } .box:after{ position: absolute; content: ''; top: -15px; left: -15px; bottom: -15px; right: -15px; background-image: linear-gradient(to right, #361D10 50%, #E04E39 50%); z-index: -1; } или так: <div class="box2">Some text</div> .box2{ width: 400px; height: 200px; border: 15px solid transparent; border-image: linear-gradient(to right, #361D10 50%, #E04E39 50%); border-image-slice: 1; background-image: url(http://placekitten.com/50); background-repeat: no-repeat; background-position: calc(100% - 10px) calc(100% - 10px); }

Может он не верстает, может вы не верстаете, но это не значит что никто не верстает для инвалидов. Или они не люди? Вас уже носом в спеку ткнули, а вы продолжаете упорствовать.

Опять упс: Вопрос ведь и был про то, почему для UL атрибут type считается устаревшим, а для OL нет. А вы, зачем то, начали показывать результаты валидации которые и так были озвучены в первом сообщении 🙂

Упс: