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