Giter VIP home page Giter VIP logo

modernizr-neue's Introduction

Modernizr

Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.

npm version Build Status codecov Inline docs

Modernizr tests which native CSS3 and HTML5 features are available in the current UA and makes the results available to you in two ways: as properties on a global Modernizr object, and as classes on the <html> element. This information allows you to progressively enhance your pages with a granular level of control over the experience.

Breaking changes with v4

  • Dropped support for node versions <= 10, please upgrade to at least version 12

  • Following tests got renamed:

    • class to es6class to keep in line with the rest of the es-tests
  • Following tests got moved in subdirectories:

    • cookies, indexeddb, indexedblob, quota-management-api, userdata moved into the storage subdirectory
    • audio moved into the audio subdirectory
    • battery moved into the battery subdirectory
    • canvas, canvastext moved into the canvas subdirectory
    • customevent, eventlistener, forcetouch, hashchange, pointerevents, proximity moved into the event subdirectory
    • exiforientation moved into the image subdirectory
    • capture, fileinput, fileinputdirectory, formatattribute, input, inputnumber-l10n, inputsearchevent, inputtypes, placeholder, requestautocomplete, validation moved into the input subdirectory
    • svg moved into the svg subdirectory
    • webgl moved into the webgl subdirectory
  • Following tests got removed:

    • touchevents: discussion
    • unicode: discussion
    • templatestrings: duplicate of the es6 detect stringtemplate
    • contains: duplicate of the es6 detect es6string
    • datalistelem: A dupe of Modernizr.input.list

New Asynchronous Event Listeners

Often times people want to know when an asynchronous test is done so they can allow their application to react to it. In the past, you've had to rely on watching properties or <html> classes. Only events on asynchronous tests are supported. Synchronous tests should be handled synchronously to improve speed and to maintain consistency.

The new API looks like this:

// Listen to a test, give it a callback
Modernizr.on("testname", function (result) {
  if (result) {
    console.log("The test passed!");
  } else {
    console.log("The test failed!");
  }
});

We guarantee that we'll only invoke your function once (per time that you call on). We are currently not exposing a method for exposing the trigger functionality. Instead, if you'd like to have control over async tests, use the src/addTest feature, and any test that you set will automatically expose and trigger the on functionality.

Getting Started

  • Clone or download the repository
  • Install project dependencies with npm install

Building Modernizr

From javascript

Modernizr can be used programmatically via npm:

var modernizr = require("modernizr");

A build method is exposed for generating custom Modernizr builds. Example:

var modernizr = require("modernizr");

modernizr.build({}, function (result) {
  console.log(result); // the build
});

The first parameter takes a JSON object of options and feature-detects to include. See lib/config-all.json for all available options.

The second parameter is a function invoked on task completion.

From the command-line

We also provide a command line interface for building modernizr. To see all available options run:

./bin/modernizr

Or to generate everything in 'config-all.json' run this with npm:

npm start
//outputs to ./dist/modernizr-build.js

Testing Modernizr

To execute the tests using mocha-headless-chrome on the console run:

npm test

You can also run tests in the browser of your choice with this command:

npm run serve-gh-pages

and navigating to these two URLs:

http://localhost:8080/test/unit.html
http://localhost:8080/test/integration.html

Code of Conduct

This project adheres to the Open Code of Conduct. By participating, you are expected to honor this code.

License

MIT License

modernizr-neue's People

Contributors

acuyjet avatar alrra avatar beigebadger avatar cshold avatar dependabot[bot] avatar joecritch avatar kurafire avatar nnnoel avatar patrickkettner avatar paulirish avatar prayagverma avatar rejas avatar ribaricplusplus avatar roblarsen avatar rupl avatar ryanseddon avatar scottsmith95 avatar timkraut avatar toptalo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

modernizr-neue's Issues

Hapi caching in develop mode

Hey, I'm running npm run develop and building some changes to frontend/js/download/downloader.js, but the version shown through http://localhost:3000/js/download/downloader.js seems to be heavily cached by Hapi, so my changes aren't appearing on the local server.

Has anyone else encountered this?

cc @patrickkettner

Make new Builder track builds in GA again

We had this for the old builder:

// Track the different builds
if ( window._gaq ) {
    _gaq.push(['_trackPageview', '/build/'+[].slice.call($('ul li input:checked').map(function(key, val){ return ($(this).closest('li')[0].id || undefined); }), 0).join("^")]);
}

