小编dar*_*her的帖子

自从使用Cufon带来的麻烦以来,我冒险使用外部字体资源,但是最近,我一直在寻找替代方法来加载字体以查看是否有更好的方法; 更好的方法有一种突然出现的方式.

那里有很多新的方法,并且每种方法看起来都有变化; 我应该使用typekit吗？或google webfonts(使用js或css)？我应该继续使用本地加载字体(例如fontsquirrel.com生成的方法)吗？

我将列出下面看起来最受欢迎的方法,并进行一些测试,但它真的值得转向webfont吗？它似乎会带来更高的资源负载(http请求)并且文件格式类型较少(兼容性较差)等.但在大多数情况下,看起来像文件是异步和高效加载的.

1. 这只是一个情况和需要的问题吗？如果是这样,他们是什么？
2. 这些方法之间是否存在巨大差异？
3. 我还没有列出更好的方法吗？
4. 性能方面的专业人士/骗子是什么？看？依赖呢？兼容性？

我真的在这里寻找最佳实践,性能是一件大事,但可扩展性和易用性也是如此.更不用说,外观和感觉.

谷歌CSS

• 仅使用外部样式表
• 仅使用最小的兼容文件类型
• 可以使用@import或者<link>获取styleshee(@font-face)的内容并将其直接放入您自己的样式表中.

检测结果

  78ms load of html
  36ms load of css

Run Code Online (Sandbox Code Playgroud)

Google JS方法

• 用于webfont.js加载styleshet
• 仅使用最小的兼容文件类型
• :root用类附加元素
• 将脚本添加到头部.

检测结果

    171ms load of html
    176ms load of js
    32ms load of css

Run Code Online (Sandbox Code Playgroud)

Typekit方法

• :root用类附加元素.
• 可以使用*.js代码段或外部加载的文件*.js文件
• 使用data:font/opentype而不是字体文件.
• 将脚本添加到头部
• 将嵌入式css添加到头部

• 将外部样式表添加到头部

  您可以从typekit.com轻松添加/删除/调整字体和目标选择器

检测结果

  169ms load of html
  213ms load …

Run Code Online (Sandbox Code Playgroud)

我一直跳进Mod​​ernizr位于头部的项目,但它没有被使用(至少对于特征检测).现在,我喜欢Modernizr,我经常使用它进行特征检测,并对需要它的项目进行回退; 然而,我进入它的最后三个项目一直没有调用任何特征检测类.这些项目使用的是vanilla javascript 和/或根本不需要jQuery polyfill. ¹那就是说...如果你没有使用特征检测并且真的不需要加载jQuery库 ²,那么Modernizr除了要添加额外的HTTP请求和资源之外还做了什么吗？

我对jQuery/javascript不够强大,无法理解它是否会影响其他任何内容.

编辑

¹&² - Modernizr是javascript,不需要jQuery库(这让我想知道为什么还要加载jQuery库,至少在这些情况下).

Modernizr.min只有#-shiv-cssclasses-load7.57 KB而html5shiv.min只有3 KB.

目标：仅突出显示文本，而不突出显示空白。

对我来说，当实现大的填充、行高等（现在可以突出显示的空白）时，突出显示整个元素可能会导致一些不规则和糟糕的用户体验。像突出显示文本块这样简单的任务可能会反过来突出显示用户不想要的网站其他区域。我正在尝试在当前站点上解决此问题，但只能通过使用下面提供的方法来实现。

其中，我在块级元素内使用内联元素。正如您可能注意到的，如果在整个网站中使用它，可能会变得非常麻烦且代码繁重。有没有更好的方法来实现第二种方法？

我对 Javascript 解决方案和 CSS 持开放态度。

据我所知（通过测试），如果复制+粘贴到 Word 文档或网络邮件应用程序（例如 gmail）中，它的渲染效果不会有所不同。如果您知道这可能会导致任何问题，请在下面提及。

为了更好地说明：

随着突出显示的改进： 没有突出显示改进：

^诚然，这是一个半途而废的例子，它展示了它可以派上用场的实例之一，还有很多其他实例，相信我。

.highlight-text-only > *{
display:block;
  -webkit-user-select: none;
 -moz-user-select: none;
  -ms-user-select: none;
   -o-user-select: none;
      user-select: none}

.highlight-text-only *>span,
.highlight-text-only *>strong{
display:inline;
  -webkit-user-select: text;
 -moz-user-select: text;
  -ms-user-select: text;
   -o-user-select: text;
      user-select: text}

<div class="highlight-text-and-element">
  <h3>Testing Text Selection Method 1 (default)</h3>
  <div>of only text</div>
  <a href="#"><strong>with</strong></a>
  <p>highlighting</p>
  <span>the actual elements</span>
</div>

<hr>

<div class="highlight-text-only">
  <h3><span>Testing Selection Method 2</span></h3>
  <div><span>of only text</span></div>
  <a href="#"><strong>without</strong></a>
  <p><span>highlighting</span></p>
  <span><span>the actual …

HTML5 电子邮件类型和模式

将新的 HTML5type值（例如email、tel等）与属性结合使用之间是否存在任何问题、冲突或其他问题pattern。

