Plux.log ++

对 <base>标签的设计评论

今天又把上次改的东西重新改了一遍，因为相信世界是美好的。别人总是用比较好的思路来进行框架的设计。但事实上，理想是美好，现实是残酷的。

就像 <base> 标签的设置。

本来客户端的事情，应该交给客户端来处理。发送请求到服务器，是客户端的事情，而关于请求的地址，是客户端的事情。如果服务器不告诉客户端必须有某一个地址，那么客户端应该用他认为正确的地址与服务器进行通信。

如果，地址只是服务器的唯一标识，那么，由客户端或者服务器端处理都一样。但是，一个服务器确实可以处理多个不同的站点，称之为虚拟地址。于是，地址不在是唯一标识了。

而，本来应该设置为定义整个站点的链接基础前缀，却没有遵循这个规则。标签必须指明通信的地址，不能依靠客户端推断。只是近期到了 HTML 5 以后，才出现一些转折，支持相对路径（也就是客户端推断地址）。

实际上，这个也许就是当初设计的时候考虑不周的后果吧。

大概因为当时没考虑到，到底会有多少种地址存在。

现在想想，其实真正的地址大概有 3 种吧。因为地址的构成实际上是三部分，主机、端口、主机上地址。但是单凭主机和端口，实际上只能确定一个地址，就是根地址，这个地址不具有扩展性，而且是绝对地址的一个子集，所以，不在考虑之内；而地址实际上有 2 种，一种是相对路径和绝对路径，实际上，是分别以当前路径和根路径为标准的两种地址表示方式；那么，而相对路径和绝对路径都必须以来主机和端口。但是如果没有给出主机端口的时候，客户端可以推断是当前的主机和端口，于是，实际上形成了 3 种地址方式。

绝对资源地址：主机、端口、绝对地址
绝对地址：只含有绝对地址（推断主机、端口为当前的主机、端口）
相对地址：相对当前的地址（推断主机、端口为当前的主机、端口，并且，相对与当前的地址）

但是，标签的设计却只考虑了第一种，而实际上，后两种也很常见。

或者 HTML 定制之初的 90 年代，当时简单的应用，就想到一个地址对应一个应用程序吧。但明显，Java 系的 ContextPath 已经突破了这个。现在大数据时代的到来，服务器平衡等早已经把服务器端做得越来越复杂，但是用户看起来却越来越简单……

新的一篇以及改进的主题

终于决定把博客迁到这里了。小玖似乎也不在百度空间了，而人人上压力巨大，大多数博客系统基本上不适合写代码……

昨天晚上把自定义 CSS 玩了一把。发现这里的自定义 CSS 挺好的，主题的 HTML 结构也很好（比百度空间的标准一点吧），附有多种主题作为基础选择。相对于以前的百度空间也算是一个进步。不过有些特效还是依赖 jQuery 等库才可以玩， CSS 3 的动画目前似乎只有gecko和webkit支持，opera也不支持（但我没有测试过，据W3schools.com的测试了解到的）。

主题主要修改部分：

把 header 部分改为导航栏在上，然后用 position: fixed; 固定。考虑到 IE 可能不支持，我尝试删掉 position 属性定义，效果还可以，起码不会太乱。
这样做的好处是看文章的时候总是可以见到导航栏，真正发挥导航的作用（呵呵，一家之言罢了）
header 上部分 float 的内容改用 position: absolute; 来替换。
header 部分圆角边框和其他一些地方的圆角微调。
改进了原来 #wrapper 控制的主内容区的排版方式。采用 margin-right 属性固定留空 #sidebar 区域，然后把 #sidebar 的 position 属性设置为 absolute ，当然，这样一来，为了排版，一些父元素的 position 也改成了 relative 。取消了原来的 float 和 width 固定页宽的排版方式。
这个改进的好处是页面会随着屏幕的宽度而改变。尽可能不浪费横向空间的同时，也保留了版式的完整。但在小屏幕上，我承认这样的设计会有问题。但小屏幕的时候，浏览器应该不会过多地考虑 position 等定义吧（尽可能利用纵向空间）
一些动画的改进。仅仅对Webkit和Gecko较新的内核上测试过。IE 肯定不支持的。看看 IE 10 吧。模拟了部分以往需要 jQuery 才能达到的动画效果。
底部 footer 配合样式把宽度设为 100% 了。

基本上也就是这样了。有些细节可能没写出来，毕竟也很难完全写出来。参看我的 CSS 代码吧。:-)

#coldblue .inner {
  position: relative;
  margin: auto 20ex;
  width: auto;
}

#coldblue #search {
  position: fixed;
  top: 0;
  z-index: 100;
}

#coldblue #header {
  width: auto;
  margin: 50px 20ex 0;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

#coldblue #header .inner {
  margin: 0 1ex;
}

#coldblue #header #navigation {
  float: none;
  top: auto;
  width: auto;
  position: absolute;
  right: 1ex;
  bottom: 1em;
}

#coldblue img[alt='Avatar'] {
  box-shadow: 0px 0px 10px #333;
}

