分类 Web笔记 下的文章

[译]GoogleChrome开发者工具快捷键

开发者工具有一些内置的快捷键,可以帮助大家在日常工作中节省时间。下面是一些快捷方式已以及对应的快捷键(Windows/Linux/Mac),有一些快捷键是全局的,有一些是特定面板才有的。

打开开发者工具

在谷歌浏览器里面你可以使用以下的方式打开:

  • 浏览器右上角的菜单里面选择--更多工具--开发者工具
  • 在任何页面当中右击选择--审查元素
XWindows / LinuxMac
打开开发者工具F12, Ctrl + Shift + ICmd + Opt + I
在审查窗口和浏览窗口之间切换Ctrl + Shift + CCmd + Shift + C
打开开发者工具并且切换到控制台Ctrl + Shift + JCmd + Opt + J
审查审查器(需要先脱离浏览窗口)Ctrl + Shift + ICmd + Opt + I

当开发者工具窗口打开的时候,键入 ? or F1 打开常规设置; Esc 关闭设置对话框。

所有面板

- 阅读剩余部分 -

iOS下click事件不冒泡的解决

前几天遇到了,使用zepto的.on进行click事件委托的时候,当委托到document,发现只有目标元素为a才行,现象就是click事件不会冒泡到document。

当时由于没有设备,没有过多的测试,最近部门新添好多iOS设备啦~~~btw ,今天发现jQuery的文档里面居然提到了这一点。

On mobile iOS (iPhone, iPad and iPod Touch) the click event does not bubble to the document body for most elements and cannot be used with .live() without applying one of the following workarounds:

  1. Use natively clickable elements such as a or button, as both of these do bubble to document.
  2. Use .on() or .delegate() attached to an element below the level of document.body, since mobile iOS does bubble within the body.
  3. Apply the CSS style cursor:pointer to the element that needs to bubble clicks (or a parent including document.documentElement). Note however, this will disable copypaste on the element and cause it to be highlighted when touched.

简单翻译一下,就是

  1. 使用原生的支持click冒泡到document的元素,例如abutton
  2. 委托事件的时候,委托到body以下的元素上面
  3. 对目标元素使用CSS cursor:pointer, 或者应用于其父元素——包括html都行,不过会导致复制粘贴失效,而且点击时候高亮

- 阅读剩余部分 -

CSS 选择器之 > + ~

PS:标题没有乱码 :)

>选择器

div > a

选取父元素是 <div> 元素的每个 <a> 元素

父元素,就是其直接的上层元素

所以

<div>
    <p><a href="#">链接</a></p>
</div>

这样的<a>是不会被选中的。


+选择器

div + p

选择 <div> 元素之后紧跟的每个 <p> 元素

乍一听和上面的一样啊~

- 阅读剩余部分 -

[译]HTML5 全屏Full-Screen API,支持Chrome、FF、IE11

什么是Full-Screen API

这个API允许单个的元素全屏显示,和F11全屏不同,这个API用来展示某个容器里面的图片、视频等。

支持的浏览器

所有的最新浏览器,包括IE11呢。移动端的支持有限,不过没关系,反正移动端的浏览器都是近乎全屏了。

因为这个API还没有规范,所以很可能以后会有改变,同时,使用起来也少不了各种浏览器厂商的前缀了。


Javascript 部分的API

下面的例子中,想要全屏显示的是ID为myimage的图片。先来看一下几个相应的方法。

1. document.fullscreenEnabled

如果当前浏览器允许进入全屏模式,这个属性返回true,可用来检测浏览器是否支持全屏API

if (document.fullscreenEnabled) { ... }

- 阅读剩余部分 -

[译]关于Textarea那些小技巧

1. 使用图片作为textarea的背景,输入的时候消失

textarea和其他的普通元素一样,css加上一个背景即可,不过为了阅读性更好,需要在输入的时候隐藏,这个功能使用jQuery来完成即可。
CSS:

textarea {
  background: url(images/benice.png) center center no-repeat; /* This ruins default border */
  border: 1px solid #888; 
}

Javascript:

$('textarea')
  .focus(function() { $(this).css("background", "none") })
  .blur(function() {
          if ($(this)[0].value == '') {
             $(this).css("background", "url(images.png) 0 0 no-repeat")
          }
   });

2. 使用HTML5的placeholder属性来设置预设文本

HTML5 的forms元素引入了一个新的属性:placeholder。它为表单元素显示默认值提供了可能,在用户填写之前给出提示,填写时候消失。


- 阅读剩余部分 -