ImagineTables

Какие принципы должны лечь в основу создания CSS-кода

Не писать CSS. Только препроцессор, только миксины.

Если правильно понял вопрос, попробуйте это (придётся подписаться на событие focusin):

// Resets CSS animation based on keyframes.
System.resetAnimation = function (elements)
{
	elements.forEach(element =>
	{
		element.style.animation = 'none';
		element.offsetHeight; // Trigger reflow.
		element.style.animation = null;
	});
}

Опять же, если я понял ваш вопрос правильно, можно обе анимации объединить на основе переменных, а в нужный момент задавать значение переменной, управляющее ходом анимации, и сбрасывать её. Примерно так:

const map = $('.map');
map
	.css('--current-position-y', getComputedStyle(map[0]).backgroundPositionY)
	.css('--direction', position.y > 0 ? '-1' : '1') // Map is scrolled in opposite direction.
	.css('--speed', Math.abs(position.y).toString());

System.resetAnimation([map[0]]);

@keyframes move-map-bg_map
{
	from
	{
		background-position-y: var(--current-position-y);
	}

	to
	{
		background-position-y: calc(var(--current-position-y) + var(--direction) * var(--city-map-size));
	}
}

Выше показано, как одна анимация плавно переходит в другую, в данном случае — на лету меняется скорость и направление анимации фона.

1. Сохранить страницу не как mhtml, а как HTML с изображениями.
2. Открыть сохранённый файл .htm в текстовом редакторе, найти все вхождения <a href="сайт">текст</a>, заменить их на текст. Если трудно, можно открыть в визуальном редакторе HTML, но я бы не стал.
3. Открыть сохранённый файл в браузере, потом его сохранить как mhtml.

Немного глюковатое, но в целом полезное дополнение:

https://chromewebstore.google.com/detail/Silktide%...

Кроме того, поставил скрин-ридер JAWS (весит больше гига, однако), он глючит меньше, но не так удобен для тестирования.

А оно вообще анимируемое?

Вот тут, например, пишут, что нет: https://stackoverflow.com/questions/71085424/how-t...

В стандарте (https://drafts.csswg.org/css-overflow-4/#propdef-l...) этот вопрос обходят стороной:

Animation type: see individual properties

А далее, обратно на сепульки. ))

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

Если список фильтров статичный или есть возможность генерировать CSS (например, препроцессором), можно так:

body:has(input.filter[data-filter~="Filter1"]:checked) div.block[data-filter~="Filter1"],
body:has(input.filter[data-filter~="Filter2"]:checked) div.block[data-filter~="Filter2"],
body:has(input.filter[data-filter~="Filter3"]:checked) div.block[data-filter~="Filter3"]
{
    display: none;
}

У блоков есть атрибут data-filter с пробело-разделяемым списком фильтров. У чекбоксов-фильтров — аналогично. Чекинг любого чекбокса делает невидимыми все блоки, у которых совпадает хотя бы один фильтр с этим чекбоксом.

Это не «смещение кавычки», это некорректная запись атрибута элемента (кавычки могут быть только вокруг значения атрибута, но не имени). Некорректно записанный атрибут игнорируется браузером. И выше уже ответили, что некорректная запись атрибута не даёт работать некорректно указанной кодировки, т.е. минус на минус…

.owl-item
{
    margin-right: 0.625rem !important;
}

!important потому, что он пихает опцию в атрибут style.

Дисклеймер: не уверен, что правильно понял проблему, но попытка не пытка. Попробуйте первый раз инициализировать контролы внутри бутстраповских табов (т.е., в данном случае, делать вызов .slick()) из события shown.bs.tab (ну и запоминать, что инициализация состоялась, чтобы при повторном выборе таба её не делать повторно, либо unslick'ать всё на парное событие hidden.bs.tab).

Событие shown.bs.tab генерирует контрол, который переключает табы. Т.е.

$('button[role="tab"]')
	.on('shown.bs.tab', function (e) { … } );

Из e достаёте таб (см. бутстраповскую документацию на событие), и для его содержимого уже делаете инициализацию.

>В задумке подгружать стили ориентируясь на операционную систему.

Оффтопик по отношению к этому конкретному вопросу, но, возможно, стоит рассмотреть переезд из браузера в ОС-специфичные webview-приложения и вынос разметки/стилей в ресурсы. По крайней мере, обычно обозначенная в цитате дорога приводит именно к этому )) А от сервера оставить только веб-АПИ.

Как уже было сказано выше,

1. Брякпоинты из любимого фреймворка (чем стандартнее, тем лучше), плюс
2. Точечные фиксы для конкретных кусков, ломающиеся так далеко от брейкпоинтов (посередине, например), что на них не натянуть.

Декларативно (на pure CSS) можно сделать что-то типа такого:

body:has(.first-block:hover) .second-block
{
    background: red;
}

И неважно, где эти блоки и как связаны. :hover можно заменить на другой псевдокласс, обозначающий взаимодействие с юзером, например :active или :focus-visible.

Но для кликов лучше прибегнуть к императивному скрипту (используется jQuery):

$('.first-block').on('click', () => $('.second-block').addClass('red');

И, само собой, CSS:

.red
{
    background: red;
}

1. Я делаю…
2. Я ожидаю…
3. Вместо этого я получаю…

У вас 1 пункт из 3.

Не сильно долго думая:

1. Рендерим чем-то типа https://github.com/niklasvh/html2canvas.

2. Выводим картинку в верхнем слое.

3. Снизу мгновенно меняем тему (через body.light).

4. При помощи mask-image делаем для картинки из п. 2 радиальные градиенты с несколькими частично пересекающимися кругами (как в макете). Изначально значения альфа-канала во всех опорных точках должно быть 1.0

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

6. Чтобы transition сработал с градиентной заливкой, нужно задать градиент кастомными свойствами, а переход делать для них, как показано тут: https://stackoverflow.com/a/63848864/14400772

для маркера checkbox навешен transition для плавного появления

Это плохой UX, не надо так делать. Ощущаться будет как замедленная реакция интерфейса на нажатие.

Но если приспичило, можно:

Первый вариант
1. Описать галку в начале файла:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="template">
	<defs>
		<symbol id="checkmark" class="checkmark" viewBox="0 0 16 16">
			<path fill="currentColor" … />
		</symbol>
	</defs>
</svg>

2. Вставить в кнопку:

<svg width="32" height="32"><use href="#checkmark"></use></svg>

3. Анимировать прозрачность.

Второй вариант

Если хочется сохранить растровое изображение, используйте его как маску (clip), а фон заливайте сплошным цветом. Если использовать кастомные свойства, ими можно анимировать хоть градиенты:

@property --my-color-1
{
	syntax: '<color>';
	initial-value: #000;
	inherits: false;
}

1. Выучить C++ за 21 день.
2. Скачать Chromium Embedded Framework, скомпилировать, обеспечить загрузку HTML из ресурсов

div:has(> a[href^="/help/"])

Уж лучше div:has(img[src*="domain.com"]). И за специфичность при резке баннеров я бы переживать не стал.

P.S. Прелесть uBO в автосписках и пикере. Если писать руками, я предпочитаю обычный CSS в плагине Stylus:

div:has(img[src*="domain.com"])
{
    display: none;
}

В нём же можно указать область видимости правила (например, «Только для заданного домена»).