CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-caniuse-lite

A smaller version of caniuse-db, with only the essentials for browser compatibility data

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

index.mddocs/

caniuse-lite

caniuse-lite provides a compact version of the caniuse-db dataset, containing essential browser compatibility data in a smaller format suitable for client-side usage. It processes and compresses the full Can I Use database while maintaining API compatibility for core functionality.

Package Information

  • Package Name: caniuse-lite
  • Package Type: npm
  • Language: JavaScript
  • Installation: npm install caniuse-lite

Core Imports

const { agents, feature, features, region } = require('caniuse-lite');

For ES modules:

import * as lite from 'caniuse-lite';
// OR
import { agents, feature, features, region } from 'caniuse-lite';

Basic Usage

const { agents, feature, features, region } = require('caniuse-lite');

// Get browser agent information
console.log(agents.chrome.browser); // "Chrome"
console.log(agents.chrome.usage_global); // Global usage stats by version

// Get all available features
console.log(Object.keys(features)); // Array of feature keys

// Unpack a specific feature
const flexboxFeature = feature(features.flexbox);
console.log(flexboxFeature.title); // "CSS Flexible Box Layout Module"
console.log(flexboxFeature.stats.chrome); // Chrome support data

// Load regional usage data (requires separate import)
const usageData = require('caniuse-lite/data/regions/US');
const unpackedUsage = region(usageData);
console.log(unpackedUsage); // US browser usage statistics by browser and version

Capabilities

Browser Agents Data

Static browser information including usage statistics, version data, and vendor prefixes.

/**
 * Browser agent information with usage data, versions, and release dates
 */
const agents: {
  [browserKey: string]: {
    browser: string;           // Human-readable browser name
    usage_global: {            // Global usage statistics by version
      [version: string]: number;
    };
    versions: (string | null)[]; // Array of version strings (may include null for empty versions)
    prefix: string;            // CSS vendor prefix
    prefix_exceptions?: {      // Version-specific prefix exceptions
      [version: string]: string;
    };
    release_date: {            // Release timestamps by version
      [version: string]: number;
    };
  };
};

Feature Data Unpacking

Converts compressed feature support data into caniuse-db compatible format.

/**
 * Unpacks compressed feature support data
 * @param packed - Compressed feature data object from features index
 * @returns Unpacked feature data compatible with caniuse-db format
 */
function feature(packed: PackedFeature): UnpackedFeature;

interface PackedFeature {
  A: { [browserKey: string]: { [supportCode: string]: string } }; // Compressed browser stats with support codes and version lists
  B: number;     // Status code (maps to specification status)
  C: string;     // Feature title
  D: boolean;    // Whether shown in caniuse UI
}

interface UnpackedFeature {
  status: string;   // Specification status ('rec', 'wd', 'cr', etc.)
  title: string;    // Feature title
  shown: boolean;   // Whether feature is shown in caniuse
  stats: {          // Browser support statistics
    [browserName: string]: {
      [version: string]: string; // Support status (e.g., 'y', 'n', 'a #1')
    };
  };
}

Features Index

Index of all available features in the dataset with compressed data.

/**
 * Index mapping feature keys to compressed feature data
 */
const features: {
  [featureKey: string]: PackedFeature;
};

Regional Usage Data

Unpacks compressed regional browser usage statistics.

/**
 * Unpacks compressed regional usage data
 * @param packed - Compressed regional usage data from data/regions/
 * @returns Browser usage statistics by region
 */
function region(packed: PackedRegion): UnpackedRegion;

interface PackedRegion {
  [browserKey: string]: {
    [versionKey: string]: number | string; // Most keys are numbers, "_" key contains space-separated string of unsupported versions
  };
}

interface UnpackedRegion {
  [browserName: string]: {
    [version: string]: number; // Usage percentage for browser version in region
  };
}

Data Loading Patterns

Features Data

const { features, feature } = require('caniuse-lite');

// Get all feature keys
const allFeatures = Object.keys(features);

// Unpack specific features
const cssGrid = feature(features['css-grid']);
const webgl = feature(features['webgl']);

Regional Data

Regional data must be imported separately from the data directory:

const { region } = require('caniuse-lite');

// Import specific region data
const usData = require('caniuse-lite/data/regions/US');
const ukData = require('caniuse-lite/data/regions/GB');

// Unpack regional usage
const usUsage = region(usData);
const ukUsage = region(ukData);

Individual Feature Files

For more efficient loading, individual features can be imported directly:

const { feature } = require('caniuse-lite');

// Import specific feature data
const flexboxData = require('caniuse-lite/data/features/flexbox');
const flexboxFeature = feature(flexboxData);

Type Definitions

Support Status Values

Support status strings in unpacked feature stats can contain:

  • 'y' - Supported
  • 'n' - Not supported
  • 'a' - Partial support
  • 'p' - Supported with prefix
  • 'u' - Unknown support
  • 'x' - Requires prefix
  • 'd' - Disabled by default
  • ' #N' - Support with notes (where N is note number)

Specification Status Values

Feature status values include:

  • 'rec' - W3C Recommendation
  • 'pr' - W3C Proposed Recommendation
  • 'cr' - W3C Candidate Recommendation
  • 'wd' - W3C Working Draft
  • 'ls' - WHATWG Living Standard
  • 'other' - Non-W3C but reputable
  • 'unoff' - Unofficial (Editor's Draft or W3C Note)

Error Handling

The package functions expect valid data structures. Invalid or missing data may result in:

  • TypeError for incorrect parameter types
  • Missing properties in returned objects for malformed input data
  • Empty objects or arrays for features/regions that don't exist

Always validate that features exist in the features index before unpacking:

const { features, feature } = require('caniuse-lite');

if ('css-grid' in features) {
  const gridSupport = feature(features['css-grid']);
  // Safe to use gridSupport
}

docs

index.md

tile.json