Giter Club home page Giter Club logo

postcss-smoothscroll-anchor-polyfill's Introduction

NPM version Build status License

 
 

postcss-smoothscroll-anchor-polyfill

⚙ PostCSS plugin that updates the standard scroll-behavior property to work with smoothscroll-anchor-polyfill

 
 

html {
    scroll-behavior: smooth;
}

compiles to:

html {
    font-family: "scroll-behavior:smooth";
    scroll-behavior: smooth;
}

or if all browsers in your browserslist support CSS Custom Properties:

html {
    --scroll-behavior: smooth;
    scroll-behavior: smooth;
}

 

Existing font and font-family

Existing font and font-family declarations are kept and smoothscroll-anchor-polyfill will still work:

👉🏻 Even though the original font declarations are kept, using html { } only for scroll-behavior and declaring your font styles on body { } is prefered.

html {
    scroll-behavior: smooth;
    font-family: "Helvetica Neue";
}

/* Compiles to: */

html {
    scroll-behavior: smooth;
    font-family: "scroll-behavior:smooth", "Helvetica Neue";
}
html {
    scroll-behavior: smooth;
    font: strong 1em/1.4 "Helvetica Neue";
}

/* Compiles to: */

html {
    scroll-behavior: smooth;
    font: strong 1em/1.4 "Helvetica Neue";
    font-family: "scroll-behavior:smooth", "Helvetica Neue";
}

 

Installation

npm:

npm install postcss-smoothscroll-anchor-polyfill --save-dev

or yarn:

yarn add --dev postcss-smoothscroll-anchor-polyfill

 

Usage

postcss([ require('postcss-smoothscroll-anchor-polyfill') ])

See PostCSS docs for examples for your environment.

 

Thanks to

This PostCSS plugin is based on a fork of postcss-object-fit-images, which was built by:

 

postcss-smoothscroll-anchor-polyfill's People

Contributors

bfred-it avatar dependabot[bot] avatar jonalexander avatar jonaskuske avatar mshick avatar redrum avatar shri3k avatar

Stargazers

avatar avatar avatar avatar

Watchers

avatar

postcss-smoothscroll-anchor-polyfill's Issues

Transpile to --scroll-behavior CSS variable, check browserslist

To stay in sync with this issue on the main polyfill, the following new behavior needs to be implemented:

Transpile

scroll-behavior: smooth;

to

--scroll-behavior: smooth;
scroll-behavior: smooth;

by default, and only if the users browserslist includes legacy browsers without support for CSS custom properties, include the font-family workaround and transpile to

font-family: 'scroll-behavior: smooth;';
--scroll-behavior: smooth;
scroll-behavior: smooth;

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.