Ankhena

Зачем вам javascript?

Спецификаций CSS занимается рабочая группа в составе W3C. Там же есть и информация о том, как принять участие / предложить свою идею.

К примеру вы можете создать issue в репозитории рабочей группы.

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

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

За примерами далеко ходить не нужно: parent selector - мечта уже нескольких поколений разработчиков и тема постоянных вопросов. Однако его нет в спецификации (хотя он был в первых драфтах CSS 3 насколько я помню) и скорее всего не будет. Причину, если интересно, попробуйте поискать сами.

Или, к примеру, такое очевидное, казалось бы, опущение как отсутствие аналога :hover для "stuck" состояния элемента с position: sticky. Ведь его явно не хватает почти любому кто использовал этот стиль. Однако его не будет, о причинах (логичных, но далеко неочевидных) можно почитать в соответствующем issue.

Конечно, если вы внимательно и детально изучите все спецификации и проработаете и напишете своё предложение - оно, вероятно, будет рассмотрено. Но более вероятна ситуация что где-то здесь вы найдёте аналогичную или близкую идею.

• Обернуть 2 последних в один общий блок
• Не использовать flex-direction: column, а задать flex-wrap и всем кроме последних двух width: 100%, последним по 50.
• Использовать гриды

Наизобретают каких-то велосипедов без колес https://developer.mozilla.org/en-US/docs/Web/CSS/@... и есть отличная статья на хабре https://habr.com/ru/company/timeweb/blog/523478/

А вам принципиально использовать древний swiper? С новым все нормально работает:

$(this).click(function() { // ID откуда кливаем
  $('html, body').animate({
    scrollTop: $("#reviewsView").offset().top - 100  // Внезапно! Всего-то минус сто
  }, 1000); // Скорость прокрутки
});

Стилизовать элементы SVG которые выводятся тегом object можно
Для этого надо дописать согласно w3.org одну строчку вот так

<?xml-stylesheet href="svg.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 10" width="100px" height="80px">
  <path d="......" />
</svg>

Выводим на страницу вот так:

<object data="test.svg" type="image/svg+xml"></object>

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

svg path{
    fill: lightblue;
    stroke: blue;
    stroke-width: 0.5px;
}

Да и почитайте очень хорошую статью: https://webtranslates.ru/styling-svg-use-content-c... которая вам разъяснит способы стилизации svg средствами css которые будут работать

Повесь на псевдоэлементы.
Ну если дивы нельзя, то спаны используй, также 1 спан 1 квадрат и псевдо эл другой квадрат.
linear-gradient не закруглишь углы, или костыляй)

Я такое вырезаю в svg , и вставляю через

background: url("data:image/svg+xml, --- --- --- ") center no-repeat;

Так же можно и несколько

background: url("data:image/svg+xml, --- --- --- ") center no-repeat,
                     url("data:image/svg+xml, --- --- --- ") center no-repeat,
                     url("data:image/svg+xml, --- --- --- ") center no-repeat;

Нормаль к плоскости вычисляется как векторное произведение двух векторов, задающих плоскость. Для точек A, B, C можно взять векторы AB и AC.

вот так с кнопкой - возможно надо доработать - кликабельно

SVG clipPath

Иконки не являются частью контента. Они несут только визуальную нагрузку. Оформительскую. Для машинного чтения бесполезны, даже вредны.
Представьте, что вы "просматриваете" страницу скринридером. И он начинает вам зачитывать описания иконок. Оно вам надо? Вы пришли за информацией.
Поэтому иконки вообще не следует верстать тегом img. А уж если сверстали, то оставьте alt пустым и добавьте role="presentation"

Вот так короче svg : https://codepen.io/topicstarter/pen/oNwgbLO

В общем схема следующая: имеем квадрат в размерах 100 100 в которой мы по координатам x1 y1 x2 y2 ставим две линии

1 линия будем иметь такие координаты: 0 0 это начало 100 100 это конец линии
2 линия будет иметь такие координаты 0 100 это начало 100 0 это конеч линии



Пример кода ответчика itishnikitsme - смотрите сами сколько лишнего хлама

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 512.001 512.001" style="enable-background:new 0 0 512.001 512.001;" xml:space="preserve">
<g>
	<g>
		<path d="M284.286,256.002L506.143,34.144c7.811-7.811,7.811-20.475,0-28.285c-7.811-7.81-20.475-7.811-28.285,0L256,227.717
			L34.143,5.859c-7.811-7.811-20.475-7.811-28.285,0c-7.81,7.811-7.811,20.475,0,28.285l221.857,221.857L5.858,477.859
			c-7.811,7.811-7.811,20.475,0,28.285c3.905,3.905,9.024,5.857,14.143,5.857c5.119,0,10.237-1.952,14.143-5.857L256,284.287
			l221.857,221.857c3.905,3.905,9.024,5.857,14.143,5.857s10.237-1.952,14.143-5.857c7.811-7.811,7.811-20.475,0-28.285
			L284.286,256.002z"/>
	</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

console.log(
  `       *
      * *   
     *   *  
    ******* 
   *       *
  *         *`);