Peter ZPeter Zhttps://teletype.in/atom/zetdotpi2026-10-23T17:00:44.649Zzetdotpi:-zXn7ttvM4ZПростые правила и идеи2023-01-17T15:31:24.223Z2023-01-17T15:31:24.223ZПост-напоминание самому себе:
<p id="SlYX">Пост-напоминание самому себе:</p>
<ul id="v9Ps">
<li id="H5K9">не пытайся продумать всё заранее</li>
<li id="lXTI">пиши понятно</li>
<li id="4IIR">простое лучше сложного</li>
<li id="57NY">а сложное лучше запутанного</li>
<li id="Ga51">двигайся быстро</li>
<li id="zhqx">чем раньше что-то ломается, тем проще это починить</li>
<li id="vnmi">избегай уровней вложенности больше трёх</li>
<li id="iQJ4">сначала частное - потом общее</li>
<li id="R8yR">но иногда наоборот</li>
<li id="0jSl">сделать выбор БЫСТРО > сделать ПРАВИЛЬНЫЙ выбор</li>
<li id="yVVU">чужие мысли и идеи - почва для собственных</li>
<li id="zc8v">ненужное отомрет само</li>
<li id="D9sK">все разные, помни об этом</li>
</ul>
<p id="kIzD">И последнее, но не по важности - смотри на то, что делал раньше - это помогает увидеть проделанный тобой путь.</p>
zetdotpi:wqA2MMvEHcLСветлая/темная тема без лишних сложностей.2023-01-12T01:52:13.481Z2023-01-12T01:53:27.367ZЯ не знаток css, но по работе мне часто приходится писать html странички: простые и сложные. И мне нравится, когда они получаются аккуратными и удобными.
<p id="OD3H">Я не знаток css, но по работе мне часто приходится писать html странички: простые и сложные. И мне нравится, когда они получаются аккуратными и удобными. </p>
<p id="zIAo">Почти все устройства сейчас имеют несколько тем: светлую, темную и адаптивную. Адаптивная тема - это, по сути, автоматическое переключение между светлой и темной по каким-то принципам. У меня в телефоне она включена и днем работает светлая тема, а ночью - темная.</p>
<p id="uNEi">Поэтому у меня возник вопрос - а можно ли в css определять какую тему использует пользователь и адаптировать вид странички/сайта под него? Вкратце - можно.</p>
<h3 id="D4Ac">Самое главное вкратце</h3>
<p id="bvXg">Используйте <code>prefers-color-scheme.</code> Еще лучше - используйте его вместе с переменными, которые уже и будут использоваться дальше в CSS.</p>
<p id="gUF4">Например так:</p>
<pre id="lhxZ" data-lang="css">@media (prefers-color-scheme: light) {
:root {
--bg-color: rgb(255, 255, 255);
--text-color: white;
--accent-bg: rgb(158, 51, 36);
--accent-color: white;
}
}
@media (prefers-color-scheme: dark) {
:root {
--bg-color: rgb(0, 0, 0);
--text-color: rgb(240, 240, 240);
--accent-bg: green;
--accent-text: rgb(34, 120, 57);
}
}
.some-class {
background-color: var(--bg-color);
color: var(--text-color);
}
.accent {
background-color: var(--accent-bg);
color: var(--accent-text);
}</pre>
<p id="7Nd1">Можно пойти еще дальше и использовать для автоматического вычисления цветов функцию <code>color-mod</code>.</p>