Posts Tagged ‘css’

CSS 裸奔节

April 5, 2008 Tags: ,

第三届CSS裸奔节来了，今年（CSS Naked Day ‘08）的时间定在4月9日。

活动目的

CSS裸奔节的目的是推动Web标准。简洁为美。使用正确的(x)html，语义标记，良好的层次结构。暂时把页面设计抛弃，直接展示<body>吧。

如何参与

到这里填表报名，报名后一个小时内，你的网站会在官方列表中出现。

到了4月9日，将你网站上的CSS移除，抛掉页面设计。

你也可以在那天把以下HTML内容放置于网站顶部：

<h3>What happened to the design?</h3>
<p>To know more about why styles are disabled on this website visit the
<a href="http://naked.dustindiaz.com" title="Web Standards Naked Day Host Website">
Annual CSS Naked Day</a> website for more information.</p>

注：加上这些标注仅仅是为了向你网站的访问者说明情况，并不是为了带来流量或赚钱。CSS裸奔官方网站上没有任何广告，以后也不会放置广告。

活动日期

很多人非常关心CSS裸奔节的活动时间。今年定于4月9日，理由如下：

  • 活动日期应该定于周二、周三或周四，这几天网站流量比较高
  • 时间应该在4月份的第一周前后
  • 不应该是4月1日（要不谁信呢，呵呵）
  • 在活动通告发出至活动日期，至少有五天时间

如何裸奔

下面这个PHP函数可以用来裸奔：

<?php
function is_naked_day($d) {
  $start = date('U', mktime(-12, 0, 0, 04, $d, date('Y')));
  $end = date('U', mktime(36, 0, 0, 04, $d, date('Y')));
  $z = date('Z') * -1;
  $now = time() + $z; 
  if ( $now >= $start && $now <= $end ) {
    return true;
  }
  return false;
}
?>

可以这样使用该函数：

<head>
...
<?php
if ( is_naked_day(9) ) {
  echo '<!-- naked day has no styles -->';
} else {
  echo '<link rel="stylesheet" type="text/css" href="styles.css" />';
}
?>
...
</head>

工具、插件

stylesheet_link_tag :all, :cache => true的问题

December 15, 2007 Tags: ,

Rails 2.0引入了css和javascript的合并缓存机制。比方说，使用下面的代码，可以将stylesheets下的所有css文件合并为名为all.css的样式文件，并缓存下来：

<%= stylesheet_link_tag :all, :cache => true %>

合并的好处是，只需一次HTTP请求，就把站点需要的css都下载至客户端了。

Continue reading»

pre标签自动换行方案

December 3, 2006 Tags: ,

pre标签会原样保留HTML内容的格式，可是如果宽度过大会把页面撑坏，这时候需要自动换行来帮忙：

Wrapping the pre tag

Making preformated text wrap in CSS3, Mozilla, Opera and IEis the tip that let’s you use the pre tag to keep the formatting, without cursing yourself when some of the content is too long and doesn’t wrap: 

/* Browser specific (not valid) styles to make preformatted text wrap /
pre {
white-space: pre-wrap;       / css-3 /
white-space: -moz-pre-wrap;  / Mozilla, since 1999 /
white-space: -pre-wrap;      / Opera 4-6 /
white-space: -o-pre-wrap;    / Opera 7 /
word-wrap: break-word;       / Internet Explorer 5.5+ */
}

来源：Ajaxian » Wrapping the pre tag

为使用Master的ASP.NET Content页面添加CSS样式

October 19, 2006 Tags: , , ,

使用了Master的ASP.NET Content页面无法直接引用外部样式或内嵌样式，因为CSS样式必须出现在HTML的head标签内，而Content页面自身是不能包含head的。不过通过编程，很容易做到这一点，以下就是解决方案（也可以用相同的手段来添加其他HTML元素）。先定义以下两个方法：

  1. 内嵌样式支持
    protected void AddInlineStyle(string style)
{
    HtmlGenericControl node = new
        HtmlGenericControl(”style“);
    node.Attributes.Add(”type“, “text/css“);
    node.InnerText = style;
    Page.Header.Controls.Add(node);
}
  2. 外部样式支持
    protected void AddLinkedStyle(string url)
{
    HtmlLink link = new HtmlLink();    link.Attributes.Add(”type“, “text/css“);
    link.Attributes.Add(”rel“, “stylesheet“);
    link.Attributes.Add(”href“, url);
    Page.Header.Controls.Add(link);
    }

在 Page_Load 方法中，使用上面两个方法来添加样式：

  1. 添加内嵌样式
    AddInlineStyle("body { padding:10px; margin:5px 0; }“);
  2. 引用外部样式
    AddLinkedStyle("/styles/layout.css");

简单而实用。HtmlGenericControl 是相当有用的类，在ASP.NET中可以用来定制很多输出行为，实在是应该多加利用的好东东。