小编Bar*_*ney的帖子

如何水平居中可变宽度的浮动元素？

编辑:我已经使用了包含div浮动元素并width为容器指定了一个(然后margin: 0 auto;用于容器).我只想知道是否可以在不使用包含元素的情况下完成,或者至少不必width为包含元素指定a .

tl;博士？获取以下链接中演示的机制,以在Android Chrome和默认浏览器上使用GPU加速.

更新2(2014-01-13 13:25:30Z):根据bref.it下面的评论,截至Android 4.4 KitKat报告的行为是固定的 - 但我下面描述的修复现在打破了它!索德定律.

更新1(2012-11-01 17:54:09Z):从转换元素的计算样式报告的变换矩阵可以推断出有缺陷的行为,它返回一个像素值.我将尝试为此编写一个Modernizr测试,为任何可能的解决方案铺平道路.

我开发了一种滑动容器的机制,以显示全宽,水平排列的子部分.滑动标签,基本上.因为有很多性能密集的东西和精心设计的Javascript,我希望将JS保持在最低限度,并尽可能多地使用CSS中的纯粹风格.我认为我做得很好,考虑到 - JS只是改变了包装器的一个属性:

http://jsfiddle.net/barney/VPJuq/ (移动设备可以附加/显示/显示这些小提琴网址以自行查看结果)

关于这是如何工作的一句话:将标签视为inline-blocks允许我指定white-space: nowrap(最后几条规则中的其余代码基本上折叠了标签之间的空白)并允许它们水平堆叠而不清除/返回,同时每个都保持其父母的全宽.从那里开始,为包装器设置负的左偏移就可以了.很酷,对吧？

现在,有点上下文:我正在开发的接口是在本机移动应用程序中运行 - 应用程序的核心功能依赖于尖端的移动专用技术(不要问 - NDA) - 通过UIWebView,而且是唯一的目前支持该技术的平台是Android.

在这里我的问题是双重的:transform: translate工作/很多/更平滑(translate3d甚至更多)left或margin-left过渡到一个真正令人满意的点,边界至关重要 - 特别是在Android上,看到非翻译过渡仍然是最新的结果具有最新操作系统的手机.考虑到这一点,问题的关键在于Android似乎在与之相关时推断出盒子模型的不同translate.为了演示,这里是同一个transform基于同一个东西的版本,与前一个小提琴做同样的事情,适用于支持translate3d的所有浏览器......

http://jsfiddle.net/barney/EJ7ve

如果你在iPhone上检查这个(再次,通过追加/show),你会注意到iPhone上的帧速率提高了.对于在Android上运行的Firefox也是如此,并且可以说在Chrome和Android上的默认浏览器上也是如此,除了在这里,translateX-100%的偏移量以某种方式指向所有三个选项卡占用的空间,因此包装器滑动到足以使得没有任何标签可见.这很奇怪,因为变换百分比被指定为与正在变换的元素的完整框模型有关 - 并且计算出的样式明确地将包装宽度描述为与其父元素相同(不是,结果意味着,拉伸3倍到容纳标签).

我们可以将其描述为一个错误吗？

据我所知,没有纯CSS(我不反对媒体查询功能检测,CSS供应商分叉或财产黑客)推断和解决这个问题的方法.事实上,我现在能够想到的唯一一种制作相同的CSS机制工作的方法是嗅探Android的UA字符串并有条件地应用不同的规则.育!如果我要制作一个Android-WebKit专用解决方案,并在其他地方打破功能,我可以将事实上的行为记入帐户并使百分比引用分数:

http://jsfiddle.net/barney/nFt5t/

不理想,因为这会使UI浏览器特定,并且要求我们在编写CSS之前预先知道组中的选项卡数量.但这甚至没有完全解决那里的问题,因为在方向改变时(这真的很奇怪),偏移切换到其他浏览器显示的规范正确行为!

我也尝试将翻译应用到实际的标签,这些标签在其他任何地方都可以使用,但是尽管正确选择和应用规则,Android的浏览器也不会产生效果.陌生人和陌生人:

(翻译,使用Android的理论,根本不在Android上工作)

http://jsfiddle.net/barney/EJ7ve/9

深入了解跨浏览器解决方案的任何见解或想法.

