CSS Programming - sgml/signature GitHub Wiki

Dynamic CSS

To add a background-image rule via the CSSOM, first get a reference to the rules of the first stylesheet:

var stylesheet = document.styleSheets[0].cssRules;

Then, get a reference to the end of the stylesheet:

var end = stylesheet.length - 1;

Finally, insert a background-image rule for the body element at the end of the stylesheet:

stylesheet.insertRule("body { background-image: url('http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico'); }", end);

CSS Postprocessing

Use a callback function to add/remove styles via postprocessing, for example with Vite.js to add/remove tailwind style rules:

import { defineConfig } from 'vite';
import postcssImport from 'postcss-import';
import tailwindcss from 'tailwindcss';
import autoprefixer from 'autoprefixer';

export default defineConfig(({ mode }) => {
  const isProduction = mode === 'production';

  return {
    css: {
      postcss: {
        plugins: [
          postcssImport(),
          isProduction ? tailwindcss() : {
            postcssPlugin: 'tailwind-skipping-plugin',
            Once(root, { result }) {
              root.walkRules(rule => {
                if (rule.selector.includes('tw-')) {
                  rule.remove();
                }
              });
            },
          },
          autoprefixer(),
        ].filter(Boolean),
      },
    },
  };
});

Animation

Set Theory

Real-Time Editing

Adaptive Design

Postprocessing

Videos

References