background preloader

Compatibility overview

Compatibility overview

來用 Sketch 畫你的 UI 吧 | VISIONCAN 在之前就聽說過這個黃黃的鑽石 Sketch 來畫 UI 相當好用,就趁當時 Sketch 3 推出時入手了,再親身體驗過後,我推薦用 Sketch 來畫你的 UI,以下跟大家簡單分享幾個我回不去 Photoshop 的特點: 超方便的圖片匯出 因應 Retina 的螢幕,Sketch 可以很方便的一次輸出多個倍數匯出,傳統用 Photoshop 可能得先輸出 2x 再去縮 1x,另一個好處是 Sketch 是向量的,可以先畫 1x 再輸出 2x 甚至更大 3x,若要支援甫推出的 iPhone 6 Plus 可說是無痛升級 3x!註: 其實 Photoshop 也是可以向量,只是用起來不那麼方便! 我之前的作法給大家參考一下,由於我是使用 Macbook Retina 螢幕,所以我是先畫 2x,再去縮放 0.5 倍及 1.5 倍: 另一個亮點就是不用特地隱藏其它圖層可以直接輸出我要的圖層,過往使用 Photoshop 得先隱藏某些圖層才能再輸出(Save to Web),但若是用 Sketch 的 slice 切片功能還是得隱藏部份圖層就是。 輸出還有一個很方便的功能,就是在預覽區裡就可以直接使用拖拉輸出圖片了,一個動作就將檔案加到寄件附件裡! 相對間距顯示 按下 option 再移動可以方便的知道物件間距是多少,透過不同物件中移動可以很快速的知道相對的座標及間距或是否有置中。 多層的填色、外框、陰影 元素可以有很多層的填色、外框等,效果可以疊加,另一方面在單一元素的 A/B test 很好用啊~ 建立可重用 symbols、text styles 這也是我覺得 Sketch 很大的一個亮點,把元素轉成 symbols,像是一個模組一樣可以重複使用,要修改是同步的,假如以一個 iOS App 來說,我有個畫面都各有一個褐色的 Navigation Bar,萬一要改成白色底、字體,在 Photoshop 要怎麼作? 背景模糊 我覺得這是針對 iOS7 來的吧!! Artboard 也算是一個 Sketch 的特色,一個檔裡可分很多 Page,而 Page 裡可以放很多 Artboard,可以想像 Artboard 是 App 中某個 Tab 裡每個流程畫面,而用 Page 來區分不同 Tab,另一個也是不錯用法就是利用不同的 Artboard 來作 app 的各種 size 的 icon。 結論:

13 Essential Tools to Check Cross-Browser Compatibility With an endless combination of modern and legacy browsers for users to choose from (depending on their system capabilities), it's our responsibility as designers and developers to ensure the websites we build perform adequately. Testing multiple browsers on multiple platforms isn't just difficult — it can be virtually impossible without the correct resources. However there are tools that let you comprehensively test your website, and check if it successfully displays across various browsers, platforms and resolutions. That way, your users will receive a positive, user-friendly experience no matter what their setups are. Below is a curated list of both free and premium cross-browser testing tools, ranging from cloud platforms to desktop applications. These tools will help you easily test everything from versions of Internet Explorer versions to more than 300 modern browser combinations. Show As Gallery Have something to add to this story?

Schepp/CSS-Filters-Polyfill HTML5 Cross Browser Polyfills · Modernizr/Modernizr Wiki The No-Nonsense Guide to HTML5 Fallbacks So here we're collecting all the shims, fallbacks, and polyfills in order to implant HTML5 functionality in browsers that don't natively support them. The general idea is that: We, as developers, should be able to develop with the HTML5 APIs, and scripts can create the methods and objects that should exist. Developing in this future-proof way means as users upgrade, your code doesn't have to change but users will move to the better, native experience cleanly. Looking to conditionally load these scripts (client-side), based on feature detects? svgweb by Brad Neuberg & others Fallback via FlashSnap.SVG from scratch by the author of Raphaël (Dmitry Baranovskiy) Abstracted API. FakeSmile by David Leunen Canvas Web Storage (LocalStorage and SessionStorage) Non HTML5 API Solutions ssw by Matthias Schäfer$.store by Rodney Rehmlawnchair by Brian Lerouxstore.js by Marcus WestinPersistJS by Paul DuncanSquirrel.js by Aaron GustafsonjStorage by Andris Reinman Video

3 Solutions for Supporting Internet Explorer In the beginning, Internet Explorer was the progressive browser. After a period of inactivity, Internet Explorer became the bane of our existence. Microsoft has since recommitted to their browser but the fact remains that sometimes modern Internet Explorer is lagging just a bit behind WebKit-based browsers and Firefox. We also need to accommodate for earlier versions of IE. htmlshiv.js Remy's HTML5shiv creates HTML5 elements like main, header, footer, etc. via JavaScript. selectivizr.js Selectivizr.js is an incredible resource, polyfilling loads of unsupported CSS selectors and properties, including the all-important last-child. An absolute must for your modern projects. <html> Conditional Comments The ugliest conditional comment series you'll ever see. This snippet doesn't require or wait on JavaScript, and isn't near the weight of a JavaScript library.

Related: