我现在还很早,但我也知道你们都是最重要的.
我想使用HTML5详细信息元素:
<details>
<summary>What's the HTML5 details element?</summary>
<p>The details element represents a disclosure widget from which the user can obtain additional information or controls.</p>
</details>
在撰写本文时,Chrome 12 beta是实际提供详细信息元素功能的唯一浏览器(点击摘要切换详细信息内容).因此,要回答以下问题,您可能希望使用该浏览器.
您是否知道如何隐藏Chrome中详细信息元素上默认显示的箭头？
它有点像<input type="search" />Webkit中的默认样式(请参阅http://css-tricks.com/webkit-html5-search-inputs/).你可以改变它但不是那么明显.
编辑
尝试了以下CSS代码但没有成功:
details,
details summary {
padding-left:0;
background-image:none;
-webkit-appearance:none;
}
可能我们需要用一些奇怪的伪选择器来定位它,details::-webkit-details-disclosure-widget或者目前根本没有办法改变它.
此外,我在规范中发现了这一点:
第一个容器应该包含至少一个行框,并且该行框应该包含一个公开小部件(通常是一个三角形),水平放置在details元素的左边框内.该小部件应允许用户请求显示或隐藏详细信息.
我想让Jekyll运行但我没有使用Ruby的经验.
据我所知,Jekyll的安装成功了.
然而:
$ jekyll
给出错误:
-bash: jekyll: command not found
这是gem env结果:
- RUBYGEMS VERSION: 1.3.4
- RUBY VERSION: 1.8.7 (2010-01-10 patchlevel 249) [universal-darwin10.0]
- INSTALLATION DIRECTORY: /Volumes/HDD/DADU/gems
- RUBY EXECUTABLE: /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/bin/ruby
- EXECUTABLE DIRECTORY: /Volumes/HDD/DADU/gems/bin
- RUBYGEMS PLATFORMS:
- ruby
- universal-darwin-10
- GEM PATHS:
- /Volumes/HDD/DADU/gems
- /Volumes/HDD/DADU/.gem/ruby/1.8
- /Library/Ruby/Gems/1.8
- /System/Library/Frameworks/Ruby.framework/Versions/1.8/usr/lib/ruby/gems/1.8
- GEM CONFIGURATION:
- :update_sources => true
- :verbose => true
- :benchmark => false
- :backtrace => false
- :bulk_threshold …Modernizr很棒但是示例测试position: fixed非常不完整:
true,但不支持position: fixedfalse,同时它支持position: fixed我发现了另一个基于Modernizr测试的测试,但添加了iOS检测:https://gist.github.com/855078/109ded4b4dab65048a1e7b4f4bd94c93cebb26b8.由于即将推出的iOS 5确实支持,它并不是真正的未来证据position: fixed.
在没有浏览器嗅探的情况下,你们能帮我找到一种方法来测试在iOS中修复的位置吗？
// Test for position:fixed support
Modernizr.addTest('positionfixed', function () {
var test = document.createElement('div'),
control = test.cloneNode(false),
fake = false,
root = document.body || (function () {
fake = true;
return document.documentElement.appendChild(document.createElement('body'));
}());
var oldCssText = root.style.cssText;
root.style.cssText = 'padding:0;margin:0';
test.style.cssText = 'position:fixed;top:42px';
root.appendChild(test);
root.appendChild(control);
var ret = test.offsetTop !== control.offsetTop;
root.removeChild(test);
root.removeChild(control);
root.style.cssText = oldCssText; …CSS3过渡,变换和动画都很精彩.现在更多的浏览器支持它们.
还有一件事我一直在问自己:为什么规范不确定CSS3过渡和动画应该处理高度:自动？
当我们使用CSS3灵活的盒子模型和媒体查询之类的东西摆脱固定布局时,它没有任何意义.
使用JavaScript只是为了设置具有固定高度的CSS转换没有任何意义.
现在我的问题是:
W3C是否会指定高度:自动应支持CSS3过渡和动画,还是我们可以请求它们指定这个？
我使用以下代码将字符串解析为DOM:
var doc new DOMParser().parseFromString(string, 'text/xml');
string只是在哪里<!DOCTYPE html><html><head></head><body>content</body></html>.
typeof doc给了我object.如果我这样做,doc.querySelector('body')我会得到一个DOM对象.但是,如果我尝试访问任何属性,就像你通常可以,它给了我undefined:
doc.querySelector('body').innerHTML; // undefined
其他属性也是如此,例如id.另一方面,属性检索很顺利doc.querySelector('body').getAttribute('id');.
是否有魔术功能可以访问这些属性？
是否有jQuery插件或JavaScript脚本自动循环每个CSS悬停(在外部样式表中找到)并将其与双触地事件绑定？
如果还没有这样的东西,它可以制作和如何(指导方针)？
编辑:
要清楚,我不是在寻找双击.触地1是一个单独的标签,就像Touchdown 2一样.在两者之间或多达3分钟之间可以有少至0秒,这是用户的选择.
不要触碰:
触摸(iOS):
当我遇到这一行时浏览jQuery源代码:
jQuery(this)[ state ? "show" : "hide" ]();
有没有任何优势
state ? jQuery(this).show() : jQuery(this).hide();
？
独立示例:
var object = {
foo: function() {
alert('foo');
},
bar: function() {
alert('bar');
}
};
object[true ? 'foo' : 'bar']();
object[false ? 'foo' : 'bar']();
考虑这个CSS:
[data-color="red"] h1 {
background-color:red;
}
[data-color="blue"] h1 {
background-color:blue;
}
这个HTML:
<div data-color="red">
<h1>red</h1>
</div>
<div data-color="blue">
<h1>blue</h1>
</div>
<div data-color="blue">
<h1>blue</h1>
</div>
现在看一下Webkit和任何其他浏览器中上面代码的以下演示:http:
//jsfiddle.net/aUCkn/
奇怪的是,如果你把每个h1放在同一条线上,即:
<div data-color="red"><h1>red</h1>
</div>
<div data-color="blue"><h1>blue</h1>
</div>
<div data-color="blue"><h1>blue</h1>
</div>
它也适用于Webkit:http:
//jsfiddle.net/aUCkn/1/
有谁知道它来自哪里？我做错了什么或者Webkit在这里愚蠢吗？
假设您正在构建一个名为Awesome Widget的概念窗口小部件,并且您希望完全保护它不会与作为窗口小部件内容作为内容的周围元素或子元素冲突.
我们不想要的
div ul li {}
解决方案1:CSS子组合器
使用CSS子组合子选择器指定只应针对直接子项.
.awesomewidget > div > ul > li {}
解决方案2:类命名空间
使用aw(Awesome Widget)作为每个类的命名空间,使用精确的命名空间+ classname减少页面上任何其他元素的可能性.
.awesomewidget .aw-container .aw-list .aw-listitem {}
在CSS中也有类似@namespace的东西,但这只适用于XML.
除了解决方案1和2,还有其他可以使用的解决方案吗？你更喜欢哪一个？任何最佳做法？
编辑:没有适当的命名空间/样式冲突预防而出现的问题示例
小部件样式:
.awesomewidget > div ul li {
background-color:red;
}
用户造型:
ul li {
background-color:blue;
}
标记:
<div class="awesomewidget">
<div>
<ul>
<li>
<!-- user content starts here -->
<p>I am the user and I want to add some content here. Let's add a list:</p>
<ul>
<li>Why is this list-item red and not …在桌面浏览器(JSFiddle)中查看以下测试:
a {
background: gray;
display: block;
margin: 100px;
padding: 100px;
}
a span {
opacity: 0;
-webkit-transition: 0.5s;
visibility: hidden;
}
a:hover span {
opacity: 1;
-webkit-transition: 0.5s;
visibility: visible;
}<a href="#">a <span>span</span></a>您将鼠标悬停在锚元素上,并且span元素会像它应该的那样淡入.
现在来看看iOS设备.结果:它什么都不做.
事实:
有没有解决方法？