Loading blog entries.. loading


Blogs which referenced tag: [CSS]

 

Print partial web content

 
Written by Wayne Ye  Wednesday, September 28, 2011

Per project needs we need print part of a web page, which I have no idea when I saw this requirement, I googled and I read this post: http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../scripts/printing.htm, it basically use document.write to write the content you want to print to a new window by window.open, it works, however I really don't like the opened window.

Occasionally I tried to find out whether CSS can achieve such function, seemed I was on the right way: CSS media types is to control different display settings on different "media", controled completely by your own. What a shame to myself! CSS media types definiton from W3C official page:

One of the most important features of style sheets is that they specify how a document is to be presented on different media: on the screen, on paper, with a speech synthesizer, with a braille device, etc.

We can define print style by few ways:

  1. Make a seperate css file to define print style and link it by specifying media=print, <link rel="stylesheet" type="text/css" href="print.css" media="print" />
  2. Insert a <style media="print"> snippet into the <head>.
  3. Define @media print rule inline with our CSS code: @media print {#text_print:display:visible;}.

I'd reccomended option 1 or 3 if the project is small.

In additional I occasionally found that the Web Development extetion for Chrome already support this, we don't have to waste many pieces of papersSmile.

Web Development Tool

See also:

Print Button

W3C School: CSS Media types


View Post»



Permalink:http://wayneye.com/Blog/Print-Partial-Web-Content
Tag:

Significant Enhancement in Internet Explorer 9

 
Written by Wayne Ye  Friday, February 18, 2011

Background

Microsoft announced Internet Explorer 9 Release Candidate on  Feb 10th, 2011, RC indicates except bug fixing, there would not have big changes before the final RTM. Since I've been keeping a watchful eye on IE9 from its very first preview version, I would like to write a post about its significant enhancement from a developer's point of view, I intend to summarize most significant enhancement points of IE9 listed below:

  • Enhanced performance
    1. The New Chakra JavaScript Engine
    2. Hardware Acceleration
  • Enhanced Web Standard Support
    1. HTML5 (huge number of new attributes support and Web Storage support)
    2. CSS3 (border-radius, ::selection pseudo-element, )
    3. W3 standard Geolocaltion API
  • Windows 7 Integration
    1. Website customizable TaskBar Jumplist.

By achieving new features above, IE9 will absolutely be the fastest and best Web Standard support version in the entire IE history.  

Walk through IE9 Enhancements

New JavaScript Engine – Chakra

IE9 team must be persistently working so hard on improving Chakra's performance, I picked following two paragraph  from Chakra Page on Wikipedia:

Microsoft's development of the engine was in response to evolving competing browsers, on which IE8 was lagging behind in terms of JavaScript processing speed.[3] SunSpider tests performed on November 18, 2009 showed the PDC version of IE9 executing scripts much faster than IE8, but slower than respectively Firefox 3.6, Chrome 4, and WebKit Nightly.[4] The same test performed on March 15, 2010 showed the first IE9 Platform Preview (using the then-current version of Chakra) to be faster than Firefox (with SpiderMonkey), but slower than respectively Safari (with SquirrelFish Extreme), Chrome (with V8), and Opera (with Carakan)

On February 8, 2011, the test showed the IE9 Release Candidate (using the current version of Chakra) to be faster than Safari, Firefox (with TraceMonkey), Opera, and Chrome.


View Post»



Permalink:http://wayneye.com/Blog/Significant-Enhancement-In-InternetExplorer9
Tag:

把Blog里的照片全部加上圆角效果吧:)

 
Written by Wayne Ye  Sunday, May 4, 2008

前几天在网上找到这么个酷酷的玩意,用JS给图片加上各种各样的圆角效果,官方主页:

http://www.netzgesta.de/corner/

看后顿时觉得很酷,今天周末,有时间来搞搞这个:)

读了官网的说明后发现很简单,下载corner.js(本地下载 ),然后页面include后直接使用class="自己挑一个喜欢的class"就ok了。

那么这里有个问题,如果你的Blog上线已有时日(比如鄙博),难道要手动更新你之前所有Blog里的图片代码给它们加上 class??

呵呵,这点事根本不能称之为问题:)当然是加段JS脚本给动态注册className喽,鄙播采用了Div+Css架构以及 MasterPage,所有的Blog都包含于一个名为“ContentPlaceHolder”对Div中


View Post»



Permalink:http://wayneye.com/ViewBlog.aspx?BlogID=21
Tag: