分类目录归档：others

HTML5 Shiv

发表于 由
回复

HTML5 has all sorts of great new elements such as <header>, <nav>, etc.  We can finally build pages without having tons of <div class=”header”> etc, and have the terms standardized across websites.

Internet Explorer will not recognize these unofficial elements.  Unlike Chrome, Firefox, Opera, and the rest of the browser world who will gladly assume the element is acceptable, and render / CSS just like any other element — Internet Explorer ignores them.  If you used <header> tags on your site, Internet Explorer (yes, even 8 ) will just ignore the existence of the code.

To use this script, it must be included before the <body> element (i.e. in the <head>) but doesn’t matter if it appears before or after the CSS – but for the sake of performance, it would make better sense to include the CSS first then this script. 

<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

Note that the protocol has been removed so you don’t have to when including on an http or https page

Common question: what’s the difference between the html5shim and the html5shiv? Answer: nothing, one has an m and one has a v – that’s it.

goals of the project PIE

发表于 由
回复

PIE aims to drastically shorten that timeframe, by implementing a simple shim to make CSS3 “just work” in IE. Our goals are:

  1. Be simple to use

    Applying PIE is extremely simple; in many cases the only thing you have to do is add the behavior property to your CSS.

  2. Be a CSS-only solution

    Many of the current solutions for implementing CSS3 features like border-radius are implemented as JavaScript libraries and require the author to write JavaScript to invoke them. That is less than ideal because it requires the CSS author to also know how to write JS, and it makes development slower and less maintainable because your styling code is scattered between CSS and JS files. PIE works entirely within the stylesheet, so you only write CSS and it’s all in a single place.

  3. Be seamless to the CSS author

    There have been several articles and resources in recent months which show ways that you can make IE “mimic” certain CSS3 features, for example using IE filters to fake box-shadow, or jQuery plugins to implement rounded corners. The problem with these solutions is that they require a lot of IE-specific code on top of your real CSS3, increasing your development time and the size of your CSS files. PIE on the other hand uses your CSS3 directly whenever possible; you simply write real CSS3, and PIE handles it seamlessly.

    PIE handles attaching, detaching, and updating automatically without any intervention from the author. This means that, unlike some other solutions, PIE does not require you to explicitly initialize elements when they are added to or removed from the document via script, and does not require any sort of “update” method to be called when an element’s position, size, or styles are modified on the fly.

    Another aspect of PIE’s seamlessness is that it should be fully compatible with any JavaScript library the site author might choose to use. You can create elements and assign CSS3 styles to them in jQuery or YUI or MooTools or any other library and PIE will automatically apply itself. Also, PIE’s objects are completely self-contained except for a single global PIE object, so there’s no chance that it will override objects or functions from any other JS code.

  4. Be as compliant with the CSS3 specs as possible

    PIE aims to be a true CSS3 implementation for those features it supports, complying with the current spec drafts as closely as possible. The goal is to allow authors to write a single set of CSS3 code and have it “just work” between browsers.

  5. Be as performant as possible

    If it makes the browser feel sluggish (more so than IE normally does, that is) then it’s useless. PIE was architected with performance in mind from the very beginning:

    • Rendering elements are only updated when they need to be.
    • CSS property values are only parsed when they have changed.
    • Internal objects are created lazily, and cached when appropriate.
    • The behavior script is written with file size in mind, and the most advanced JS compression tools available are used to minimize the file size, so the initial download is as fast as possible.

PIE

发表于 由
回复

CSS Level 3 brings with it some incredibly powerful styling features. Rounded corners, soft drop shadows, gradient fills, and so on. These are the kinds of elements our designer friends love to use because they make for attractive sites, but are difficult and time-consuming to implement, involving complex sprite images, extra non-semantic markup, large JavaScript libraries, and other lovely hacks.

CSS3 promises to do away with all that! But as we all know, due to Internet Explorer’s lack of support for any of these features, we must be patient and refrain from using them, and make do with the same old tedious techniques for the foreseeable future.

Problems with z-index (disappearing backgrounds/borders/shadows)

发表于 由
回复

First, a little background on how PIE renders CSS3 decorations: a single <css3-container/> element is created which holds all the VML objects. This container element is inserted as a previous sibling to the target element, and absolutely positioned at the same coordinates. If the target element is position:absolute or position:relative, then the css3-container element is given the same z-index as the target element, and since it is a previous sibling in the DOM tree it gets displayed behind, with no possibility of any other element sneaking in between.

