CSS New Feature
Variables / Shape / Scroll
Variables (自定義屬性)
:root {
--primary-color: red;
--secondary-color: blue;
}
.white-theme {
--primary-color: white;
--secondary-color: black;
}
.black-theme {
--primary-color: black;
--secondary-color: white;
}
.text {
font-size: 18px;
color: var(--primary-color);
}
Global
Element
Variables (自定義屬性)
Change theme color
const [themeClassName, setThemeClassName] = useState('white-theme');
return (
<ThemeContext.Provider
value={{
setThemeToBlack: () => setThemeClassName('black-theme'),
setThemeToWhite: () => setThemeClassName('white-theme'),
}}>
<div className={themeClassName} style={styles.mainWrapper}>
<!--Components-->
</div>
</ThemeContext.Provider>
);
Other solution ?
export default {
PRIMARY_COLOR: '#fff',
SECONDARY_COLOR: '#000',
};
shared/WhiteTheme.js
import WhiteTheme from './shared/WhiteTheme.js';
import BlackTheme from './shared/BlackTheme.js';
return (
<ThemeContext.Provider
value={{
theme: type === 'white' ? WhiteTheme : BlackTheme,
}}>
<!--Components-->
</ThemeContext.Provider>
);
MainBoard.jsx
const {
theme,
} = useContext(ThemeContext);
return (
<div
style={[
styles.wrapper,
{
backgroundColor: theme.PRIMARY_COLOR,
},
]} />
);
Component.jsx
Can I use CSS variables ?
Variables (自定義屬性)
DEMO
Shape
/* Function values */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
/* <url> value */
shape-outside: url(image.png);
- Define a non-rectangular shape
- Wrap text around the shape
Shape
float: left;
float: left;
shape-outside: circle();
Can I use css-shape?
Shape
DEMO
Scroll Snap
Effect Demo
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
Properties
none | [ x | y | block | inline | both ] [ mandatory | proximity ]
Formal syntax
Scroll Snap
.scroll-conatiner {
overflow: 'auto';
scroll-snap-type: 'x mantatory';
}
Parent (scroll container)
Child (element)
.element {
scroll-snap-align: 'center';
}
Usage
Can I use scroll-snap?
Scroll Snap
DEMO
CSS New Feature
By Travor Lee
CSS New Feature
- 143