(Will 保哥) 前端工程研究：HTML&CSS&JavaScript 相容性檢查資源整理

CSS 相容性檢查資源 

  • CSS3 Selectors Test, CSS3 .info       說明:        我們知道有很多線上 CSS 查表工具，但內容太過繁雜，如果你只想針對特定瀏覽器查詢特定瀏覽器的 CSS 選取器支援度，透過這個網頁可以很快速的得知完整的測試結果。       用法:       開啟瀏覽器，打開以下網頁，就會開始測試該瀏覽器對 CSS 選取器的支援程度!      
    •    
  • QuirksMode - CSS       說明:       這是網路知名人物 Peter-Paul Koch (ppk) 經營的網站，有非常完整的跨瀏覽器 CSS 支援度測試報告，你可以從這裡查詢到各種 CSS 選取器、屬性、屬性值等等各式各樣的跨瀏覽器測試結果，非常具有參考價值。      
    •    
  • CSS Compatibility in Internet Explorer (Internet Explorer)       說明:        Well, you know! 我們在討論「相容性」的時候，通常不會考慮 “非 IE 瀏覽器” 的相容性議題，因為每當 “非 IE 瀏覽器” 發生相容性問題時，所有人都會叫你直接升級到「最新版」就能解決，所以我們在討論「相容性」議題時，大部分的情況都在討論 IE 各版本的相容性問題。       這份 CSS 相容性文件，則是由微軟官方撰寫，也非常具有參考價值。      
    •    
  • Guide to CSS support in email | Campaign Monitor       說明:        曾 經發過電子報的人們，一定了解發電子報的痛苦，要設計出一份可以讓所有人看到而且呈現一致的電子報有多麼的困難，尤其是你用 CSS 排版的時候，測試真的會測到抓狂！這份文件完整的列出目前市面上最知名的 10 大收信介面 (email clients)，清楚的列出哪些樣式你能用、哪些樣式你不該用，不想再用 Table 排版與整份電子報都變成圖片的設計師，可以好好參考這份文件。
Continue Reading

前端工程字典

線上的【前端工程字典】，支援完整的 HTML5, CSS3 參考文件，還支援 DOM, DOM Events, JavaScript, jQuery 等完整的 API 說明、版本標示與程式碼範例，每篇文章最後還有 See also 可以看更進一步的參考資料。

Continue Reading

如何讓網站在行動裝置更快

A recent study found that more than 80% of people are disappointed with the experience of browsing Web on mobile devices and would use their smartphones more if the browsing experience improved.

This isn’t surprising when 64% of smartphone users expect websites to load in 4 seconds or less, while the average website takes more than twice that amount, at 9 seconds. This article explains techniques you can use to make your websites faster on mobile devices.

User experience on mobile devices usually has room for improvement. (Image: Phil Campbell)
Download Speeds For Mobile Users

Let’s start by looking at what influences the loading speed of a website on a smartphone.

Continue Reading

30 個超棒的網站視差滾動設計

The word ‘Parallax’ has been derived from a Greek word ‘Parallaxis’, which means ‘alteration’. The parallax effect is an amazing effect in which different elements scroll along different lines on a website. It creates a fascinating faux-3D effect. This effect has been in use in web designing for quite some years now, but it is again being used a lot as it has again gained popularity. Some websites use this effect fully while others keep it to a minimal level, but it looks beautiful in both ways. It is a classy but tricky effect which when not used properly can result in a really messy and bad looking page. But parallax effect it used properly it can give a really rich and vibrant look to page; and make it look really impressive. So it is up to web designers as to how they will utilize it in an advantageous manner.

For a web designer it is really important to stay updated with all the latest trends and to know how to use them nicely.  We have a list of 30 Awesome Parallax Scrolling Design Examples for inspiration. All these designs were especially handpicked and are totally amazing. So check them out and get inspired!

Continue Reading