小编Jef*_*wrs的帖子

视口元标记真的有必要吗?

我创建了一些响应式网站,但对响应式网站开发来说却是新手.在我的CSS中,99%的值都是ems或百分比.我正在使用媒体查询(max-width和max-device-width)来进行布局更改.我没有包含一个视口元标记,它在iOS,我测试的许多Android手机和平板电脑以及所有桌面浏览器上运行良好.

添加元标记会破坏我的网站.我做错了什么,或者做了些什么事情以便我不需要包含它?我很困惑为什么它似乎是一种最佳实践,因为它打破了我的东西.

我错过了什么吗?

css viewport responsive-design

46
推荐指数
5
解决办法
2万
查看次数

使用Nightwatch.js上传图像文件

我正在使用Chrome驱动程序使用nightwatch.js运行前端测试.我需要测试图像上传是否正常工作,大概是通过提供的文件输入,因为有成功发布的回调.

我知道这可以使用Selenium Web Driver的sendKeys方法完成.

你怎么能用javascript和nightwatch.js来实现这个目标?你可以访问Selenium webdriver或它的界面吗?

javascript selenium file-upload node.js nightwatch.js

11
推荐指数
1
解决办法
5149
查看次数

标签部分的语义标记和WAI-ARIA?

我正在建立一个网站,我一直在努力磨练我的可访问性技能.我想知道标签内容的最大语义标记是什么.这就是我现在拥有的:

<section>
  <nav>
    <a href="#tab" aria-controls="content">Stuff</a>
    <a href="#tab" aria-controls="content">Stuff</a>
    <a href="#tab" aria-controls="content">Stuff</a>
  </nav>
  <section id="content" aria-live="polite" role="region">
    <article>...</article>
    <article>...</article>
    <article>...</article>
   </section>    
</section>
Run Code Online (Sandbox Code Playgroud)

我对此有一些具体问题.

  1. 我是在正确的轨道上吗?如果没有,有人可以推荐一些变化?
  2. 如果我要通过AJAX加载文章,我是否需要进行更改?
  3. 我需要导航标签吗?
  4. WAI-ARIA的角色是否足够?
  5. 这些是正确的WAI-ARIA角色吗?

html html5 accessibility wai-aria

7
推荐指数
1
解决办法
1179
查看次数

移动Safari:区分按下后退按钮和向后扫描历史记录

在iOS 8移动Safari上从屏幕左侧或靠近屏幕左侧滑动,您可以返回浏览器的历史记录,就好像您正在点击Safari的后退按钮一样.

两个事件都会触发window popstate事件.但是我想根据哪个事件触发pop来在页面上进行不同的交互.

我发现这篇关于iOS 7的帖子:在iOS 7 Safari中,你如何通过边缘滑动与后退/前进按钮来区分popstate事件?

我将假设没有任何改变,但我想知道是否有人提出任何其他解决方案或想法.

javascript safari ios

7
推荐指数
0
解决办法
1038
查看次数

相对标签索引

我在导航上使用选项卡索引,以允许用户通过选项卡浏览该内容。我遇到的问题是第三个和第四个(六个中的)打开一个模式。该模式打开后,用户必须通过 Tab 键浏览其余的导航才能到达模式中的字段。我想让模式的表单/元素在返回导航之前捕获所有选项卡,如果不阻止它移回导航元素直到模式关闭。有没有一种简单的方法可以强制下一个选项卡跳转到模式上的第一个字段而不使用javascript?这看起来很简单,但我觉得我错过了一些东西。

提前致谢。

<nav>
    <a tabindex="1" href="#">A</a>
    <a tabindex="2" href="#">A</a>
    <a tabindex="3" href="#" onclick="$('.b').show();">A</a>
    <a tabindex="4" href="#">A</a>
    <a tabindex="5" href="#">A</a>
    <a tabindex="6" href="#">A</a>
    <a tabindex="7" href="#">A</a>
</nav>

<a tabindex="3" href="#" class="b" >B</a>
<a tabindex="4" href="#" class="b" >B</a>
<a tabindex="5" href="#" class="b" >B</a>
<a tabindex="6" href="#" class="b" >B</a>
Run Code Online (Sandbox Code Playgroud)

这是我正在尝试做的一个小非工作示例: http://jsfiddle.net/jeffpowrs/KgHtg/1/

html

6
推荐指数
1
解决办法
2016
查看次数

显示表格单元格不一致.

嘿,我想知道为什么会这样:

http://jsfiddle.net/dSVGF/

按钮没有填充容器,但锚点没有.这两个标签在风格上有什么根本的不同?

<div class="table">
    <a href="#">A</a>
    <a href="#">B</a>
    <a href="#">C</a>
</div>

<div class="table">
    <button href="#">A</button>
    <button href="#">B</button>
    <button href="#">C</button>
</div>


.table {
    display: table;
    width: 100%;
    outline: 1px solid red;
}

.table > * {
    display: table-cell;
    outline: 1px solid lightgreen;
}
Run Code Online (Sandbox Code Playgroud)

html css

6
推荐指数
1
解决办法
622
查看次数

自动换行:断字在文本顶部添加填充

