Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

NPM package to statically analyze the compatibility of a web page across a given browser scope

NotificationsYou must be signed in to change notification settings

SphinxKnight/compat-tester

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

44 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

compat-tester is a static tool analysis that, provided a "browser scope", scans HTML, CSS and JS files and outputs a compatibility report for features that might not be available for such a scope (e.g. if my scope contains IE8 and mystyle.css stylesheet contains CSS Grid properties).

compat-tester's approach is pretty naive and currently doesn't detect anyprogressive enhancement, polyfills, etc. that could improve actual compatibility.

This tool is heavily built upon:

This project must be considered as alpha-stage.

Install

npm install compat-tester

Usage

As an command line tool

compat-tester # Scans index.html as root file and uses scope.json as defaultscompat-tester mySite.html myScope.jsoncompat-tester https://developer.mozilla.org/en-US/ myScope.json # Scans the remote web pagecompat-tester -html myPage.html myScope.json  # Only scans the HTML of myPage.htmlcompat-tester -css myStyle.css myScope.json   # Only scans the CSS of myStyle.csscompat-tester -js myScript.js myScope.json    # !Not implemented yet! Only scans myScript.js

As a module

const compatTester = require("compat-tester");const options = {"contrib": "all"} // "all"|"true"|"null"let report = compatTester.cssStringAnalyzer(string, browserScope, callback[, options ]);let report = compatTester.cssFileAnalyzer(filePath, browserScope, callback[, options ]);let report = compatTester.htmlStringAnalyzer(string, browserScope, callback[, options ]);let report = compatTester.htmlFileAnalyzer(filePath, browserScope, callback[, options ]);let report = compatTester.jsStringAnalyzer(string, browserScope, callback[, options ]); // Not implemented yetlet report = compatTester.jsFileAnalyzer(filePath, browserScope, callback[, options ]); // Not implemented yet

Browser-scope file

Thescope.json file is simply a JSON file where the keys are the identifiers of the browsers you want/need to support, followingmdn-browser-compat's syntax and where the values are the minimum version you want/need to support.For instance with the followingscope.json

{    "ie":"8",    "firefox":"34"}

compat-tester will report any detected feature that isn't available before Internet Explorer 8 and Firefox 34.

Examples

Using an scope with IE "1" (not a typo ;)) and Firefox "8", the report might look like:

HTML Report:        firefox incompatible - @index.html#L21 - <link> - attrcrossorigin - minVer: 18        firefox incompatible - @index.html#L21 - <link> - attrintegrity not implemented        firefox incompatible - @index.html#L99 - <link> - attrcrossorigin - minVer: 18        firefox incompatible - @index.html#L186 - <details> - minVer: 49        ie incompatible - @index.html#L21 - <link> - attrcrossorigin not implemented        ie incompatible - @index.html#L21 - <link> - attrintegrity not implemented        ie incompatible - @index.html#L99 - <link> - attrcrossorigin not implemented        ie incompatible - @index.html#L117 - <header> - minVer: 9        ie incompatible - @index.html#L186 - <details> not implementedCSS Report:        firefox incompatible - @test_files/style.css#L191 - Property: animation - minVer: 16        firefox incompatible - @test_files/style.css#L477 - Property: word-wrap - minVer: 49        firefox incompatible - @test_files/style.css#L485 - Property: font-variant-ligatures - minVer: 34        firefox incompatible - @test_files/style.css#L489 - Property: word-wrap - minVer: 49        firefox incompatible - @test_files/style.css#L491 - Property: word-break - minVer: 15        firefox incompatible - @test_files/style.css#L522 - Property: box-sizing - minVer: 29        firefox incompatible - @test_files/style.css#L686 - Property: box-sizing - minVer: 29        firefox incompatible - @test_files/style.css#L941 - Property: transform - minVer: 16        ie incompatible - @test_files/style.css#L49 - Property: background-color - minVer: 4        ie incompatible - @test_files/style.css#L54 - Property: background-color - minVer: 4        ie incompatible - @test_files/style.css#L58 - Property: content - minVer: 8        ie incompatible - @test_files/style.css#L62 - Property: font-weight - minVer: 3        …

Limitations - Wishlist

The following features are currently missing :'(

CSS

(current feature set: properties, @-rules)

  • Selectors

JavaScript

(current feature set: nothing)

  • Parsing JS and dealing with primary features like statements, operators

Misc.

  • Resolving a tree of resources (e.g. fetch internal HTML pages, CSS with @import…)
  • Adding comments to locally disable warnings
  • An interactive CLI to easily create ascope.json file (something like "compat-tester --init")
  • Tests

Integration

  • Addon for VSCode
  • Addon for SublimeText

Notes

This project is one of my first "real" JavaScript project, feel free to addissues if you see any minor/major/confusing/horrendous stuff.

About

NPM package to statically analyze the compatibility of a web page across a given browser scope

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published
[8]ページ先頭
©2009-2025 Movatter.jp