WE @webdev_plus
Showing posts older than #1161 · Back to latest
flex-direction: row-reverse..star-rating {
display: inline-flex;
flex-direction: row-reverse;
justify-content: flex-end;
}~ выбирает визуально предыдущие звезды.<label> — левую и правую половину.nth-of-type(odd) — правая половинаnth-of-type(even) — левая половинаbackground-image?background-color./* Подсветка при наведении */
label:hover,
label:hover ~ label {
background-color: goldenrod;
}
/* Подсветка выбранного */
input:checked ~ label {
background-color: gold;
}
mask-size прежним.3 1/2 stars
<select multiple> для выбора нескольких значений. Это худший контрол в HTML для таких задач. К счастью, есть паттерн получше и он вовсе не странный.<select multiple>:<fieldset> с чекбоксами:<fieldset>
<legend>Выберите интересы</legend>
<label>
<input type="checkbox" name="interests" value="css">
CSS
</label>
<label>
<input type="checkbox" name="interests" value="html">
HTML
</label>
<!-- ... -->
</fieldset>
<select multiple>.{ interests: ["css", "html"] }<select multiple>.<select multiple>, остановитесь.fieldset + checkboxes. Пользователям будет прощеAtomics.waitAsync() теперь доступен в Baseline (Newly Available) и позволяет делать неблокирующую синхронизацию потоков для более плавной производительности.
Intl
<ul class="tree">
<li>
<span>1</span>
<ul>
<li><span>1.1</span></li>
<li><span>1.2</span></li>
</ul>
</li>
</ul>
li {
display: flex;
flex-direction: row;
align-items: center;
}ul::before {
content: "";
position: absolute;
left: 0;
top: 50%;
border-top: 1px solid;
width: 2vw;
}li::before {
content: "";
position: absolute;
left: 0;
top: 50%;
border-top: 1px solid;
width: 2vw;
}.tree > li {
padding-left: 0;
&::before, &::after {
display: none;
}
}li::after {
content: "";
position: absolute;
left: 0;
border-left: 1px solid;
}
li:first-of-type::after { height: 50%; bottom: 0; }
li:last-of-type::after { height: 50%; top: 0; }
li:not(:first-of-type):not(:last-of-type)::after {
height: 100%;
}
react-server-dom-webpack, createFromFetch, папки Server и Client.