我有许多包含各种用户生成副本的 div。这个div上的css如下:

copy {
    width:200px;
    padding:20px 0px 20px 42px;
    line-height:18px;
    color:#555555;
    word-wrap: break-word;
}
Run Code Online (Sandbox Code Playgroud)

当内容是一个没有空格的长字符串时,word-wrap:break-word会适当地中断副本,但会在顶部添加一个“空行”,就好像有一个返回</br>或什么的一样。

white-space: pre; 似乎在上述场景中解决了这个问题,但为所有其他文本增加了间距。

我已经成功地使用了多次,但从未见过这个问题。有任何想法吗?

css text

5
推荐指数
1
解决办法
2608
查看次数

使用 Rollup 解决 woff 导入

我正在尝试使用 Rollup.js 捆绑一个主题包。主题包括一些全局样式,最相关的@font-face。我正在导入我的字体并打算通过样式组件注入全局注入它们。

当我尝试捆绑包时,Rollup 会阻塞字体文件。我的假设是 Webpack 和 Rollup 可以互换使用,不是这样吗?

做这样的事情的正确方法是什么?

控制台错误:

{ SyntaxError: /Users/****/sites/vz-react/packages/Theme/fonts/NeueHaasGroteskDisplayBold.woff: Unexpected character '' (1:4)
> 1 | wOFF:?? 6???OS/2lZ`?  VDMX?w?mt?cmap@\??(cvt ?`?
    |     ^
  2 |
       ?fpgm??
  3 | ?c??gasp
              ? glyf
                    ?I????rheadV?66?!?vhheaV?!$??hmtxW;*+kernZ$????loca'??p?\maxp+?  ?[name+?   ?y*/post4? ??prep5?7??x?c`f?b????????????
  4 | ??????9X?@????a????x??3800?fbf?/?p?y9#????????N3(!R??x??eT???g?f`???u??3f????????????`???H(????w???=?w?O????\??dd?G?Nf2?,d?od%?t?ž??l2;??
...
Run Code Online (Sandbox Code Playgroud)

globalStyles.js:

import NeueHassGroteskDisplayBold from '../fonts/NeueHaasGroteskDisplayBold.woff';
import NeueHassGroteskDisplay from '../fonts/NeueHaasGroteskDisplay.woff';
import NeueHassGroteskText from '../fonts/NeueHaasGroteskText.woff';
import NeueHassGroteskTextBold from '../fonts/NeueHaasGroteskTextBold.woff';

const injectGlobalStyles = () => `
  * {
    box-sizing: border-box;
  }

  *:focus {
    outline: #000 dotted 1px;
    outline-offset: …
Run Code Online (Sandbox Code Playgroud)

javascript css rollup node.js styled-components

4
推荐指数
2
解决办法
7334
查看次数

Lerna add 不会添加内部依赖

我正在使用 lerna 来管理 React 组件库。我的一些组件既有来自 npm 注册表的外部依赖项,也有内部依赖项,即存储库中的同级包。

目录结构

我正在尝试使用该lerna add命令将内部依赖项添加到另一个包。具体来说,我想将 Utils、Typography、Link 添加到 HRWrapper。

要添加实用程序,我运行:

lerna add Utils --scope=HRWrapper
Run Code Online (Sandbox Code Playgroud)

并收到此错误:

lerna notice cli v3.2.1
lerna info versioning independent
lerna WARN No packages found where Utils can be added.
Run Code Online (Sandbox Code Playgroud)

要安装 Typography 我运行:

lerna add Typography --scope=HRWrapper
Run Code Online (Sandbox Code Playgroud)

并收到此错误:

lerna notice cli v3.2.1
lerna info versioning independent
lerna ERR! Error: 404 Not Found - GET https://registry.npmjs.org/Typography - Not found
lerna ERR!     at res.buffer.catch.then.body (/Users/powje6f/sites/vz-react/node_modules/npm-registry-fetch/check-response.js:104:15)
lerna ERR! lerna 404 Not …
Run Code Online (Sandbox Code Playgroud)

javascript npm lerna

3
推荐指数
1
解决办法
2019
查看次数

Mongoose connect方法在简单的Node Server上失败.快递,猫鼬,路径

这是我第一次使用mongoose运行节点.我正在阅读这本骨干书中的一些教程,我在本章中使用express,mongoose创建一个restful api,我正在遵循代码,我甚至已经复制和粘贴但它仍然无法正常工作.这是代码:

http://addyosmani.github.io/backbone-fundamentals/#creating-the-back-end

// Module dependencies.
var application_root = __dirname,
    express = require( 'express' ), //Web framework
    path = require( 'path' ), //Utilities for dealing with file paths
    mongoose = require( 'mongoose' ); //MongoDB integration

//Create server
var app = express();

// Configure server
app.configure( function() {
    //parses request body and populates request.body
    app.use( express.bodyParser() );

    //checks request.body for HTTP method overrides
    app.use( express.methodOverride() );

    //perform route lookup based on url and HTTP method
    app.use( app.router );

    //Where to serve …
Run Code Online (Sandbox Code Playgroud)

mongoose mongodb node.js express

1
推荐指数
1
解决办法
1万
查看次数