We’ll have to adapt it to the new builder.

Current proposal:

  1. Continue to track it as pageviews
  2. Track based on user clicking the Build button (so that we don't have to implement anything highly custom to deal with the 7 download/copy/open in codepen options inside the Build modal)
  3. Keep the same build URL structure for the Analytics; the date– and time-stamp allows us to filter out if we need to (but there isn't much value to it at this time)

Usage of comma-separated features is wrong

The features todataurljpeg, todataurlpng and todataurlwebp are rendered as a single string on the website:
modernizr-meta

In the example dialog, this also happens:
modernizr-example

A better example would be:

if (Modernizr.todataurljpeg) {
  // supported
} else if (Modernizr.todataurlpng) {
  // supported
} else if (Modernizr.todataurlwebp) { 
  // supported
} else {
  // not-supported
}

`touch` renamed to `touchevents` is a breaking change

This was mentioned on twitter (see screengrab at bottom).

True, you can rename the test is JS like:

 Modernizr. Touch = Modernizr.touchEvents

but this is not ideal. I also use the html.touch in my CSS quite often so I'll have to go through all of that and change it too.

So now when you want to add a new Modernizr test to an old project, you'll have to modify the project's other JS and CSS files too. This seems like a strong argument against a breaking change in v3. Is there a good reason for renaming the test?

image

Accessibility- docs page is lengthy

The docs page is pretty long. While Cmd-F is always handy, having a visual reference/shortcut link to each section would be helpful and would help to solve an accessibility issue.

lighthouse audit results

(background)

not too bad, mostly around a missing manifest

fixes needed

  • we don't have a manifest
    • manifest needs start_url
    • manifest needs icons
    • manifest needs name
    • manifest needs display
    • manifest needs start_url
    • manifest needs short_name
    • manifest needs theme_color
    • manifest needs background_color
  • contrast ratio isn't good enough
  • #header-search-input doesn't have a label

Search Function Broken

It looks like the searching and creating a build is funky (sorry can't be more descriptive).
If I type 'bo' then 'box shadow' shows up, but as soon as I type 'box' it disappears :(
image
image

gulp deploy needs to change behavior

it currently wipes the dist, then rebuilds it. this means that during the release the site is broken while its being compiled.

It should build it in another dir, then move it at the end

Renamed browser features get removed from custom build url

I have a custom build of Modernizr version 2.8.3. When I copy/paste the custom build url into the browser, some of the browser features get removed from the url.

For example:
http://modernizr.com/download/#-rgba-cssanimations-input-shiv-cssclasses-testprop-testallprops-domprefixes-file_api

The file_api browser feature is removed from the url. I just happened to notice this. If I didn't, I would have downloaded a new build which would be missing the file_api feature.

It looks like the feature changed from file_api to filereader. Perhaps you can have some sort of mapping for features whose names have changed and update the url.

flex

Resource info:

Custom build still has alpha in version and old URL

This is the comment at the top of a customized build:

/*! modernizr 3.0.0-alpha.4 (Custom Build) | MIT *
 * http://modernizr.com/download/#-batteryapi-blobconstructor-canvas !*/

There are 4 tiny issues:

  1. Modernizr not capitalized
  2. release version is not -alpha.4 anymore
  3. https now, not http
  4. #- after /download/ should just read ? (e.g. /download/?batteryapi-blob…)

Clicking on toggle from another expanded item is weird

when i'm in this state:
image

if i click on the plus for input[capture] i expect it to select it. i know my detects well enough that i dont need to open the deets to be sure i want it.

looks like @patrickkettner massaged this behavior in

click: function(e) {
var props = this.props;
var toggle = this.refs.SVGToggle.getDOMNode();
if (props.ignoreLabelClick && !toggle.contains(e.target)) {
e.preventDefault();
}
if (props.focusParent) {
props.focusParent(props.name);
}
},
but i'd suggest we allow the click to select the item, as well as expand it.

Responsive nav funkiness in Safari

Was looking at the new site (looks great!) and noticed I was getting scroll bars when at a smaller window size. Attached is a screenshot of how it looks in Safari 8 and 9 (in the El Capitan GM). Looks fine in IE10+, Edge, Chrome, Firefox. Didn't dig in too much into what's causing it, but any thoughts now what's going on here? Looks flex-wrap related?
screen shot 2015-09-16 at 10 44 04 am

Navigation on Home Page

The navigation buttons on the home page are too small to be pressed accurately:

screenshot_2015-04-19-21-29-01

However, those on the download page are fine:

screenshot_2015-04-19-21-30-32

lodash is not defined on pre-render

I'm getting the bellow error when React.renderToString is called on the DownloadUI, through the npm run develop process

I believe this may have been mentioned before, but this only happened for me after I removed and reinstalled node_modules. Can anyone replicate?

/Users/joecritchley/Sites/modernizr-neue/frontend/js/download/LeftColumn.js:65
    options = _.map(options, function(option) {
              ^

ReferenceError: _ is not defined
    at React.createClass.render (/Users/joecritchley/Sites/modernizr-neue/frontend/js/download/LeftColumn.js:65:15)
    at ReactCompositeComponentMixin._renderValidatedComponentWithoutOwnerOrContext (/Users/joecritchley/Sites/modernizr-neue/node_modules/react/lib/ReactCompositeComponent.js:789:34)
    at ReactCompositeComponentMixin._renderValidatedComponent (/Users/joecritchley/Sites/modernizr-neue/node_modules/react/lib/ReactCompositeComponent.js:816:14)
    at wrapper [as _renderValidatedComponent] (/Users/joecritchley/Sites/modernizr-neue/node_modules/react/lib/ReactPerf.js:70:21)
    at ReactCompositeComponentMixin.mountComponent (/Users/joecritchley/Sites/modernizr-neue/node_modules/react/lib/ReactCompositeComponent.js:237:30)
    at wrapper [as mountComponent] (/Users/joecritchley/Sites/modernizr-neue/node_modules/react/lib/ReactPerf.js:70:21)
    at Object.ReactReconciler.mountComponent (/Users/joecritchley/Sites/modernizr-neue/node_modules/react/lib/ReactReconciler.js:38:35)
    at ReactDOMComponent.ReactMultiChild.Mixin.mountChildren (/Users/joecritchley/Sites/modernizr-neue/node_modules/react/lib/ReactMultiChild.js:192:44)
    at ReactDOMComponent.Mixin._createContentMarkup (/Users/joecritchley/Sites/modernizr-neue/node_modules/react/lib/ReactDOMComponent.js:289:32)
    at ReactDOMComponent.Mixin.mountComponent (/Users/joecritchley/Sites/modernizr-neue/node_modules/react/lib/ReactDOMComponent.js:199:12)

Check marks render badly in Firefox

When I select a feature in Firefox the tick is misaligned within the circle:

modernizr_marks

This is in Firefox Developer Edition 42.0a2 (2015-09-14) on Windows 8.1

Update Usage boxes with both use-cases.

For some CSS properties like "object-fit" modernizr includes both "objectfit" and "object-fit" as html classes.

Can this be mentioned on the Usage Box so that things are clear?

Thanks.
screen shot 2016-02-10 at 12 01 51 am

Grid layout suggestion

Hey guys,

A few people mentioned there are now less detects visible at once in Download UI's viewport. I've been considering whether we should cater for visual/passive users (i.e. someone who isn't necessarily searching, and would rather see an upfront list).

Before I PR, I've done some mockups. I'd be keen to hear what you think, and when you think this state should apply. (My thoughts are that, when searching or on a smaller screen, it should revert to the single column layout).

grid-layout

CSS class prefix does not apply from build url

Doesn't seem like the css class prefix is being set when coming from a build url

example:

http://modernizr.com/download?-cssanimations-csstransitions-touchevents-domprefixes-mq-prefixed-prefixes-setclasses-testallprops-testprop-teststyles-dontmin-cssclassprefix:modernizr-

What is expected::

modernizr build page with all customizations checked and input areas filled out

What happens::
all customizations including add class are checked to be used; however, the field for class prefix isn't populated with the passed in url attribute. In this example I would expect to see -

(✓) Add CSS classes
...with prefix [ modernizr- ]

01

Resource info:

safari downloads builds with .html ext

Safari doesn't support <a download> attrs, so its going through a POST path in the code, and returning with a .html file extension. The file itself seems to be correct.

Ideally the fix for this would

  1. remove that extension, and
  2. get a client side download solution for safari (and all other modern browsers) working

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.