SublimeText3突然无法通过快捷键F12预览页面

最近我的sublime text 3突然无法用F12预览正在制作的页面了.相反,倒是成了提示” unable to find xxx”,还真是奇怪,当然本身这是用的一个侧边栏插件SideBarEnhancements,但是好好的插件,为什么无缘无故的快捷键就坏了呢.

最近我的sublime text 3突然无法用F12预览正在制作的页面了.相反,倒是成了提示” unable to find xxx”,还真是奇怪,当然本身这是用的一个侧边栏插件SideBarEnhancements,但是好好的插件,为什么无缘无故的快捷键就坏了呢.不过最近似乎每次启动sublime text的时候,都有更新什么插件,于是就想到本来已装的插件SideBarEnhancements的设置,可是初看又看不出来什么名堂.于是只好去看看是不是插件更新了什么.

找到插件主页,看到了大大的F12 key的说明片段:

(Please note that from version 2.122104 this package no longers provides the key , you need to manually add it to your sublime-keymap file (see next section))

这句话说的很清楚了.但是我就想作为全局使用的快捷键,毕竟养成的习惯不易更改嘛…继续向下看,找到F12 key conflict, 官方也有说明啦:

On Sublime Text 3 F12 key is bound to "goto_definition" command by default. This package was conflicting with that key, this no longers happens. You need to manually add the keys now: Go to Preferences -> Package Settings -> Side Bar -> Key Bindings - User and add any of the following:

[
    { "keys": ["f12"],
    "command": "side_bar_open_in_browser" ,
    "args":{"paths":[], "type":"testing", "browser":""}
    },
    { "keys": ["alt+f12"],
    "command": "side_bar_open_in_browser",
    "args":{"paths":[], "type":"production", "browser":""}
    },
    {
    "keys": ["ctrl+t"],
    "command": "side_bar_new_file2"
    },
    {
    "keys": ["f2"],
    "command": "side_bar_rename"
    },
]

其实很简单,将上面内容复制到

SideBarEnhancements_keybindings_user — 用户自定义键位绑定

保存就行了,如果想要鱼和熊掌兼得的朋友,就请自行设置成其他快捷键咯.

另外奉献两个参考地址:

SideBarEnhancements

Sublime 3 – Set Key map for function Goto Definition

PS: 注意官方提供的修改方案,设置了F2的快捷键,覆盖了之前的定位功能,如果不需要这个重命名文件功能请自行删除(2014年11月28日)

是时候总结一下常用css选择器(包含CSS3)

发觉CSS选择器用的实在是太平凡了…一直犹豫国内大量使用IE,致使很多初级前端开发人员对于很多CSS3的选择器比较陌生,这里我参考各方的文档及相关经验来总结一下CSS选择器的相关知识.

CSS 2.1 选择器:

通配符选择器

匹配任意元素,不建议使用,除非做DEMO测试之类

类型选择符

一般来说就是常用的html标签 (div , p , a)

后代选择符

选择所有被XX包含的xxx (div a , ul li)

子代选择符

选择XX元素子级第一级的元素xxx,切记是第一级 (div > p)

相邻选择符

同级两个元素中第二个元素生效比如: XX和xx同级且相邻,那么XX + xx中的xx样式生效,看糊涂了吗哈哈哈(h1 + p)

继续阅读“是时候总结一下常用css选择器(包含CSS3)”

元素到网页顶部距离计算方法

前阵子做一个项目,做到了一个效果,关于一个导航条跟随屏幕滚动保持在页面顶端的效果,其中有一部分js需要计算导航条距离网页顶部值,当时想不出好的解决方案,根据特定的页面结构写了个不是很好的方法,然而不能适应各种情况,因此今天就研究了一下.

先来看看这个来着作者lisatisfy的方法:

