昨晚在玩博客的东西发现的一个问题，就是 Opera 10.5 默认的设置不了 input 和 textarea 的圆角：
input[type="text"], textarea { border-radius:5px;}
如上，如果我这么写，在 Opera 下是没有圆角效果的，而在 Chrome 下是有的，顺便测试了下 Firefox 和 Safari：
input[type="text"], textarea { border-radius:5px;/*Opera,Chrome*/ -moz-border-radius:5px;/*Firefox*/ -webkit-border-radius:5px;/*Safari*/}
默认情况下，Opera 和 Firefox 不会现出圆角效果，而 Chrome 和 Safari 可以，在 Opera 和 Firefox 下要想显示出圆角效果必须设置其 border-style(不能为 none)：
input[type="text"], textarea { border-radius:5px;/*Opera,Chrome*/ -moz-border-radius:5px;/*Firefox*/ -webkit-border-radius:5px;/*Safari*/ border-style:solid;}
或者直接设置其 width、style、color：
input[type="text"], textarea { border-radius:5px;/*Opera,Chrome*/ -moz-border-radius:5px;/*Firefox*/ -webkit-border-radius:5px;/*Safari*/ border:1px solid #ccc;}
之前在豆瓣上看到有人求这个效果，墨迹到现在才搞出来，简单的写了一下，目前的动画效果还不够满意，过几天还会继续调整，希望大家多提意见哈~
代码太长，不贴了哈，来这里看吧：http://code.google.com/p/opera-userjs/source/browse/trunk/userjs/operatouch.js
Opera 在本周二发布了 Opera 10.5 Pre-alpha，这个版本使用 Presto 2.5内核，并且采用了今年年初才宣布的试验品 — Carakan（JavaScript 引擎） 和 Vega （图形库），非常的令人兴废！之前以为 Presto 2.3的使用怎么也要等上个一年半载，直到 Opera Mobile 10 使用了 Presto 2.4，这个期望稍微提前了那么点，以为 Opera 下个版本一定会调过 Presto 2.3 使用 2.4 版本，结果这丫的直接搞上了 Presto 2.5，非常的令我惊讶，之前还在骂 Opera 不务正业，看来还是在默默的搞。Carakan 和 Vega 自年初宣布之后就再也没有动静了，我都以为这两个东东已经被扼杀在襁褓之中了，没想到这次竟然“生蛋”啦！非常的不错哈~关于 Carakan 的评测已经有很多了，相信大家都看到了，Presto 2.5 的相关文档还没有出，具体的支持尚不得知，但是目前已确定支持 background、border、box-shadow的所有属性，凭借 Vega 的优势，它们的展现非常的完美，Canvas、svg 我还没有测试，应该同样很完美，而且效率应该会有不小的提升，期待 10.5 的正式版本。
作为一个前端er，除了关注内核外，我最关注的还是调试工具，Opera 的调试工具 Dragonfly 一直被我鄙视，连IE的 Developer Tool 都不如，另外两个 DOM snapshot 和 Develop Console 当然也不尽人意。可喜的是，在 10.5 版本里，Dragonfly 有了比较大的改进，目前尚不清楚这一版本用的 Dragonfly 是什么版本，在 config 中也修改不了 Dragonfly 的引用地址，杯具呀。。。估计应该是一个比较稳定的版本，应该是正常的版本，只是在 Opera 10.5 中的表现不一样吧。下面是新版的一些改进：
继续阅读 »
刚在论坛上看到有人要Opera的搜狗云输入法，花了一点点时间写了下，分享出来。这个脚本会在页面加载后在页面上的可输入区域（input、textarea）注册加载事件。
Code:
/**
* 搜狗云输入法
* @url *
* @description 在页面的input、textarea等可点击区域开启搜狗云输入法
*/
document.addEventListener(
'DOMContentLoaded',
function() {
var arr = [],
inputs = document.getElementsByTagName('input'),
textareas = document.getElementsByTagName('textarea');
if(inputs.length == 0 && textareas.length == 0) return;
//合并数组
for(var i=0,j=Math.max(inputs.length,textareas.length); i<j; i++) {
inputs[i] && arr.push(inputs[i]);
textareas[i] && arr.push(textareas[i]);
}
//加载输入法
for(var k=0; k<arr.length; k++) {
arr[k].addEventListener(
'focus',
function(e) {
var target = e.target;
if(document.getElementById('SG_Shurufa') || (target.tagName.toLowerCase() == 'input' && target.type != 'text')) return;
var script = document.createElement('script');
script.setAttribute('src','http://web.pinyin.sogou.com/web_ime/init_web.php');
script.id = 'SG_Shurufa';
document.body.appendChild(script);
},false
);
}
},false
);
再次推荐一下管理UserJs的Unite应用，你可以把它添加到面板上，方便易用：去看看。。。
经常去看网页的科技、娱乐、新闻频道，对它二级菜单新窗口打开无比的鄙视，所以自己动手改了下，其它类似频道可能也适合，没有测试~
Code:
/**
* 163二级频道
* @url http://*.163.com
* @description 163二级频道的频道内导航条优化，将在新窗口打开更改为本窗口打开，适用频道：科技、娱乐、新闻，可能其它类似频道也适用
*/
if(location.hostname.indexOf('.163.com') != -1 && location.hostname.indexOf('www.163.com') == -1) {
document.addEventListener(
'DOMContentLoaded',
function() {
var el = document.getElementsByClassName('nav');
for(var i=0;i<el.length;i++) {
if(el[i].parentNode.className == 'nav_channel') {
el[i].addEventListener(
'click',
function(e) {
var target = e.target;
if(target.tagName.toLowerCase() == 'a') {
e.preventDefault();
window.location.href = target.href;
}
},false
);
break;
}
}
},false
);
}
首先是首页的广告屏蔽更新，加了一段新的脚本：
/**
* 淘宝首页
* @url http://www.taobao.com
* @description 屏蔽淘宝首页弹出广告
*/
if( location.hostname.indexOf('www.taobao.com') != -1 ) {
//阻止广告加载
window.opera.addEventListener(
'BeforeEventListener.load',
function (e) {
if(e.listener.toString().indexOf('function(){q._showAds()}') != -1) {
e.preventDefault();
return;
}
}, false
);
//屏蔽弹出窗口
window.opera.addEventListener(
'BeforeEventListener.click',
function (e) {
if(e.listener.toString().indexOf('function(D){return o.call(z,YAHOO.util.Event.getEvent(D,y),u)}') != -1) {
e.preventDefault();
return;
}
}, false
);
//屏蔽右下角新人欢迎窗口
window.opera.addEventListener(
'BeforeExternalScript',
function (e) {
if(e.element.src.indexOf('wizard.js') != -1) {
e.preventDefault();
return;
}
}, false
);
}
然后是淘宝的登录页，未安装插件的话会造成浏览器假死，之前的一个修复方案造成淘江湖的登录页面失去了密码框，这里做下修正，并优化了一下，如果进入的是非标准登录页面跳转到标准登录页面，并移除登录切换的tab，如果你已经安装了插件可以不是用这段脚本：
/**
* 淘宝登录页
* @url http://member1.taobao.com/member/login.jhtml,http://login.taobao.com/member/login.jhtml,https://login.taobao.com/member/login.jhtml
* @description 防止未装支付宝插件的用户在登录页面卡死，禁掉插件检测，请使用标准登录
* 1.用户需要设置opera:config#User Prefs中的User JavaScript on HTTPS为允许(请谨慎使用！);
* 2.如果非标准登录状态，直接跳转到标准登录页面；
* 3.用户可以使用站点首选项里的禁止插件来做到同样的效果。
*/
if(location.hostname.indexOf('member1.taobao.com') != -1 || location.hostname.indexOf('login.taobao.com') != -1) {
//去除object
window.opera.addEventListener(
'BeforeScript',
function(e) {
var _s = e.element;
if(!_s.src && _s.text.indexOf('window.ActiveXObject') != -1) {
var img = document.getElementById('J_InstallPlugin');
if(img) {
_s.text = '';
var ul = document.getElementById('J_LoginTabs'),
href = ul.getElementsByTagName('a')[0].href;
window.location.href != href && (window.location.href = href);
ul.parentNode.removeChild(ul);
} else {
_s.text = 'document.write(\'<label for="TMP_password">密 码：</label><input type="password" tabindex="3" maxlength="20" id="TMP_password" name="TMP_password" />\')';
}
}
},false
);
}
如果你是一个藕粉，并且愿意和大家一起分享你的Userjs&Usercss，可以和我一起去维护这个开源项目，大家都可以从这里直接更新到最新的Userjs：http://code.google.com/p/gorgeous-ruler/。
另外推荐使用一个Opera Unite应用管理Userjs：UJS Manager。
Ruler版本升级至2.0版本，主要改进的就是背景的问题。在1.0版本里使用的一个透明的背景图片，再加上用户输入的一个背景色来控制背景的显示，这个局限性比较大，为了让用户可以更好的自定义皮肤，所以这里做了重点改进，其实功能上没什么问题，主要就是使用上的改进。
2.0改进的一些地方及功能：
- 背景使用canvas绘制，支持用户自定义渐变，包括开始颜色、透明度、结束颜色、透明度以及渐变的长度；
- 左侧/上侧使用圆角展示；
- 改变方向时，以操作的几个icon为圆心，仅尺子动，而操作按钮不跟随跳动；
- 最大最小化使用动画；
- 最小化后，不在初始化尺子位置，亦不再更换图片，仅将最小化icon和最大化icon做替换；
- 当鼠标移至边缘时，刻度始终显示在尺子内，避免显示在外侧被遮挡；
- JS、CSS文件做了优化；
- 更换了icon图标；
下载安装：http://widgets.opera.com/widget/14151/2.0/
源码下载：http://code.google.com/p/gorgeous-ruler/downloads/list
小结：
在用canvas去绘制背景的时候，纠结了一点，就是在尺子进行旋转的时候，采用什么方式？最初想着是是使用drawImage的rotate进行旋转，不过后来发现这个东东存在一些缺陷，而且感觉其实效率并不是很高，而本身这个canvas仅仅是绘制了一个圆弧和一个方框，我完全可以直接重绘，性能并不差，而且省去了诸多麻烦，最终还是选择了重绘。
对未安装支付宝插件的用户，在访问淘宝登录页面时会出现假死的情况，这是由于插件检测的问题，这里提供屏蔽插件检测的userjs，以便Opera用户可以正常访问、登录。
UserJs Code:
/**
* 淘宝登录页
* @url http://member1.taobao.com/member/login.jhtml,http://login.taobao.com/member/login.jhtml,https://login.taobao.com/member/login.jhtml
* @description 防止未装支付宝插件的用户在登录页面卡死，禁掉插件检测，请使用标准登录
* 1.用户需要设置opera:config#User Prefs中的User JavaScript on HTTPS为允许(请谨慎使用！);
* 2.用户可以使用站点首选项里的禁止插件来做到同样的效果。
*/
if(location.hostname.indexOf('member1.taobao.com') != -1 || location.hostname.indexOf('login.taobao.com') != -1) {
window.opera.addEventListener(
'BeforeScript',
function(e) {
var _s = e.element;
!_s.src && _s.text.indexOf('window.ActiveXObject') != -1 && (_s.text = '');
},false
);
}
之前会用@media all and (min-width:0) {}作为Opera、Safari等的hack使用，不知道Firefox从什么版本开始已经也支持了，反正这个是不能用啦，今天用的时候才发现，土鳖一下。。。
目前只认Opera的hack就剩下了：@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) { …. }，但是这个很明显太长了。。。估计没多少人能记住，也没多少人喜欢用。今天做页面的时候发现了通过使用@media all and () {}，只有Opera会认，其它浏览器不认，但是有一点需要注意的是，如果你确定要使用这个hack，必须要在样式表的末尾去用，因为在Firefox下，会将这段之后的所有样式忽略，其它浏览器不会。（类似的@media screen and () {}也一样的）
Demo地址：仅Opera能显示绿色背景 仅Firefox不能显示红色背景
测试浏览器版本：IE6、7、8、Opera 10.10 Build1840、Firefox 3.5.3、Safari 4.0.3、Google Chrome 3.0。
Opera的widgets我用的最多的就是ruler那个东东了，但是总是感觉它有一些不方便，一来不能最小化，只能关闭或者随便拉到一个角落里去，二来不支持我自定义颜色、透明度，它本身的配色并不怎么好看，所以就想自己搞一个。其实上个月就在写了，不过写了一半就不写了。昨天搞了一下，完成了这个widget，并发布了，分享给大家，希望大家能够喜欢哈！~
Gorgeous Ruler 安装：http://widgets.opera.com/widget/download/14151/
请用Opera浏览器打开直接安装，使用Opera 10.10 Build1840 以下版本的会直接安装到饰件（Widgets）中，1840版本的会提示进行安装。
目前版本支持以下几方面：
- 支持背景颜色更换，支持透明度修改；
- 记忆设置，关闭重打开时会使用上次配置的背景色以及透明度；
- 透明度设置为0时会强制转化为1；
- 可以通过键盘的方向键移动，前提是尺子必须在选中状态；
- 可以最小化，可以将最小化的尺子移到任何位置暂放；
- 水平、垂直可以随意切换；
- 目前尺子宽度、高度与电脑屏幕分辨率保持一致。
源码下载：http://code.google.com/p/gorgeous-ruler/downloads/list
2009.10.20 v1.1版本更新：修改icon.png名字为operate_icon.png，因为在Opera 10.10Build1840版本内生成独立widget时会生成一个名为icon.png的icon，将原来的图片覆盖，造成其它icon无法正常显示。