However, this does not work so well when the target element is position:static, because static elements do not participate in z-index stacking. The only way to make our position:absolute css3 element go behind it is to give it z-index:-1. Unfortunately, this has a bad side-effect: not only will the css3 element go behind the target element, it will also go behind the background of any ancestor element(s) which are themselves position:static. This leads to situations in which PIE creates the VML rendering correctly but it disappears behind a parent element’s background.

The only way I know of to work around this is to either:

  1. make the target element position:relative, or
  2. make the ancestor element position:relative and give it a z-index.

Both of these workarounds can have potential unwanted side-effects in terms of child element positioning and z-index stacking. PIE could easily force one or the other itself, but:

  1. One or the other may be more appropriate depending on the particular situation, so the CSS author needs to be able to control which one gets chosen.
  2. Forcing position:relative outside of the CSS would put IE out of sync with other browsers, leading to confusing inconsistencies.

PIE therefore does neither, and it is up to the author to implement either workaround where necessary. In most cases simply adding position:relative to the target element is fine.

Use CSS3 Pie to Modernize Internet Explorer

发表于 由
回复

One of the biggest dilemmas facing web developers is the incompatibility of various Internet Explorer versions with current web standards. Although Microsoft has promised CSS3 and even HTML5 support for IE9, Windows users, especially businesses, may continue to use IE8, IE7, or even the dreaded IE6 for years to come.

As a result, coding a site with exclusive CSS3 features will only alienate a large portion of your website’s visitors, and obligating them to download a standards-compliant browser, like Mozilla Firefox or Google Chrome, will only come across as arrogant.

A possible solution to the problem is to use a modernizer, which is a script or application that uses a variety of tricks to make your site appear as it should in all browsers. CSS3 Pie is javascript-based modernizer that helps Internet Explorer recognize cool CSS3 features such as rounded corners, soft drop shadows, and gradient fills. It is quick, easy, and works most of the time with very little tweaking.

Installation and Setup

This brief tutorial assumes you already have a website with CSS3 elements. In order to get CSS3 Pie working, you need to do two things: upload the javascript package and add special code to your CSS file.

CSS3 Pie live demo with menu tabs

1. The download from the css3pie.com website includes a number of files, but if everything goes as planned, all you need is PIE.htc, which is a compressed text file. Upload it to a place on your web server where your CSS file can have access to it.

2. Open your CSS file in your text editor and locate the elements that contain CSS3 properties. Within those elements, add the following rule:

behavior: url(PIE.htc);

The path to your PIE.htc file needs to be exact, so if it is not in the same directory as your CSS file, change it accordingly.

The final element should look something like this:

#element1 { border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
background: #EEFF99;
behavior: url(PIE.htc); }

If it worked correctly, you should see the results in IE 6,7, and 8 immediately after uploading the altered CSS file.

Troubleshooting

If you see no changes at all, you could very likely need to adjust the path to your PIE.htc or even use the full URL. Just remember that IE will only accept an htc file from the same domain as the site, and “www.site.com” and “site.com” are considered two different domains.

Under some circumstances, you may need to try PIE_uncompressed.htc or even PIE.php to get it to work correctly. Consult the documentation for more details.

I have noticed that the combination of transparency and bold text results in some crazy-looking words in IE8. You might still need to use transparent image backgrounds in those situations.

The combination of CSS3 Pie and some jQuery functions seems to produce an error in IE. I have not found a solution for this, but the page still loads and displays correctly in spite of it.

Modernization

Live demo of CSS3 Pie to test in Internet Explorer

With very little effort, CSS3 Pie can help your website look consistently appealing in all major browsers, without the headache of having to shape corner images or make fake drop shadows. The front page of the site includes a demo so that you can adjust CSS3 properties and see the live results in Internet Explorer. Best of all CSS3 Pie is free and open source and available for download at no cost.

Microsoft rolls out Exchange 2010 Service Pack 2

发表于 由
回复

Exchange Server 2010 Service Pack (SP) 2 is available for download as of December 5. The latest SP includes functionality that is aimed at helping users navigate and manage their cloud-on-premises hybrid environments.

The newest SP adds new protection and compliance tooling; additional deployment options; and the return of Outlook Mobile Access (OMA). SP2 also includes a new hybrid configuration wizard, which, as Softpedia explained, can help automate “the setup of a hybrid connection between Exchange Online running in Office 365 and an on-premises Exchange 2010 organization.”

Exchange 2010 SP2 is supported on Windows 7 Professional 64-bit, Windows Server 2008 R2 SP1, Windows Server 2008 R2 Standard, Windows Server 2008 Standard.

Exchange 2010 SP2 isn’t the only  Microsoft offering that bridges the cloud-on-premises gap. Microsoft is in the midst of a strategy shift in terms of how it intends to encourage customers to move from private to public clouds, officials have said recently.