<!DOCTYPE html >
<html >
<head >
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width,initial-scale=1" >
<link rel="stylesheet" href="simple.css" />
<link rel="stylesheet" href="media-rules.css" />
<!-- This stylesheet is needed to ensure we cover the fix for Bug 1779043 -->
<style >
div {
color: salmon;
}
</style >
<style >
@media screen {
div {
outline: 1 px solid tomato;
}
@supports (display: flex) {
@media (1 px < height < 10000 px) {
div {
display: flex;
}
}
}
}
@layer myLayer {}
@container (min-width: 1 px) {
body {
div {
color: gold;
@supports selector(&) {
&:hover {
color: yellowgreen;
}
}
}
}
}
@container --my-container (height > 42 px) {}
/* query-less container */
@container --my-container {}
@property --my-property {
syntax: "<color>" ;
inherits: true;
initial-value: #f06;
}
@position-try --pt-custom-bottom {
top: anchor(bottom);
bottom: unset;
margin-top: 10 px;
}
@custom-media --mobile-breakpoint (width < 320 px) and (height < 1420 px), not print;
@custom-media --enabled true;
@custom-media --disabled false;
div {
color: chocolate;
@media (--mobile-breakpoint) {
color: peachpuff;
}
@media (--enabled) {
color: green;
}
@media (--disabled) {
color: red;
}
}
</style >
</head >
<body >
<div >
Testing style editor media sidebar
</div >
</body >
</html >
Messung V0.5 in Prozent C=90 H=95 G=92
¤ Dauer der Verarbeitung: 0.3 Sekunden
¤
*© Formatika GbR, Deutschland