Deprecated clip: add clip-path as PE #1920
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
`clip` [is deprecated since 2014](https://www.w3.org/TR/css-masking-1/#clip-property). It works great but already has a more future proof version: `clip-path`. @ryuran [suggested](https://twitter.com/ryuran78/status/778943389819604992) the `clip:path: inset(50%);` notation as it's the shorter possible to mimic our old clip. Here's [a codepen](http://codepen.io/ffoodd/pen/gwKZyq?editors=1100#) and [a post translated by Hugo Giraudel](http://hugogiraudel.com/2016/10/13/css-hide-and-seek/). Hope it'll help :)
ryuran
approved these changes
Mar 11, 2017
|
Thanks! I really appreciate the detailed doccumentation in the PR. |
3 tasks
|
It looks like |
|
Indeed, FWIW Bootstrap has an opened PR about this in which I suggested a workaround (see this dedicated CodePen). Basically removing I'm not able to test the perf scrolling issue, so if anyone dare to test this pen way for hiding content, it might be an easy fix. |
|
@ffoodd Why change it at all though? Deprecated or not, |
|
It does not reinvent anything, since this PR is only meant to improve existing pattern, and my last comment suggests a very old and well known pattern. However I do agree that FWIW performance issues in Chrome are just discovered, and aren't documented anywhere for now. |
kaypeter87
added a commit
to kaypeter87/html5-boilerplate
that referenced
this pull request
Sep 1, 2019
* Restores stable visuallyhidden (h5bp#1991) see the saga unfold #1985 * adding npm instructions * Fixed JSHint errors (h5bp#1994) * What about the meta tag, shrink-to-fit=no (h5bp#1984) https://stackoverflow.com/questions/33767533/what-does-the-shrink-to-fit-viewport-meta-attribute-do It worth? I am trying to help please don't blame me * double word on line 21 (be) (h5bp#1996) Please the word 'be' duplicated and corrected that. Thanks. * Add documentation for humans.txt (h5bp#2007) * Add documentation for humans.txt * Change src instead of dist * Update `.htaccess` to v2.15.0 from h5bp/server-configs-apache (h5bp#2003) * Update extend.md (h5bp#2006) * Update extend.md * Update extend.md * Create CODE_OF_CONDUCT.md (h5bp#2011) * Updated tests (Travis and Mocha) and dependencies, rebuilt dist (h5bp#2009) * docs: remove trailing whitespace in CHANGELOG.md * test: update node versions & add trusty to travis * test: update deps and test script in package.json * refactor: rebuild & add updated docs, css, & html * docs: remove duplicate 'be' in usage.md * Upgrading to babel-preset-env (h5bp#2010) * Remove info about Flash in Metro mode IE10 (no longer applicable) (h5bp#2015) This was addressed nearly 5 years ago: https://blogs.msdn.microsoft.com/ie/2013/03/11/flash-in-windows-8/ * Update to jQuery 3.3.0 (h5bp#2016) * update dev dependencies (h5bp#2017) * Update to jQuery 3.3.1 (h5bp#2018) * Minor CSS comments update (h5bp#2019) * update link to Atom RSS (h5bp#2024) * Remove `clip-path` (h5bp#2025) Revert h5bp#1920 to fix h5bp#2021. * Devdeps update (mocha, modernizr, normalize and gulp-autoprefixer) (h5bp#2028) * Update Dev Dependencies mocha, modernizr, gulp-autoprefixer updates. The build tests run fine with no changes. The dist CSS is different as the PR from 2025 didn't include changes in the dist dir. * Update Normalize * Update JS head snippets (h5bp#2029) plus correct capitalization of JavaScript * Adding a note about PRs * Add .babelrc and .prettierrc to .gitattributes (h5bp#2030) * Replace `node-sri` with `ssri` (h5bp#2031) Closes h5bp#1997. * update devdeps (h5bp#2032) * Update package.json (h5bp#2034) * HTTPS links (h5bp#2036) * https a link * https more links * Fix paramaters typo * Remove trailing . (unneeded) * getting indent lined up across the project * Features/eslint (h5bp#2037) Fixes h5bp#1913 * Drops node 4 * update node engine to >=6 (h5bp#2035) * syncs changes to spacing across different editorconfigs * adds eslint with minimally invasive configuration- basically moving from 4 to 2 spaces. * Bump Apache Server Config to v3 (h5bp#2042) * Update CHANGELOG.md * adds 2037 * adds 2042 * Prepare 6.1 release (h5bp#2045) - Update `CHANGELOG.md` date - Update dev deps - Indenting on `index.html` to 2 space (was 4 space) * change the attribute of "notranslate" to "content" (h5bp#2050) * change the key of "notranslate" to "content" "value" is not a valid attribute on element meta (http://w3c.github.io/html/single-page.html#the-meta-element). According to https://support.google.com/webmasters/answer/79812?hl=en, content="notranslate" is recommended to use. * don't specify the language on the Google site * Update dev deps (h5bp#2053) updates to: ``` babel-preset-env gulp-rename gulp-replace mocha ``` * https links to editorconfig (h5bp#2055) * Ignore package-lock.json We already do this on the html5boilerplate.com site REF: https://github.com/h5bp/html5boilerplate.com/blob/master/.gitignore * removes package-lock.json * Update dev deps (h5bp#2058) * Update dev deps * Update package.json update eslint again * Update file_existence.js * Update TOC.md * Improve manifest * Reset incorrect site manifest * Update correct site manifest and apply suggestions * updates to dev deps (h5bp#2061) * Update src manifest * Update dist manifest * update links (h5bp#2062) - Fix for link to Google for mobile seperate links - https link to hixie.ch - fix link for Twitter Cards for Developers * Add Install with Yarn option (h5bp#2063) Yarn is popular these days and H5BP is currently getting 2.4K downloads per month so I think it'd be good to add this here. I changed the list of options to unnumbered as they aren't steps/instructions so bullets make more sense imho. * bump eslint version to 5.6.0 * Fixing links on the EXTEND page (h5bp#2065) - Removed dead link to http://dayofjs.com/videos/22158462/web-browsers_alex-russel - Fix many redirects to browser docs on Mozilla, Apple, Faceook and Microsoft sites * v7.0 (WIP) - Remove unneeded x-ua-compatible - not needed for IE11 - Update many external links - Fix typos - Add info for creating a good meta description - Add link for iPhone X viewport info - Update browser upgrade prompt - Remove integrating Bootstrap with H5BP (it was written a longtime ago and I don't think is relevant so much) - Remove statement that Twitter Cards requires registering a domain - Remove official shortlink section, it was always very poorly supported - Made the touch icons sections more consise (no need at all to mention about non-retina iPhones and iOS versions prior to iOS 6 etc) * update README to links to previous versions - update package,json deps * Re Add display standalone attribute * Re Add display standalone attribute * Add <meta name="theme-color" content="#fafafa"> * Add security.txt details * copies main.css from main.css project (h5bp#2066) This code updates the package.json, build and tests to pull main.css from the main.css npm package. * Removes out of date comments (h5bp#2077) Fixes h5bp#2052 * removing travis-after-all (h5bp#2078) closes h5bp#2020 * updating CSS docs to reference main.css (h5bp#2079) Also, o need to dupe this documentation over two repos. * Removes "display": "standalone" from manifest (h5bp#2096) * Removed link to #404html (h5bp#2099) I've removed link to #404html section of the page, since there is on section for 404 page and in IDE I'm getting "Cannot resolve anchor #404html" warning. I hope that it makes sense. * Upgrade Normalize.css from 8.0.0 to 8.0.1 (h5bp#2104) * Upgrade Normalize.css from 8.0.0 to 8.0.1 * Update Normalizecss version * remove instances of shrink-to-fit=no (h5bp#2103) closes h5bp#2102 Per my findings, the need for it as a default was rectified with the release of iOS 9.3, where the viewport no longer shrunk to accommodate overflow, as was introduced in iOS 9. * Update CHANGELOG.md * Update package.json * the CSS and html MD files hadn't been updated * Bump apache-server-configs to v3.1.0 * Update .htaccess with config v3.1.0 * updating changelog * Typo * npm published * 7.0.1 (h5bp#2112) updates main.css to latest, updates changelog and bumps version * Update index.html A more succinct way of writing the conditional comment -- still recognized by IE 5-9. (IE10+ doesn't support conditional comments) * Update index.html * Minor update to eslint-plugin-mocha and eslint (h5bp#2114) * minor docs update (h5bp#2115) Update https://cdn.polyfill.io from v2 to v3 Remove unneeded shrink-to-fit=no meta tag * Update Modernizr to 3.7.0 (h5bp#2116) * update CSS from main.css in dist (h5bp#2119) * Update Google Analytics docs and snippet (h5bp#2118) - We now include ` ga('set','transport','beacon');` in the `index.html` analytics snippet for improved peformance - Docs updated mentioning why we are using 'analytics.js' rather than 'gtag.js'. Removed link to mathias bynens old blog post as its not so relevant since the async snippet is included in the official Google Develoepr docs. There's a link to Philip Walton's excellent guide to advanced setup. * Update modernizr-3.7.0.min.js (h5bp#2120) This wasn't done correctly in the previous PR. * Upgrading modernizr and bumping version * update version to v7.1.0 + minor devdeps update + update CHANGELOG.md * remove unnessecary info * revert removal of paragraph and instead clarify 'serve jQuery to users in China' * update jQuery to v3.4.0 Improved performance and a minor vulnerability fix REF: http://blog.jquery.com/2019/04/10/jquery-3-4-0-released/ * update jQuery and Modernizr * Update to jQuery 3.4.1 + minor devdeps update * update Apache Server Configs to 3.2.1 * Remove defer from Google Analytics snippet * Update CHANGELOG.md * updating main.css * Add License, NPM Download counter and GitHub Stars counter badges * added main.css change * fix broken links in TOC * update version number to v7.2.0 * gulp-load-plugins update fix a security vuln https://github.com/jackfranklin/gulp-load-plugins#changelog * Revert "gulp-load-plugins update" This reverts commit ec96be3. * update version number in main.css + security vuln devdep update * Add docs update PRs to CHANGELOG * bump lowest supported version of node to 8.x previous versions are end-of-life. REF: https://github.com/nodejs/Release * Removed package-lock.json from .gitignore Removed package-lock.json from .gitignore package-lock.json is intended to be checked into source control, without a package-lock.json using npm makes little sense over yarn. I see this was added in 2017, when there was an issue with the package-lock.json updating, this issue is now long resolved. * adds package-lock.json
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
clipis deprecated since 2014. It works great but already has a more future proof version:clip-path.@ryuran suggested the
clip:path: inset(50%);notation as it's the shorter possible to mimic our old clip.Here's a codepen and a post translated by Hugo Giraudel.
Hope it'll help :)