CSS
Debug
- pseudo-class styles
- reference
- right click
Force state
of the elemnt inF12 elements tab
@media
-
/* widht smaller than 400px*/ body { background-color: lightblue; } /* width between 400px and 800px*/ @media screen and (min-width: 400px) { body { background-color: lightgreen; } } /* width bigger than 800px*/ @media screen and (min-width: 800px) { body { background-color: lavender; } }
Clip-path
Flex
-
RWD from 2 column to 1 column
.item { width: 50%; height: 300px; /* Should be removed. Only for demonstration */ } .container{ display:flex; flex-direction:row; flex-wrap:wrap; } /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */ @media screen and (max-width: 600px) { .item { width: 100%; } }
Grid
-
fixed size items
.grid-container { display: grid; grid-template-columns: auto auto auto; /*display 3column*/ justify-content:center; /*make items close to each others and align center*/ justify-content:left; /*make items close to each others and align left*/ } .grid-item { /* sort fixed size item with grid*/ width:100px; height:100px; word-wrap: break-word /*handle text overflow*/ }
-
items fit Grid
.grid-container { width:500px; height:300px; display: grid; grid-template-columns: auto auto auto; /*display 3column*/ margin: auto; /* align center*/ } .grid-item { /* sort fixed size item with grid*/ width: 100%; height: 100%; background-size: 100% 100%; /* make background image fit elemnt*/ background-image: url('https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png'); }
Animations
-
isLoading
.isLoading { background: linear-gradient(90deg, #a4a4a4 25%, #c4c4c4 50%, #a4a4a4 75%); background-size: 400% 100%; animation: moveBackground 1.5s ease-in infinite; } @keyframes moveBackground { 0% { background-position: 0% 0%; } 100% { background-position: 100% 0%; } }
Input
-
no outline
input[type=text] { background-color: transparent; border: none; } input[type=text]:focus { outline: none; }
-
no typing line
input[type=text] { color: transparent; text-shadow: 0 0 0 #2196f3; &:focus { outline: none; } }
Div
-
.container { height: 100dvh; }
-
keep div ratio when size change
.container{ position: relative; width: 100%; padding-top: 24%; / 1024width:250height Aspect Ratio, >100% also works / } .div{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Text
-
align text to center
.wrapper { width: fit-content; margin: auto; }
Mouse
-
disabel mouse event
pointer-event : none; /*default*/ pointer-event : auto;
Before/After
-
content
- reference
div:before { content: "+"; content: url(w3css.gif); }
- reference
CSSStyleSheet
- Dynamic css styles
const style = document.createElement("style");
document.head.appendChild(style);
const setUniqueStyle = (id, newStyle) => {
if (!Object.values(ID).includes) return;
const targetIndex = Object.values(style.sheet.cssRules).findIndex(
({ selectorText }) => selectorText === `#${id}`,
);
if (targetIndex >= 0) {
style.sheet.deleteRule(targetIndex);
}
style.sheet.insertRule(`#${id} ${newStyle}`);
};
IOS
- Disabled scroll bouncing.
* {
overscroll-behavior:none;
}
- Disabled pull to refresh.
html {
overflow: hidden;
}
Pure CSS DropDown Menu
- Demo
- css
.open{
width:24px;
height:24px;
text-align: center;
border:black 1px solid;
}
.open:after{
content: '\276F';
}
#focusDetector:focus-within .open{
transform: rotate(90deg);
pointer-events:none;
}
#closeButton{
width:24px;
height:24px;
background:red;
text-align: center;
width:100%;
}
#closeButton:after{
content: "\00d7";
}
#focusDetector:focus-within #dropDownMenu{
display:flex;
}
#dropDownMenu{
display:none;
flex-direction:column;
width: fit-content;
background:gray;
}
#itemsWrapper{
background:yellow;
}
.item{
padding:10px
}
- HTML
<div id="focusDetector">
<div class="open" tabIndex="0"></div>
<div id="dropDownMenu">
<div id="closeButton"></div>
<div id=itemsWrapper tabIndex="0">
<div class="item">Home</div>
<div class="item">Blog</div>
<div class="item">FAQ</div>
<div class="item">Login</div>
</div>
</div>
</div>