我不是指 HTML5 浏览器兼容性\xe2\x80\x94，只是这些属性的新值与该pattern属性结合使用时所产生的直接影响。

为了清楚起见，我将使用几个例子type="email"

A. 仅键入属性。

<input type="email">\n

B. 仅有模式属性

<input type="text" pattern="[email regex]">\n

C. 电子邮件和模式属性一起使用

<input type="email" pattern="[email regex]">\n

我觉得你通过新的 HTML5 类型值获得了更多语义价值；然而，正则表达式更容易控制，因为 email@localhost 仅通过所使用的电子邮件值有效。

如果他们是重复的，我很抱歉，我环顾四周但没有看到这个特定的问题

编辑

我发现提到了两者结合使用时可能产生的负面影响。但是，我不确定消息来源的可信度。

\n

由于这两种验证电子邮件地址的方法各有利弊，因此您可以决定使用哪一种。您不应尝试同时使用它们，因为这可能会导致支持这两种功能的浏览器发生冲突。使用 type=\xe2\x80\x9demail\xe2\x80\x9d 的优点是它在语义上是正确的，使用pattern属性的优点是网络上有几个易于使用的polyfills，这确保了对更大的支持受众范围。

\n

来源

请务必彻底测试两者是否同时使用。如果我发现任何负面影响，我会更新问题。

我知道<select>使用 's 是出了名的痛苦，但我正在构建一个带有accesskey 的表单，并通知用户所述键，我在表单项的第一个字母下划线。

使用占位符这很容易，

::-webkit-input-placeholder:first-letter{text-decoration:underline}

段落自然轻松，

.field>p:first-letter{text-decoration:underline}

然而，我一生都无法弄清楚如何处理<select>。

我已经尝试了一些事情，我将在下面列出它们。

  /* attempt 1 */
  select:first-letter{}

  /* attempt 2 */
  select option:nth-child(1):first-letter{}

  /* attempt 3 */
  option[value="0"]:first-letter{}

  /* attempt 4 */
  select:before,
  option[value="0"]:before{
    content:'';
    position:absolute;
    left:0;
    bottom:3px;
    width:5px;
    height:1px;
    border-bottom:1px solid black;
  }

  /* attempt 5 */
  <option><u>N</u>ame</option>

  /* attempt 6 - kinda works, looks wonky */
  <option>&#x035F;Name</option>

我能够实现这一目标的唯一方法是<div>在需要的地方放置一个随机的边框。这对我来说似乎有点过分和肮脏。

我知道我可以使用Selectize、Select2、Chosen或任意数量的其他插件...我最终可能会这样做，但 OP 是正确的。

有任何想法吗？

有很多关于表格和架构的"正确","语义"和"可访问"使用的文章,我正在重新思考我如何处理表单.什么是"正确"的字面上有很多变化,我不再100%真正准确的了.

在MDN文章(这里)中,它提到:

在这个例子中,屏幕阅读器将为第一个小部件发出"果汁大小小",第二个小部件发出"Fruit juice size medium",第三个小部件发出"Fruit juice size large".

<form>
  <fieldset>
    <legend>Fruit juice size</legend>
    <p>
      <input type="radio" name="size" id="size_1" value="small" />
      <label for="size_1">Small</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_2" value="medium" />
      <label for="size_2">Medium</label>
    </p>
    <p>
      <input type="radio" name="size" id="size_3" value="large" />
      <label for="size_3">Large</label>
    </p>
  </fieldset>
</form>

现在,我可以看到上述示例的好处,但是,我说我做了一个多步购物车,我不希望辅助技术说"Checkout:cc-number","Checkout:cc-在每个标签之前"使用"结帐日期.特别是在标记步骤的情况下.这将是重复的,有时我会假设混乱...但我总是将一个表格的部分分组<fieldset>.现在,我使用的是反思fieldset和legend根本的,但现在它违背语义？什么是权衡？有余额吗？

另外,我将使用相同的MDN文章,所以我不是通过网络发送给你的,

请注意,即使不考虑辅助技术,为给定小部件设置正式标签集也允许用户单击标签以激活所有浏览器中的相应小部件.这对于单选按钮和复选框特别有用.

某些辅助技术可能无法处理单个窗口小部件的多个标签.因此,您应该将窗口小部件嵌套在其对应的元素中以构建可访问的窗体.

<form>
  <p>
    <input type="checkbox" id="taste_1" name="taste_cherry" value="1">
    <label for="taste_1">I like cherry</label>
  </p>
  <p>
    <label for="taste_2">
      <input type="checkbox" id="taste_2" name="taste_banana" value="1">
      I like …

我有一个 JSON 对象，返回内容块的发布日期的 unix 时间戳。使用时此时间戳将返回为无效日期.toISOString()，除非我将其乘以 1。

举个例子

let timestamp = item[index].date; // returns string of "1584632700000"
let invalidDate = new Date(timestamp).toISOString(); // returns invalid Date
let validDate = new Date(timestamp * 1).toISOString(); // returns valid (and correct) Date

这背后的原因是什么？