SSugarFeature

Platform  

js

   │    Support  

Chromium supported

Firefox supported

Safari supported

Edge supported

Since  2.0.0

   │   

Olivier Bossel

   │   

beta

  Preview

  Features

• Support for "pleasant css" syntax like "s-btn:outline"

• Polyfill for container queries if needed

• scrolled class applied on the body when the user has scrolled the page

• Access to a --vh css variable that represent the exact viewport innerHeight and avoid having issues with mobile different viewport height values

• Clear all transitions and animations on all the page during a window resize. Helps for performances and cleaner for user

• Additional input attributes like empty, dirty and has-value

• Add state attributes to links like actual and actual-child depending on the document location url

• Prevent the scroll restoration behavior on chrome that can usually be anoying

• Remove some classes at page loading end: "initial-loading", "loading"

• Proxy the history.pushState method to make it dispatch an "pushstate" event with the actual state as detail

  Import

  Install

  Interface

1. pleasantCss

   true

   Boolean

   Specify if you want the "pleasant css" syntax in your pages

2. containerQuery

   true

   Boolean

   Specify if you want support for container queries in your css or not

3. scrolled

   true

   Boolean

   Specify if you want the scrolled class to be applied on the body element when the page has been scrolled

4. scrolledDelta

   200

   Number

   Specify after how many scroll the scrolled class will be applied

5. vhvar

   true

   Boolean

   Specify if you want the --vh css variable to be computed and available

6. inputAdditionalAttributes

   true

   Boolean

   Specify if you want to have the additional attributes on inputs like "has-value", "empty" and "dirty" or not

7. resizeTransmations

   true

   Boolean

   Specify if you want all the transitions and animations cleared during window resize

8. linksStateAttributes

   true

   Boolean

   Specify if you want to have the state attributes on links like "actual" and "actual-child" or not

9. preventScrollRestoration

   true

   Boolean

   Specify if you want to prevent the scroll restoration behavior on chrome that can usually be anoying

10. env

    true

    Boolean

    Specify if you want to display the current environment at start