编辑:明确地说,我不是在寻找有关功能所隐含的各种问题的定性价值的建议或意见 - 我也不是在寻找可靠的解决实际问题的方法; 我只是在寻找标题中问题的技术性,可验证的答案.我在问题中添加了一系列不符合标准的浏览器.

使用函数的.toString方法通常会呈现该函数的源代码.问题是没有指定这种行为- 规范没有做出任何关于应用于函数时应该采取什么行为的承诺.Chrome的控制台甚至会告诉你(当你传递函数以外的任何东西时Function.toString.call),Function.prototype.toString不是通用的

这篇博客文章表明,这可以用作为多行字符串生成可读语法的方法(通过将字符串存储为无操作函数体内的多行注释).作者在编写Node.js应用程序的上下文中建议使用这一用法,该子句认为此行为只是可靠的,因为Node.js在受控环境中运行.但是在Javascript的本地Web中,任何东西都可以出现并解释它,我们不应该依赖于未指定的行为.

在实践中,我设置了一个小提琴,它呈现一个选择框,其内容由一个大的多行字符串来测试代码,以及我工作站上的每个浏览器(Chrome 27,Firefox 21,Opera 12,Safari 5) ,Internet Explorer 8)按预期执行.

目前什么事JavaScript引擎不表现为如下？

鉴于:

function uncomment(fn){
  return fn.toString().split(/\/\*\n|\n\*\//g).slice(1,-1).join();
}

下列:

uncomment(function(){/*
erg
arg
*/});

应输出:

erg
arg

不符合标准的浏览器列表:

• Firefox 16
• ...

所述的Node.js文档提供用于创建回波服务器的示例:

var net = require('net');
var server = net.createServer(function (c) {
  c.write('hello\r\n');
  c.pipe(c);
});
server.listen(8124, 'localhost');

这条线的目的是什么？

  c.pipe(c);

如果我有几个同名的单选按钮,则一次只能选择一个.当一个人被选中时,任何同名人都会失去他们的选择.我很感兴趣为什么这不构成.change()jQuery 的事件.

黑客攻击该$.change()功能会非常激烈,但这似乎并没有被报告为错误 - 所以我有兴趣找出原因并非如此.

测试如下:我希望无论何时选择无线电,都会触发两个更改事件,但事实并非如此.

这是一个例子:http://jsfiddle.net/XzmmW/

我为我们的网络应用程序编写了一个模态幻灯片,它提供了一组文档导航,并为这些文档公开了各种元数据.

这是具有深奥要求的应用程序的一个重要组成部分,因此我认为其核心场景(作为验收标准给出)应该是众多且内部一致的,这是公平的.

为了避免为我们的许多场景中的每一个都采取新的步骤,我已经调整了一个帮助器,将人类可读的术语翻译document caption成选择器:

module SelectorsHelper
  def selector_for(term)
    case term
    # Lightbox / modal / fancybox
    when 'lightbox'
        '#fancybox-inner'
    when 'close button'
        '.document-viewer__tools__close'

...以及一些通用的步骤定义,例如:

# Generic click action
When(/^I click (?:on )?(?:the |a )'(.*?)'?$/) do |element|
  find(selector_for(element)).click
end

问题是,我是否采用非常通用的概念,如上述或更具体的抽象涉及在一组特征中重复出现的模式,这些问题可能会对其他深奥的特征造成严重破坏,这些特征可能有更具体的解析步骤他们.我见过的每个Cucumber示例都有步骤定义文件,其文件名与特定的特征文件具有程序关系,我的假设是在这些情况下,只会调用该步骤定义文件来解析其相关功能中的场景:

+ features
| + step_definitions
| | + global_steps.rb
| | + modal_steps.rb
| | + login_steps.rb
| + modal.feature
| + login.feature

但事实并非如此 - 而且我正在努力让自己屈服于Cucumber尝试将每个步骤定义模式应用于每个场景的观念.如果这些测试具有任何优点,它们将会变得更多,引入新的概念,并保持相关性而不需要不断重写.我希望能够限制我的步骤范围,以阻止他们干扰他们没有编写的功能,但不知道如何.我想到了以下概念解决方案:

• 使用背景或方案@tags,仅对具有这些标记的方案调用步骤
• 在某种包装帮助器或元步骤定义中嵌套步骤定义,这是由给出的谬误背景调用的

我不熟悉Ruby和Cucumber似乎非常瘦,所以一方面我被无限的潜力所吓倒,另一方面没有预先确定的实现.有任何想法吗？

我正在构建一个Web应用程序,并计划使用speechRecognition和navigator.getUserMedia进行音频输入.

我注意到我的桌面浏览器(Mac上的Chrome,版本31.0.1650.63)要求两次获得使用麦克风的权限.虽然这对用户来说可能有点烦人,但语音识别和音频输入似乎都有效.

但是,如果我在Android(Nexus 7,Android v4.4.2; Chrome v31.0.1650.59)上打开同一页面,它会要求两次获得使用我的麦克风的权限,但我只能使用其中一个(无论哪个已开始)第一).有时,error: "not-allowed"即使我允许访问麦克风,我也会收到语音识别错误.

