Here comes the Sun » css

HTML5 Form in Opera 11

sunng — Wed, 12 Jan 2011 15:21:19 +0000

严格意义上我现在已经不能算是个web guy了，不过托Web开放的特性，咱也能评论一下。最近做个小的界面，考虑到要面向未来，HTML5又提供了丰富的表单增强。这些特性中，Firefox 3.6基本上还没有支持，Chromium 8.0有少部分支持，而真正支持比较完整的是Opera 11.

autofocus
页面载入后自动将焦点转到某个input，就如以前的onload时候xxx.focus()

required
指定某个input为必填，提交时会有validation，在Opera11里还会给你这样的警告并且禁止提交：

email / url
指定某个input的特殊类型，提交时也会有对应的格式检查：

这样的提示可能满足不了你的替用户着想的产品经理，但是你清楚他帮你省了多少事情。而且，在DiveInfoHtml5里提到，iphone甚至为这个input做了优化，在软件盘上把空格键变得很小（因为输入邮件地址用不着），并且提供了一个@键；这就是工程师的用户体验啊。

placeholder
在input里显示提示文本：

注意到后面的红色星号了吗。这本来是我设计的一个workaround，既然Firefox 3都还不支持required validation，那么我们通过CSS来显示一个必填的提示：

input[required="required"]:after {
content: '(*)';
color: #F00;
}

结果这个伪类最后只有在Opera里实现了预期的效果，看在Stackoverflow上的讨论才得知input的:after和:before伪类只有Opera支持。

HTML5 Form这部分是一个真正务实的标准，你可以看到几乎每一个特性都是我们日常每时每刻都需要，几乎每个网站的JS都要实现的功能。标准是沟通上下游（浏览器和应用开发人员）的契约，一个真正反应相互需求的标准才是有实际价值的。

Newly designed front page

sunng — Tue, 07 Sep 2010 13:05:54 +0000

The last version of my home page was initialized at 2008.9. After two years, the page is completely obsolete, some features were broken due to different reasons. (fanfou.com has been shutdown and twitter was banned).

So I just bring you this:

The page is extremely simple, without any JavaScript or image. Some CSS3 features have been applied to it, including gradient background, css border radius (also web font will be added when I find a suitable font).

The photo is taken at Expo, outside the Holland Pavilion.

A shorten url app

sunng — Wed, 30 Sep 2009 12:36:03 +0000

一不小心又是大概有一年多时间没有用过Django了。最近经常有之前部门的同事来讨论Django和Python Web开发，大概是他们用asp做的客服系统终于要换架构了。今天国庆提前放假，用了一个下午的时间重温一下。Django的Template还是相对弱一些，居然无法在template里调用model的方法。这样auth模块里判断用户登录的is_authticated()方法就不能在template里调，如此非得在view判断（Django是MTV模型，它的view即MVC里的controller），那如果是用generic_view，这个似乎就无解了？？

贴个图。体验一下Firefox3.5开始支持的@font-face，Webkit核心和Opera浏览器都支持这个功能。不过我Ubuntu上的Midori貌似遇到Mootools就直接崩溃，看来要等到gnome2.28里epiphany了。

忘了提了，域名是我yy的，之所以有这样的效果是修改了hosts

Gwibber and WebKit

sunng — Tue, 03 Mar 2009 10:07:29 +0000

Gwibber是一个用来接收流行的web2.0应用的消息的客户端。（靠，这句绝望了。）今天LinuxToy才刚刚介绍，不过我前几天就发现了，哦hohohoho。

Gwibber的架构很容易扩展，稍微看一看就清楚了，我就不描述了。正好饭否和twitter的接口是保持一致的，拷拷改改很容易就可以给Gwibber增加饭否的支持。如此一来就可以同时看饭否看twitter发饭否发twitter了。

你以为这是一张截图，其实它是分隔线。

注意上图，gwibber是一个简单的pyGtk程序加上Webkit，它的核心部分就是html网页。这个网页除了头像以外可是没有图片的，那几个效果是怎么实现的呢。一个一个说。

圆角 -webkit-border-radius: 7px;
文字阴影 text-shadow: 1px 1px black;
渐变 background: -webkit-gradient(linear, left top, left 220%, from(rgba(254, 240, 152, 0.9)), to(black));

比较神奇的就是这三个属性。所以也难怪现在用WebKit核心的程序（不完全是浏览器）越来越多。没有记错的话，这三个丰富特性除了text-shadow在Firefox3.1开始支持其他的Gecko都还不支持。

总而言之，用CSS就可以绘制出精致的图形，而且完全可以生长在桌面。