Cargar el CSS según la media query

para mejorar la Web Performance

.CSS-Houdini { } 

  • Obtener los Media Queries

  • Extraer los Media Queries

  • Cargar los Media Queries

Cargar el CSS según la media query

➜ npx cssstats [CSS_PATH]/style.css > output.json

Cargar el CSS según la media query

➜ npm install --save-dev cssstats-cli
➜ cat output.json | jq '.mediaQueries.values | unique'

Cargar el CSS según la media query

[
  "(max-width: 1199.98px)",
  "(max-width: 575.98px)",
  "(max-width: 767.98px)",
  "(max-width: 991.98px)",
  "(min-width: 1200px)",
  "(min-width: 576px)",
  "(min-width: 768px)",
  "(min-width: 992px)",
  "print",
  "screen and (prefers-reduced-motion: reduce)"
]

Cargar el CSS según la media query

Cargar el CSS según la media query

  plugins: [
    combineMediaQuery(),
    extractMediaQuery({
      output: {
        path: path.join(__dirname, "assets/css/"),
      },
      queries: {
        "(min-width: 576px)": "s",
        "(min-width: 768px)": "m",
        "(min-width: 992px)": "l",
        "(min-width: 1200px)": "xl",
        "screen and (prefers-reduced-motion: reduce)": "reduced-motion",
        print: "print",
      },
    }),
  ],

Cargar el CSS según la media query

new HtmlWebpackPlugin({ template: "./index.html" }),
new MiniCssExtractPlugin({ filename: "assets/css/[name].css" }),
new MediaQueryPlugin({
  include: true,
  queries: {
    "(min-width: 576px)": "s",
    "(min-width: 768px)": "m",
    "(min-width: 992px)": "l",
    "(min-width: 1200px)": "xl",
    "screen and (prefers-reduced-motion: reduce)": "reduced-motion",
    print: "print",
  },
}),

Cargar el CSS según la media query

import './example.scss';

if (window.innerWidth >= 960) {
    import(/* webpackChunkName: 'example-desktop' */ './example-desktop.scss');
}

Cargar el CSS según la media query

Split CSS in Media Queries

By Joan León

Split CSS in Media Queries

  • 1,308