如何舊版IE也能擁有最新的CSS3酷炫效果!

微軟的IE瀏覽器雖然受到許多網頁開發者們的討厭,但畢竟身為目前市佔率最高的瀏覽器,開發者們也不能棄之不顧。然而,目前最流行的新一代網頁標準CSS3擁有了許多實用的好功能,目前在非IE的瀏覽器中大多也已經支援了,那該怎麼辦呢?
評論
評論

微軟的 IE 瀏覽器雖然受到許多網頁開發者們的討厭,但畢竟身為目前市佔率最高的瀏覽器,開發者們也不能棄之不顧。然而,目前最流行的新一代網頁標準 CSS3 擁有了許多實用的好功能,目前在非 IE 的瀏覽器中大多也已經支援了,那該怎麼辦呢?

CSS3 到底有多好用

大多數的當代網頁設計,扣除掉透過 Flash 和 Sliverlight,大致上都是使用 HTML+CSS 的組合進行設計,而 HTML 的最新版本為 HTML5,而 CSS3 則是 CSS 的接替者。

那 CSS3 到底多了什麼功能呢?舉個最簡單的例子而言,在 Web 2.0 的時代,許多網站都很喜歡使用圓角的設計,不管是在頁面的按鈕、或是文字框等都會使用圓角讓畫面更好看。然而這個簡單的圓角效果製作起來卻是相當麻煩,透過傳統的 CSS2,我們只能透過自己先在 Photoshop 等繪圖軟體將圓角的圖案設計好、輸出成圖檔後,在以背景的方式整張貼到網頁上。

像是以下的圖案便是透過 CSS3 在最新版 Safari 瀏覽器中所呈現出來的,這中間完全沒有使用到任何一個圖檔!

這樣做的缺點自然是相當花費時間、且裁切出的圖檔也不能重複利用,更別提傳輸這些圖檔的額外網路頻寬了。同樣的道理也發生在畫面的陰影效果、漸層效果等,沒有 CSS3 我們只能透過一張張靜態的圖片去堆疊出我們想要的效果。

然而目前 CSS3 的支援狀況誠如序文所提到的,大多數的現代瀏覽器像是 Chrome/Safari/Firefox/Opear 等均已經支援了 CSS3 上述的大多屬性,而 IE9 也同樣的支援。然而大多數的使用者可能使用的是 IE6~8 的版本,那該怎麼辦呢?目前常見的作法便是擺著,就讓 IE6~8 的使用者們看不到圓角、陰影等效果,畢竟這些效果往往只是錦上添花,即便沒有這些特效網站也都能夠正常的瀏覽。

CSS3 PIE

CSS3 PIE 便是一個能夠解決上述問題的方便工具。透過 JavaScript 的模擬,CSS3 PIE 替 IE 實作了包含圓角、陰影、漸層和多重背景等 CSS3 所支援的內容,讓舊版的 IE 瀏覽器也能夠像其他新的瀏覽器一般直接的讀取 CSS3 的程式碼,就不需要另外花費而外的時間製作圖檔了。

而要如何使用 CSS3 PIE 呢?首先我們必須先從官方網站上面下載原始碼,下載後解壓縮會是兩個.htc 檔,其中一個是有壓縮過、一個則是沒有壓縮過的,除非是要研究裡面的程式碼細節,否則直接使用壓縮的版本即可。

接下來我們的 CSS 程式碼當中加入相關的 CSS 屬性,並且附上與這隻.htc 檔的連結:

div#header {     -webkit-border-radius: 8px 8px 0 0;     -moz-border-radius: 8px 8px 0 0;     border-radius: 8px 8px 0 0;     behavior: url(PIE.htc); }

前兩行-webkit 和-moz 開頭的分別是為了 WebKit 系列(Safari、Chomre)的瀏覽器和 Mozilla 系列(Firefox)瀏覽器所的 CSS3 規則,而第三條則是給 CSS3 PIE 所使用的。

透過這樣的指定與加入.htc 檔,IE 便可以自動的讀取這隻 JavaScript 並且顯示出正確的 CSS 3 效果囉!

結論

CSS3 的方便性讓許多開發者紛紛在新的網頁專案中進行嘗試,而透過 CSS3 Pie 更可以將 CSS 3 的支援加入 IE 瀏覽器中,讓 CSS 3 真正能夠靈活的使用在工作的專案上。

參考資源


運動科技新革命: IoT 結合數據分析,奧運跆拳銅牌羅嘉翎國手養成之路揭秘

運動科技為近年運動產業顯學,現在賽場上,不僅較勁各選手的體力及技術,更考驗各國科學技術導入,輔佐選手的程度。有效運用運動科技,不僅可避免傷害外,更能提升訓練品質,提升選手佳績。
評論
Photo Credit: INSIDE
評論

今年 8 月剛落幕的 2020 東京奧運,台灣選手獲得 2 金 4 銀 6 銅的 12 面獎牌,不僅寫下史上最佳參賽成績,且分別在 10 種不同項目奪牌,令各界大為驚艷。近年健康意識抬頭,下班後會自發去運動的人越來越多,種種現象顯示著台灣的運動風氣已逐漸成熟,而運動科技正是背後的隱形推手。

科技部致力推動產學界合作,結合運動科學、智慧科技與數據分析,輔助選手精準練習,用最有效率的方式提升表現,讓運動訓練不再是土法煉鋼。運動科技的應用也能幫助一般人,在日常生活中更聰明更健康的做運動。由於商機龐大,運動科技早已成為各國在運動競技賽事與產業發展積極佈局的新型態競爭場域,一起來看看它為台灣體育帶來了什麼樣的改變吧!