我做了一个jsFiddle,这里:http://jsfiddle.net/5xBpW/

我的问题是:有没有办法在输入流上执行语音识别？或者还有其他任何方法可以在Chrome for Android上使用这两种功能吗？

我正在使用一个空框架来处理伪异步表单提交。对于那些不熟悉该技术的人，其想法是name在表单的target属性中引用框架的属性，这样表单的URI 就会action在框架中解析，并且不会中断用户体验。

为了向用户反馈，我需要使用脚本来侦听表单上的load或error事件，并且因为这有效地使整个 UX 脚本依赖，所以我只注入框架并通过脚本添加表单的目标引用。

问题是框​​架会在注入页面后立即触发加载事件：默认行为。

我可以使用 jQuery 的one方法和e.stopImmediatePropagation()（这里）来缓解这个问题，或者我可以注入框架然后绑定事件（这里）。但是这两个选项都非常违反直觉——代码当然需要注释以避免看起来像一个错误。

TL;DR：有什么办法可以修改或限定 iframe 以阻止它首先在注入时触发错误的加载事件？

我试过的

1. 无src属性
2. src设置为about:blank（上面隐含的）
3. src 设置 #
4. src 设置 javascript:void 0
5. src 设置为空数据URI data:text/plain;base64,;
6. srcdoc 设置为空或接近空的字符串

\n
• 以下基于 Chrome 31 测试
\n
• TL;DR：为什么这个小提琴中的代码在尝试提交时有效，但在手动调用时却不起作用？有更好的方法吗？
\n

在回答一个要求验证其属性的方法的问题时<input type="file">accept（本机行为将与生成的文件对话框一起使用，默认情况下会显示一个过滤器，但它不是强制执行的），我想看看有哪些选项可以使用将此自定义验证集成到 HTML5 的脚本化约束验证中。

我最初对 API 的略读导致我覆盖了本机checkValidity方法，因为我相信只要浏览器认为适合验证代码（jsFiddle），就会默认调用该方法：

void function enhanceFileInputTypeValidityCheck(){\n    var inputPrototype      = document.createElement( \'input\' ).constructor.prototype;\n    var nativeCheckValidity = inputPrototype.checkValidity;\n\n    // This is my custom validation function\n    function validateFileInputType( input ){\n        var MIMEtype = new RegExp( input.accept.replace( \'*\', \'.\\*\' ) );\n\n        return Array.prototype.every.call( input.files, function passesAcceptedFormat( file ){\n            return MIMEtype.test( file.type );\n        } );\n …

我正在尝试使用Javascript来模拟CSS :target伪类,以便捕获导致页面上的元素被定位的所有事件.我已经确定了3个触发事件:

1. window.location.hash 已经在初始化时定位了相同ID的元素
2. 单击定位该元素的锚点
3. 该hashchange事件独立于上述情况被触发(例如通过window.historyAPI)

场景2作为一个独特的案例非常重要,因为我想要调用click事件preventDefault.此方案的简化代码如下:

$('body').on('click', 'a[href*=#]', function filterTarget(clickEvent){
    $(this.hash).trigger('target', [clickEvent]);
});

尝试实现方案3时出现问题:

$(window).on('hashchange', function filterTarget(hashChangeEvent){
    $(this.hash).trigger('target', [hashChangeEvent]);
});

如果target处理程序未取消方案2的本机行为,则在本机行为导致生成的hashchange事件时将再次触发它.如何过滤掉这些边缘情况？

后解编辑:

烘焙的答案持有密钥 - 处理命名空间的哈希转换事件,然后根据在单击处理程序及其preventDefault中处理的逻辑解除绑定并重新绑定处理程序.我在这里写了完整的插件.