Có ý kiến gì không?
CSS 4 sẽ được ưa thích nếu nó thêm một số móc vào việc đi lùi . Cho đến khi có thể (mặc dù không nên) sử dụng checkboxvà / hoặc radio inputs để phá vỡ cách thức thông thường mà mọi thứ được kết nối, và thông qua đó cũng cho phép CSS hoạt động bên ngoài phạm vi bình thường của nó ...
/* Hide things that may be latter shown */
.menu__checkbox__selection,
.menu__checkbox__style,
.menu__hidden {
display: none;
visibility: hidden;
opacity: 0;
filter: alpha(opacity=0); /* Old Microsoft opacity */
}
/* Base style for content and style menu */
.main__content {
background-color: lightgray;
color: black;
}
.menu__hidden {
background-color: black;
color: lightgray;
/* Make list look not so _listy_ */
list-style: none;
padding-left: 5px;
}
.menu__option {
box-sizing: content-box;
display: block;
position: static;
z-index: auto;
}
/* ▼ - \u2630 - Three Bars */
/*
.menu__trigger__selection::before {
content: '\2630';
display: inline-block;
}
*/
/* ▼ - Down Arrow */
.menu__trigger__selection::after {
content: "\25BC";
display: inline-block;
transform: rotate(90deg);
}
/* Customize to look more `select` like if you like */
.menu__trigger__style:hover,
.menu__trigger__style:active {
cursor: pointer;
background-color: darkgray;
color: white;
}
/**
* Things to do when checkboxes/radios are checked
*/
.menu__checkbox__selection:checked + .menu__trigger__selection::after,
.menu__checkbox__selection[checked] + .menu__trigger__selection::after {
transform: rotate(0deg);
}
/* This bit is something that you may see elsewhere */
.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
display: block;
visibility: visible;
opacity: 1;
filter: alpha(opacity=100); /* Microsoft!? */
}
/**
* Hacky CSS only changes based off non-inline checkboxes
* ... AKA the stuff you cannot unsee after this...
*/
.menu__checkbox__style[id="style-default"]:checked ~ .main__content {
background-color: lightgray;
color: black;
}
.menu__checkbox__style[id="style-default"]:checked ~ .main__content .menu__trigger__style[for="style-default"] {
color: darkorange;
}
.menu__checkbox__style[id="style-one"]:checked ~ .main__content {
background-color: black;
color: lightgray;
}
.menu__checkbox__style[id="style-one"]:checked ~ .main__content .menu__trigger__style[for="style-one"] {
color: darkorange;
}
.menu__checkbox__style[id="style-two"]:checked ~ .main__content {
background-color: darkgreen;
color: red;
}
.menu__checkbox__style[id="style-two"]:checked ~ .main__content .menu__trigger__style[for="style-two"] {
color: darkorange;
}
<!--
This bit works, but will one day cause troubles,
but truth is you can stick checkbox/radio inputs
just about anywhere and then call them by id with
a `for` label. Keep scrolling to see what I mean
-->
<input type="radio"
name="colorize"
class="menu__checkbox__style"
id="style-default">
<input type="radio"
name="colorize"
class="menu__checkbox__style"
id="style-one">
<input type="radio"
name="colorize"
class="menu__checkbox__style"
id="style-two">
<div class="main__content">
<p class="paragraph__split">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
</p>
<input type="checkbox"
class="menu__checkbox__selection"
id="trigger-style-menu">
<label for="trigger-style-menu"
class="menu__trigger__selection"> Theme</label>
<ul class="menu__hidden">
<li class="menu__option">
<label for="style-default"
class="menu__trigger__style">Default Style</label>
</li>
<li class="menu__option">
<label for="style-one"
class="menu__trigger__style">First Alternative Style</label>
</li>
<li class="menu__option">
<label for="style-two"
class="menu__trigger__style">Second Alternative Style</label>
</li>
</ul>
<p class="paragraph__split">
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
... khá thô , nhưng chỉ với CSS và HTML, có thể chạm và chạm lại bất cứ thứ gì ngoại trừ bodyvà :roottừ mọi nơi bằng cách liên kết idvà forcác thuộc tính của radio/ checkbox inputs và label trình kích hoạt ; có khả năng ai đó sẽ chỉ cho bạn cách chạm vào những người đó vào một lúc nào đó.
Một cảnh báo bổ sung là chỉ một trong những input trạng thái cụ idthể có thể được sử dụng, trước tiên checkbox/ radio thắng một trạng thái được bật trong các từ khác ... Nhưng nhiều nhãn có thể chỉ đến cùng input, mặc dù điều đó sẽ làm cho cả HTML và CSS trông thậm chí còn cao hơn.
... Tôi hy vọng rằng có một số cách giải quyết tồn tại riêng với CSS Cấp 2 ...
Tôi không chắc chắn về các :bộ chọn khác , nhưng tôi :checkedcho CSS trước 3. Nếu tôi nhớ chính xác, đó là một cái gì đó giống như [checked]đó là lý do tại sao bạn có thể tìm thấy nó trong đoạn mã trên, ví dụ,
.menu__checkbox__selection:checked ~ .menu__hidden,
.menu__checkbox__selection[checked] ~ .menu__hidden {
/* rules: and-stuff; */
}
... nhưng đối với những thứ như ::aftervà :hover, tôi hoàn toàn không chắc chắn phiên bản CSS nào xuất hiện lần đầu tiên.
Đó là tất cả đã nêu, xin đừng bao giờ sử dụng điều này trong sản xuất, thậm chí không tức giận. Như một trò đùa chắc chắn, hay nói cách khác chỉ vì một cái gì đó có thể được thực hiện không phải lúc nào có nghĩa là nó nên .