透過科技幫助運動選手了解自身狀態,穩扎穩打求進步

年僅 19 歲的跆拳道選手羅嘉翎,首戰奧運便打敗多國好手,一舉拿下銅牌。從小在道館長大,幼稚園就跟著爸爸、哥哥練習跆拳道,小學開始在國內比賽嶄露頭角,國二首次參加青少年國際賽事後更不斷奪金。然而,初生之犢的她,卻是好不容易才站上奧運這個舞台。

「小時候的確身高有優勢,但剛轉去成人組時還滿挫折的」,帶著青少年時期的亮眼成績,羅嘉翎在高一下加入跆拳道國家隊,被延攬至國家運動訓練中心(以下簡稱:國訓中心)接受國手培訓,「裡面都是大學的學長姐,訓練強度很高,剛進去時很不適應,那段時間比賽成績也不理想,晚上都會打電話給媽媽哭訴。」

Photo Credit: 行政院科技會報辦公室
Photo Credit: INSIDE

羅嘉翎分享,國訓中心的訓練方式很有系統,除了完備的訓練器材,還會透過科學儀器評估選手的運動表現,也定期使用生化檢測儀器,每月至少1次檢測疲勞度與血氧量,維護選手的身體健康。

「運動科技可以幫助我了解自己現在的狀態,還有需要加強哪些地方」,羅嘉翎表示,選手的日常就是不斷練習、調整好狀態,透過數據分析可以清楚知道自己的強弱項,「像我需要加強肌力,這樣訓練有方向,進步也會比較穩。」

沒有因挫折放棄跆拳道,羅嘉翎持續在國訓中心自我精進,再加上慢慢調整心態,她逐漸適應了高強度的訓練,也找回了享受比賽的初衷。

事實上,台灣自 2012 倫敦奧運以來,就沒有在跆拳道項目拿過獎牌,羅嘉翎也坦承因此感受到不小的壓力,「拿到奧運資格時我爆哭,但我不是被看好奪牌的選手,就想說放鬆去打。」沒想到放下得失心,反而幫助自己贏得了銅牌的好成績。

國立體育大學技擊運動技術學系副教授王翔星分享,針對跆拳道選手的檢測主要有3方面,包括以「線性位移偵測器」檢測選手連續 3 次跳躍的爆發力與穩定度,評估賽場上攻擊動作的力量輸出率;以及透過「測力板」檢測 50 毫秒發力率( RFD,Rate  of Force Development ),以觀察選手腳蹬地出發與踢擊到對手瞬間的力量表現;還有「慣性感應器」則是用來檢測選手的反應能力與速度。

Photo Credit: 王翔星

「現在的訓練方式跟以前差很多,得分的方式不同,教練的觀念也需要調整。」過去也曾是跆拳道選手的王翔星說,以往求勝心切的選手容易練到渾身是傷,現在藉由運動科技的輔助,能精準掌握練習進度,避免過度訓練、減少運動傷害,是更有效率的訓練方式。

Photo Credit: INSIDE

王翔星也表示,培育一名優秀的選手相當不容易,這幾年開始將運動科技帶進國、高中,就是希望能讓年輕選手儘早接觸到運動科技的專業訓練觀念,避免選手在早期生涯就受到嚴重的運動傷害而留下遺憾,未來能夠更上一層樓。

產業跨界結合,讓運動科技深入全民健康生活

目前 5G 正式邁入商業化,宅經濟當道,運動科技的應用也有了更多可能性。「台灣科技業的研發能量強大,運動產業也很有國際競爭力,我認為應該能結合兩者的強項來解決許多問題,例如居家健身沒人指導,該怎樣才不會受傷。」國立臺灣師範大學運動競技學系研究講座教授相子元表示。

相子元主修生物力學出身,被譽為台灣運動科技教父,同時擔任國訓中心運動科學小組總召集人。他很早就投入運動科技與產業結合的研究,作為科技部「精準運動科學研究專案計畫」的執行團隊之一,目前團隊已開發出將壓力感測科技應用於智慧鞋、科技運動襪、機能衣、自行車功率表等產品。

Photo Credit: INSIDE

相子元認為,運動科技商品在亞洲市場很有潛力,目前台灣主要發展在 3 大面向:競技運動,如跆拳道、舉重、射箭;職業運動,如棒球、籃球;全民運動,如自行車、慢跑等。舉例來說, LPS(Local Positioning System ,局部定位系統)運用在團隊運動的訓練上,能讓教練、選手清楚知道跑位陣式,取代傳統手寫戰術,目前 NBA 美國職籃、國際足總FIFA的隊伍也都採用此技術。

Photo Credit: 相子元

台灣選手在東奧打出亮眼成績值得喝采,相子元期待未來運動科技能協助更多選手精準運動、達到更好的表現,放眼 2024 巴黎奧運,並幫助更多人養成規律運動的習慣。接下來行政院主辦的「台灣運動x科技產業策略( SRB )會議」也即將登場,希望加深運動與科技產業的對話交流,讓運動科技越來越深入全民的生活。

SRB策略會議暫擬4大議題:

  1. 運動×科技產業升級創造新價值
  2. 智慧育樂創新服務建立營運新模式
  3. 融合科研成果與創新科技發展智慧新應用
  4. 台灣智慧育樂跨域環境整備

行政院科技會報辦公室 廣告