#coldblue #head ~ h2, #coldblue #head ~ #chito_search {
  display: none;
}

#coldblue #chito_search ~ h2 {
  display: block;
}

#coldblue #chito_search + h2 {
  display: none;
}

@-moz-keyframes colorFadeAnimation {
  0% { color: white; }
  40% { color: yellow; }
  60% { color: yellow; }
  100% { color: white; }
}

@-webkit-keyframes colorFadeAnimation {
  0% { color: white; }
  40% { color: yellow; }
  60% { color: yellow; }
  100% { color: white; }
}

@keyframes colorFadeAnimation {
  0% { color: white; }
  40% { color: yellow; }
  60% { color: yellow; }
  100% { color: white; }
}

#coldblue #search a {
  color: white;
}

#coldblue #search .current_page_item a {
  text-shadow: 0px 0px 10px white;
  color: green;
}

#coldblue #search a:hover {
  -moz-animation:colorFadeAnimation 5s infinite;
  -moz-animation-play-state: running;
  -webkit-animation: colorFadeAnimation 5s infinite;
  -webkit-animation-play-state: running;
  animation: colorFadeAnimation 5s infinite;
  animation-play-state: running;
  color： yellow;
  text-shadow: 0px 0px 10px white;
}

#coldblue #wrapper {
  background-image: none;
  width: auto;
  margin: auto 20ex;
  position: relative;
  border-width: 0px;
}

#coldblue #wrapper #content {
  width: auto;
  margin-right: 270px;
  float: none;
}

#coldblue .post-title h3 {
  text-align: right;
}

#coldblue .post-p {
  padding: 0.3em;
  background-color: #aaa;
  border-radius: 0.2em;
}

@-moz-keyframes backgroundFade1 {
  0% { background-color: black; }
  50% { background-color: #888; }
  100% { background-color: black; }
}

@-webkit-keyframes backgroundFade1 {
  0% { background-color: black; }
  50% { background-color: #888; }
  100% { background-color: black; }
}

@keyframes backgroundFade1 {
  0% { background-color: black; }
  50% { background-color: #888; }
  100% { background-color: black; }
}

#coldblue .post-p a {
  padding: 0.1em;
  border-radius: 0.3em;
}

#coldblue .post-p a:hover {
  -moz-animation: backgroundFade1 4s infinite;
  -moz-animation-play-state: running;
  -webkit-animation: backgroundFade1 4s infinite;
  -webkit-animation-play-state: running;
  animation: backgroundFade1 4s infinite;
  animation-play-state: running;
  background-color: #888;
}

#coldblue #wrapper #sidebar {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #ccc;
  border-bottom-left-radius: 15px;
}

#coldblue #footer {
  text-align: center;
  width: auto;
  margin: 0;
}

[HTML DOM]全局按键事件

最近在建设着自己的网站的时候，想学学Javascript的按键事件，遇到很奇怪的问题：

// JavaScript Document
function move(event) {
     var obj = document.getElementById('sprite');
     if(event.keyCode == 37) { //left
         obj.style.left = parseInt(obj.style.left) - 5 + 'px';
     }
     if(event.keyCode == 39) { //right
         obj.style.left = parseInt(obj.style.left) + 5 + 'px';
     }
     alert(event);
}

 window.onload = function() {
     var x = document.createElement('div');
     x.id = 'sprite';
     x.style.position = 'absolute';
     x.style.left = '0px';
     x.style.top = '0px';
     x.innerHTML = 'Hello,world!';
     document.body.appendChild(x);
     document.body.style.width = '500px';
     document.body.style.height = '500px';
     document.body.onkeyup = function(e) {
         if(e != null) {
             move(e);
         } else {
             move(event);
         }
     }
}

如果在IE下浏览，代码可用，id为sprite的标签可以移动。但Firefox却不行，但没有报错。难道Firefox不支持onkeyup？于是上http://www.w3school.com.cn/上查了下，应该是支持的。但为什么Firefox得不到预想效果呢？

于是上w3school的在线编辑器，试验了一下代码：

<html>
  <head>
    <script type="text/javascript">
function whichButton(event)
{
  alert(document.body.onkeyup); 
}
    </script>
  </head>
  <body onkeyup="whichButton(event)">
    <p onkeyup="5">
      <b>Note:</b> Make sure the right frame has focus when trying this example!</p>
    <p>Press a key on your keyboard. An alert box will alert the unicode of the key pressed.</p>
  </body>
</html>

（内容已经改了，那些文字没什么意思）IE下弹出的窗口的内容是onkeyup函数的内容，而在Firefox下却是undefine……无奈ing。难道Firefox不支持吗？

后来改了下代码，就是把代码段1的

alert(document.body.onkeyup);

改为

alert(document.onkeyup);

勉强可以实现，但为什么在body里就不能加onkeyup事件呢？

微博

标签云

搜索

分类

链接

RSS

对 <base>标签的设计评论

新的一篇以及改进的主题

[HTML DOM]全局按键事件