小编ann*_*.mi的帖子

我有一个具有相同名称属性的复选框列表,我需要验证其中至少有一个已被选中.

但是当我在所有这些属性上使用html5属性"required"时,浏览器(chrome&ff)不允许我提交表单,除非检查所有这些属性.

示例代码:

<label for="a-0">a-0</label>
<input type="checkbox" name="q-8" id="a-0" required />
<label for="a-1">a-1</label>
<input type="checkbox" name="q-8" id="a-1" required />
<label for="a-2">a-2</label>
<input type="checkbox" name="q-8" id="a-2" required />

当使用相同的无线电输入时,表单按预期工作(如果选择其中一个选项,表单验证)

根据Joe Hopfgartner(声称引用html5规范),假设的行为是:

对于复选框,只有在选中该表单中具有该名称的一个或多个复选框时,才能满足必需属性.

对于单选按钮,只有在检查该无线电组中的一个单选按钮时,才能满足所需属性.

我做错了什么,或者这是一个浏览器错误(在chrome和ff上)？

我正在开始一个相当大的项目,我正在考虑使用LESS来预处理我的CSS.

关于LESS的有用之处在于你可以定义一个包含例如的mixin:

.border-radius(@radius) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -o-border-radius: @radius;
    -ms-border-radius: @radius;
    border-radius: @radius;
}

然后在类声明中使用它作为

.rounded-div {
   .border-radius(10px);
}

获取输出css为:

.rounded-div {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

这对于浏览器前缀非常有用.但是,这个相同的概念可用于封装常用的css,例如:

.column-container {
    overflow: hidden;
    display: block;
    width: 100%;
}
.column(@width) {
    float: left;
    width: @width;
}

然后在我的设计中需要列时使用此mixin:

.my-column-outer {
    .column-container();
    background: red;
}
.my-column-inner {
    .column(50%);
    font-color: yellow;
}

(当然,使用预处理器我们可以很容易地将其扩展为更有用,例如,将列数和容器宽度作为变量传递,并且根据列数和容器宽度确定每列的宽度! )

这个问题是,在编译时,我的最终css文件将有100个这样的声明,复制和粘贴,使文件变得庞大,臃肿和重复.另一种方法是使用一个网格系统,它为每个列布局选项预定义了类,例如.c-50(带有"float:left; width:50%;"定义),.c-33 ,. c-25适用于2列,3列和4列布局,然后将这些类用于我的dom.

我真的不喜欢额外的类的想法,从经验到结果膨胀的dom(创建额外的div只是为了附加网格类).另外,html/css最基本的教程会告诉你dom应该与样式分开 - 网格类与样式相关!对我来说,就像将"border-radius-10"类附加到上面的.rounded-div示例一样!

另一方面,由重复代码产生的大型css文件也是一个缺点

所以我想我的问题是,你会推荐哪一个,你用哪个？

哪种解决方案最适合优化？除了更大的文件大小之外,是否有任何关于浏览器是否比大型css文件更快地渲染多个类的研究,或者反过来？

我很想听听你的意见!

我刚刚注意到浏览器处理css的方式不一致:右键单击元素时的活动状态(contextmenu click)

• Firefox ::激活不被触发
• Chrome ::暂时触发活动,直到发生mouseup
• Safari 5和IE 10 ::触发活动并且元素保持:活动状态,直到关闭上下文菜单

这是一个快速的混蛋来复制这个http://jsfiddle.net/annam/tqBqV/

div { background: red; }
div:active { background: green; }

谁知道哪个是正确的行为？我猜有没有办法标准化？

我有一个Jquery UI可排序,其中可排序框在其容器中居中使用margin: 0 auto.

我使用axis: 'y'sortable中的设置,这样盒子只能垂直移动.

排序时,拖动的框移动到容器的左侧

使用draggable with axis: y不会导致此问题,它似乎与可排序小部件有关.

我在这个jsfiddle中复制了这个bug.有任何想法吗？

我使用Hammer.js来检测移动设备上的触摸,点按,滑动等.

我有一个交互点,我可以隐藏被点击的内容(可能是父母)并在其位置显示一些其他内容(更改屏幕 - 类似功能).

问题在于新近可见的内容可能在它们上具有它们自己绑定的事件,或者可以在点击时本地交互(例如,标签切换复选框,文本输入被聚焦).如果在点击发生时隐藏/显示组件,则400ms单击事件仍在运行,然后在下面的元素上触发.

在手机上查看这个jsfiddle:

http://jsfiddle.net/annam/xGJZL/

http://jsfiddle.net/annam/xGJZL/embedded/result/

<div class="checkbox">
    <input type="checkbox" id="check" />
    <label for="check"></label>
</div>
<div class="box"></div>

<style>
.checkbox { width: 500px; height: 500px; position: absolute; top: 0; ; left: 0;  }
.checkbox input { display: none; }
.checkbox label { display: block; width: 100%; height: 100%; background: yellow; }
.checkbox input:checked + label { background: green; }
.box { position: absolute; top: 0; left: 0; width: 200px; height: 200px; background: pink; }
</style>

<script>
$('.box').hammer().on('tap', function(e){ $(this).hide(); …

我有一个由随机函数函数定义的css变量,我需要这个变量从列表中生成随机背景颜色,每次我进入页面:

@all-background-colors: "#7B8AA8,#00ADD5,#E93C43,#FC8383";
@background-color: color(~`@{all-background-colors}.split(',')[Math.floor(Math.random()*@{all-background-colors}.split(',').length)]`);

然而,似乎每次在我的css中使用此变量时都会执行该函数 - 导致在整个网页中使用许多不同的颜色.

是否有任何方法可以逃避这个并将变量转换为字符串后由函数定义？