我喜欢在我的博客文章中添加响应式旁注。响应方式如下：隐藏在小视口中，在宽视口的边缘可见。
当隐藏在小屏幕上时，需要可见元素（“链接”），以指示还有更多内容可供阅读。到目前为止，我的解决方案是：
<p>Some sentence with
<span class="sidenote" onclick="this.classList.toggle('active');">
underlined text
<span class="sidenote__content">
Sidenote content
</span>
</span>, which is clickable on small viewports.</p>
（增加了换行符以提高可读性）
使用CSS，我在带下划线的文本和旁注内容中都添加了星号，以便在大屏幕上可视地将它们连接起来。
该解决方案的问题在于sidenote__content正确的显示取决于CSS。像Pocket这样的读者都可以看到它，其中包括：
我希望有比简单跨度更多的语义解决方案。<aside>并且<section>，因为它们是块元素和不能使用可以自动关闭父p元素。
一种解决方案是将旁注内容与链接分开。但是，我宁愿将一组旁注及其链接保持为一组或一对，以便可以将其按原样插入帖子中。拆分它们将需要javascript逻辑来使链接与其内容匹配，并且在缺少一半的集合时可能导致维护问题。
在旧版本的 Firefox（直到 109）中，可以像 Chromium 一样选择日期选择器的图标：
input[type="date"]::-webkit-calendar-picker-indicator {
display: none; /* Hides the icon in Chrome and Firefox < v109 */
}
这样就不再可能了，另请参阅此 Codepen。有人知道解决方法吗？
我的日期输入有自定义图标，现在在新的 Firefox 版本中显示其中两个图标。现在，我正在执行一些用户代理嗅探并添加 CSS 类，以便我可以删除自定义图标：
const userAgent = navigator.userAgent;
const regex = /Firefox\/(?<majorRelease>\d+(\.\d+)?)/
const match = userAgent.match(regex)
const FirefoxVersion = match ? Number(match.groups.majorRelease) : null
if (FirefoxVersion > 108){
const inputs = document.querySelectorAll('.input[type="date"]')
inputs.forEach((el)=>{
el.classList.add('input-date-firefox-fix')
})
}
I created this component that fades in an image once it is loaded to the client. I would think there is a more Vue-like way to solve this, like using Vue events, but could not find it. What is the Vue way to detect when an image is loaded?
https://codepen.io/kslstn/pen/ooaPGW
Vue.component('imageThatFadesInOnLoad',{
data: function(){
return {
src: 'http://via.placeholder.com/350x150',
loaded: false,
}
},
mounted: function () {
var image = new Image()
var that = this
this.loaded = image.addEventListener('load', function(){that.onLoaded()}) // This …我正在修改一个脚本来播放我在 Codepen 上找到的 mp3，以使其能够在 Safari 上运行。在 Firefox 和 Chrome 中它工作正常，但 Safari 抱怨：“未处理的承诺拒绝：TypeError：没有足够的参数index.html：25”
我读过https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/PlayingandSynthesizingSounds/PlayingandSynthesizingSounds.html这涉及到比我需要的更高级的东西。我只想播放 mp3 中的声音。不过，我需要网络音频，因为这是让它在 iOS Safari 上工作的唯一方法。
有谁知道如何让 Safari 开心吗？
https://codepen.io/kslstn/full/pagLqL
(function () {
if('AudioContext' in window || 'webkitAudioContext' in window) {
// Check for the web audio API. Safari requires the webkit prefix.
const URL = 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/Yodel_Sound_Effect.mp3';
var AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext(); // Make it crossbrowser
const playButton = document.querySelector('#play');
let yodelBuffer;
window.fetch(URL)
.then(response => response.arrayBuffer())
.then(arrayBuffer => context.decodeAudioData(arrayBuffer))
.then(audioBuffer …我有一个包含人们名字和姓氏的数据集，我希望用户能够使用 Vue 2 搜索这些数据。
到目前为止，我设法首先按名字对列表进行排序，然后使用 Lodash 按姓氏排序，我还设法按类型对它们进行了分类。现在我想过滤/搜索（我不知道正确的词）数组，只显示谁（部分）名字或姓氏或两者都与输入字段的内容匹配。
一个普通的 JS 解决方案将与 Lodash 解决方案一样受到赞赏！
props: {
people: {
type: Array,
required: true
}
},
data: function(){
return {
filter: '',
people:[{
"FirstName" : "Stefan",
"LastName" : "Braun",
"Type" : "EN",
},
{
"FirstName" : "Jenny",
"LastName" : "Smith",
"Type" : "VO",
},
{
"FirstName" : "Susan",
"LastName" : "Jones",
"Type" : "EN",
}]
}
}
methods: {
matchingType: function (people, type) {
people = this.alphabeticallyOrdered(this.searchFiltered(people))
return people.filter(function (person) {
return person.Type == …如何为不支持当前规范的浏览器通过功能查询或媒体查询可靠地为CSS网格样式创建后备？
根据此类文章，浏览器会忽略无法解析的CSS。因此，我希望否定功能查询即使在不支持它的浏览器上也能正常工作。例如IE11不支持功能查询，因此我希望它忽略这一行并在查询中应用样式：@supports not (display: grid){}。但是，正如您在此测试中所看到的，IE11会忽略该查询中的所有样式。
我找到了针对IE10 +的媒体查询，但该查询排除了其他不支持网格的浏览器。当然，我可以先声明后备样式并用@supports (grid-area: area)查询覆盖它们，但是我更喜欢不需要覆盖的解决方案。