我现在想开始使用css:target,not()和~sibling selectors.这些是否有填充物或其他解决方案？我更喜欢能够简单地使用css而不是使用js/jQuery来为每次使用模拟它们.
我正在尝试使用Modernizr.js 创建一个检测Mutation Observers的测试.在Modernizer文档中,有一个用于测试称为前缀的DOM元素的部分.我尝试使用:
Modernizr.load({
test: Modernizr.prefixed('MutationObserver', window),
yep: ['/js/polyfill_yep.js'],
nope: ['/js/polyfill_nope.js']
});
但显然,这是行不通的.我得到一个TypeError: f.bind is not a function我相当肯定前缀字符串不是MutationObserver,但我不知道它可能是什么,或者即使我正确地编写测试.有任何想法吗？
我有一个博客,我试图在所有浏览器中使用bootstrap作为项目的主干.我使用Modernizr和Respond强制IE响应媒体查询,但由于某种原因脚本无法正常工作.我是以不正确的顺序放置它们还是覆盖它们的另一个JS脚本？任何帮助将不胜感激.
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/library/css/bootstrap.min.css">
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/library/css/bootstrap-responsive.min.css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:700' rel='stylesheet' type='text/css'>
<script src="<?php echo get_template_directory_uri(); ?>/library/js/modernizr.full.min.js"></script>
<script src="https://raw.github.com/scottjehl/Respond/master/respond.min.js"></script>
<!-- HTML Shim - Enables usage of all HTML5 elements in Internet Explorer -->
<!--[if lt IE 9]>
<script src="https://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write(unescape('%3Cscript src="<?php echo get_template_directory_uri(); ?>/library/js/libs/jquery-1.7.1.min.js"%3E%3C/script%3E'))</script>
<!-- Selectivizr - Enable CSS3 selectors for IE 6-8 -->
<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/library/js/libs/selectivizr-min.js"></script>
<![endif]-->
<script src="<?php echo …您好我在Chrome和Opera上有一个有效的Polymer 1.0网页.现在我需要在Firefox和Safari中运行该页面.我有以下测试:
<!DOCTYPE html>
<html>
<head>
<?php use Cake\Routing\Router; ?>
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?>
<link rel="import" href="<?= Router::url('/'); ?>bower_components/polymer/polymer.html">
<dom-module id="test-element">
<template >
<h1>It works</h1>
</template>
<script>
Polymer({
is: "test-element"
});
</script>
</dom-module>
</head>
<body unresolved>
<test-element></test-element>
</body>
</html>
我试过改变
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents-lite.min.js'); ?>
至
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents.js'); ?>
要么
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents.min.js'); ?>
我认为webcomponents的Polyfill会处理html导入.但它不起作用.在Firefox中我收到以下错误:
ReferenceError: Polymer is not defined
我无法用Safari测试它,但我期望得到类似的结果.
我做错了吗？我该怎么做才能做到这一点？
此外,我尝试删除webcomponents并运行bower更新再次安装它们.
谢谢
编辑:
我有两个文件.index.html的:
<!DOCTYPE html>
<html>
<head>
<?php use Cake\Routing\Router; ?>
<?php echo $this->Html->script('/bower_components/webcomponentsjs/webcomponents.js'); ?>
<link rel="import" …我想使用polyfill,fetch()以便我的代码使用GitHub Fetch Polyfill在Safari 上运行,但我不确定如何使用它.
根据其文档,我可以安装它:
$ npm install whatwg-fetch --save
我已经完成了这一步.
我已经尝试过这个,但它不起作用:
var fetch = require('whatwg-fetch') // does not work
我怎么想使用fetch polyfill？
参考文献:
我正在玩自定义元素.我很难找到缺乏支持的polyfill浏览器的正确方式(或者感觉正确的方式)(看似只有Firefox？).
我目前正在做以下事情:
if ('customElements' in window) {
var e = document.createElement('script');
e.src = '/static/elements/my-element.js';
document.body.appendChild(e);
} else {
var e = document.createElement('script');
// customElements
e.src = 'https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.8/webcomponents-sd-ce.js';
e.onload = function() {
var c = document.createElement('script');
// ShadyCSS
c.src = '/static/js/custom-style-interface.min.js';
c.onload = function() {
var i = document.createElement('script');
i.src = '/static/elements/my-element.js';
document.body.appendChild(i);
}
document.body.appendChild(c);
}
document.body.appendChild(e);
}
这可行,但显然效率极低(特别是在慢/高延迟网络上),而且看起来非常嘈杂.在尝试支持Firefox之前,我可以做到:
<script src="/static/elements/my-element.js"></script>
现在我上面有这种憎恶.必须有一个更好的方法,但我似乎找不到一个.
如何确保customElement和ShadyCSS polyfill之前运行my-element.js而不会延迟下载量？任何指针都非常感谢!
编辑: 现在我正在使用另一种方法,我将在这里添加.我不认为它是完美的,但似乎比我的第一种方法更好或强迫每个人下载polyfills无论他们是否需要它们.
function insertScript(url, downloadAsync) {
const script = document.createElement('script');
document.head.appendChild(script);
script.async = downloadAsync;
script.src …javascript web-component polyfills shadow-dom custom-element
由于与Internet Explorer 11和ES7问题array.includes()的功能，我不得不进口core-js/es7/array的polyfills.ts。我注意到，已经有一个core-js/es6/array。
我的问题是，es7/array包括旧版本es6/array（及以下版本）的polyfills 吗？我可以同时删除es6/array它们吗？
我的 Bower.json 中有这两个依赖项：Polymer/polymer#^2.6.0 和 webcomponents/webcomponentsjs#^v1.1.0。
在我的 index.html 中，如果我添加，我看不到任何区别
<script src="bower_components/webcomponentsjs/webcomponents-lite.js">
or
<script src="bower_components/webcomponentsjs/webcomponents-loader.js">.
从https://www.npmjs.com/package/webcomponents-lite我读到“webcomponents-lite.js 包括除影子 DOM 之外的所有 polyfill”，并从https://www.npmjs.com/package/web-components-我读到“将 HTML 文件及其所有依赖项复制到公共/输出目录中的命名空间位置”。我可以假设 web-components-loader 执行 webcomponents-lite 默认执行的操作以及其他一些加载功能吗？有什么理由使用其中一种而不是另一种吗？看来 webcomponents-lite 的加载过程较少，所以如果它符合我的需求，它会比 webcomponents-loader 更好吗？
我在中有以下设置tsconfig.json。我添加"es2017"了使用Array.includes。：
{
"compilerOptions": {
"lib": [
"es6",
"es2017",
"dom"
],
"module": "es6",
"target": "es5"
}
}
现在，我意识到，我必须添加import 'core-js/es7/array';到polyfills.ts，以Array.includes用于Internet Explorer11。target中的tsconfig.json设置为es5，而没有Array.includes。
为什么需要添加polyfill？
我的 Next.js 网站使用滑块 https://github.com/nerdyman/react-compare-slider
它运行良好，但不适用于 Safari、桌面版或 iPhone。这是我的网站 https://wordpress-website-headless-v2-afjayn5e2.vercel.app/
靠近页面底部我正在使用比较滑块，这导致了错误。
我用谷歌搜索了一下，看起来很多滑块在 Safari 上都有这个问题，解决方案是添加一个polyfill（https://www.npmjs.com/package/resize-observer-polyfill），我就是这样做的（我认为）但它仍然不起作用..这是我的整页代码。
总而言之，它适用于 Firefox 和 Chrome，但不适用于 Safari
import ResizeObserver from 'resize-observer-polyfill';
import Head from 'next/head'
import Link from 'next/link'
import Image from 'next/image'
import ContainerFull from '../components/container-full'
import HomeStories from '../components/home-stories'
import MyCarousel from '../components/carousel'
import HeroPost from '../components/hero-post'
import Intro from '../components/intro'
import Layout from '../components/layout'
import { getHomePage, getHomeSlides, getAllPostsForLanding } from '../lib/api'
import { CMS_NAME } from '../lib/constants'
import Header from '../components/header'
import Col from …polyfills ×10
javascript ×3
angular ×2
jquery ×2
modernizr ×2
css ×1
css3 ×1
ecmascript-6 ×1
ecmascript-7 ×1
fetch-api ×1
firefox ×1
html-imports ×1
next.js ×1
npm ×1
polymer ×1
polymer-2.x ×1
reactjs ×1
shadow-dom ×1
tsc ×1
tsconfig ×1
typescript ×1