npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@considonet/support-classes

v1.0.0

Published

Minimal feature-detection classes

Downloads

3

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Maintainers

pawelgabryelewiczpawelgabryelewicz

Keywords

Readme

support-classes 1.0

A simple browser detection helper. Follows Modernizr approach and offers only minimal detection that we found out to be necessary in most of our projects.

Copyright © 2019 ConsidoNet Solutions

Features

With support-classes one can detect a few browser features (see below). The library adds classes to html or any specified DOM element to allow querying them using ordinary CSS.

The CSS classes by default follow no-namespace BEM modifier pattern. For example: -webp. If BEM feature is disabled, webp class will be added instead.

WebP image file format support

Class names: webp or no-webp

WebP is a considerable alternative for bitmaps used on the web. Developed and endorsed by Google, WebP offers smaller files and lossless and non-lossless compression supporting alpha channel transparency, animations and more. As of 2019, nearly 79% of browsers used globally support this format. Non-supporting ones include Apple software (iOS, Safari browsers), Microsoft Internet Explorer and older Microsoft Edge browsers. There is no easy way to workaround this issue.

The general approach is to add a no-js to html tag and then remove it as soon as possible, then add other classes using this helper. Then via CSS set the fallback background-images by specifying element parents as no-js and no-webp classes. The WebP images should be available only to children of a webp parent.

If no-js class will be removed before body element gets loaded (i.e. the JS removing the class should be in head), no fallback images will be loaded until the actual feature detection will happen. This should save the data transfer and maintain usability for JS-disabled browsers.

Original Android Browser

Class name: androidbrowser

The original Android Browser is a legacy browser engine, based on WebKit, exposing a lot of bugs and issues. Sometimes dedicated CSS styles have to be prepared to support this browser and there is no way to detect this engine using pure CSS methods or hacks. Browsers exposing these problems include Android 1-4 default browsers (not Chrome!) and Samsung Browser.

Android Browser's market share is decreasing and as of 2019, represents about 1% of all browsers globally. Because of this, that feature detection will become obsolete until the end of 2019.

Touch support

Class name: touchdevice

This useful class allows to target touch-enabled devices. Use cases include usability improvements, effects removal and extra optimizations.

Touch device can be also detected using pure CSS4 interaction feature media queries - as of 2019 90% of browsers used globally support it, with a vast majority of mobile browsers (usually touch devices).

Compatibility

  • In general all ES5-compatible browsers
  • IE8+, Android 4+ browsers, iOS 8+

Installation

Using NPM

npm run @considonet/support-classes

Using yarn

yarn add @considonet/support-classes

Usage

The helper has to be used when the target element (to which we assign the classes) is already present in the DOM tree. For this reason it's safe to use html element - then the helper can be executed as soon as possible.

import addClasses from "@considonet/support-classes";
addClasses(false, ["webp", "androidbrowser"], document.body);

Detailed usage:

addClasses(namespaceLessBem: boolean, features: string[], el: HTMLElement)

  • namespaceLessBem - specifies whether the class names should be preceded with -. If true example classes will be -webp -touchdevice. If false - webp touchdevice. Default: false
  • features - an array of strings with feature names to check. Possible values: androidbrowser, touchdevice, webp. Default: ["androidbrowser", "touchdevice", "webp"] (all features)
  • el - HTML element to which the classes will be appended. Default: <html> element (document.getElementsByTagName( "html")[0])