function getAbsPoint(e) {
    //再封装个函数吧。传进来的e可以是字符串类型（即id）,也可以是htmlElement对象。觉得getEL是个累赘的话，就把它删除掉。
    e = getEL(e);
    var x = e.offsetLeft;
    var y = e.offsetTop;
    while (e = e.offsetParent) {
    x += e.offsetLeft;
    y += e.offsetTop;
    }
    return {
    "x": x,
    "y": y
    };
}
//使用getEL，不用$，避免冲突。
function getEL(id) {
    if (typeif == "undefined") {
    return null;
    }
    if (typeof id == "string") {
    return document.getElementById(id);
    }
    return id;
}

这个的确不错,但是有一些缺陷.我也给作者留言了.并指出了可能出现的问题(当父级多个为相对定位时计算会出现问题,,,以及元素本身的边框值无法计算进去).不过思路是很好的,通过计算与父级层的距离不断计算叠加高度获取最终值.我的表达可能不够清晰,建议自己用这个js写个demo测试.

继续阅读“元素到网页顶部距离计算方法”

通过CSS3制作页面折角箭头的方法总结

最近在做wap方面工作,对html5和css3的相关知识又学习了些许,近期对于这种箭头” > “的CSS3制作方法进行了简单的总结,如果以后有想到其他更好的,也会不间断更新.闲话少说,直接上代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css3 arrow test demo by whidy</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<style type="text/css">
body {font-family:"Microsoft YaHei";}
h3 {line-height:2;border-bottom:1px dashed #aaa;}
.updated-time {font-size:14px;color:#999;}
i {font-style:normal;}
div {position:relative;}
div p {padding-top:50px;}
.arrow-1::after {-webkit-transform:rotate(45deg);border-color:#666;border-width:1px 1px 0 0;height:8px;left:0px;top:0px;width:8px;border-image:none;border-style:solid;content:" ";position:absolute;}
.arrow-2 {display:inline-block;position:relative;vertical-align:top;}
.arrow-2::before,.arrow-2::after {content:"";font-size:0;width:0;height:0;line-height:0;overflow:hidden;display:inline-block;position:absolute;top:0;border:0 dashed transparent;border-left-style:solid;border-width:7px;}
.arrow-2::before {border-left-color:#666;left:0;}
.arrow-2::after {border-left-color:#fff;left:-2px;}
.arrow-3 {-webkit-transform:rotate(45deg);width:12px;height:12px;-webkit-box-shadow:2px -2px 0px -1px #000;background-color:#fff;display:block;}
.arrow-4 {font-family:-webkit-pictograph;transform:scale(1,2);display:block;}
.arrow-5 {-webkit-transform:rotate(-90deg) scale(1,0.5);font-family:cursive;font-size:24px;display:inline-block;}
</style>
</head>
<body>
<h3>这是一个通过CSS3各种方式来测试箭头的DEMO</h3>
<div>
    <i class="arrow-1"></i>
    <p>通过写上边框和右边框形成的角度进行旋转,代码简单</p>
</div>

<div>
    <i class="arrow-2"></i>
    <p>通过两个三角形叠加形成一个箭头,代码较多,需考虑背景色</p>
</div>

<div>
    <i class="arrow-3"></i>
    <p>通过旋转一个白色正方形,并给他阴影产生的效果(似乎android 2.x不支持模糊距离为0的情况.所以虽然效果也不错,不过依情况适用)</p>
</div>

<div>
    <i class="arrow-4"> > </i>
    <p>通过字体设置为<em>-webkit-pictograph</em>并进行缩放产生的效果,兼容性较差</p>
</div>

<div>
    <i class="arrow-5">V</i>
    <p><del>这个实际上也是通过字体(cursive)控制,字母V通过旋转和变形,我觉得可能不好用,适合卡通版箭头吧...</del>(有的移动端没这个字体或浏览器支持不好,PC端兼容性较差 2014年10月22日)</p>
</div>

<p class="notes">参考网站:<strong>http://www.w3cplus.com/content/css3-transform</strong></p>
<p class="updated-time">更新日期:2014年10月31日</p>
</body>
</html>

上面也对各种制作方法进行了简单说明,大家也可以打开查看DEMO页面

Side​Bar​Enhancements