Category: css

[CSS] object-fit / object-position 調整置換元素(img..等)的內容

這幾天才看到的一個 css 屬性,以往我都喜歡用 background-image 而不使用 img,很大原因就是 background 提供許多操作圖片縮放的 css object-fit / object-position 透過這兩個屬性,我們可以控制置換元素的內容填入的位置及大小。 PS. 置換元素指的是img、video 及 canvas …等,簡單說就是 tag 的 src 載入內容後,會取代原本元素。 比較可惜的是, IE、edge 並不支援這兩個屬性 object-fit: fill 預設值,預設會強制變形至 css 所定義的元素寬高,不管原檔比例。 contain 增加或減少載入物件的寬度及高度(維持原比例)直到放得進所定義的元素寬高。 cover 填滿元素的寬度及高度(維持原比例),通常會剪掉部分的物件。 none 不做任何大小及比例調整。 scale-down 將會選擇設為 none 或 container 兩者間較小的那個物件。 看看實際的例子吧:   object-position 預設為 center center,通常會跟 object-fit 一起使用,定義物件所顯示的 x/y 位移。(看例子比較容易懂囉) 參考資料: https://css-tricks.com/almanac/properties/o/object-fit/ https://css-tricks.com/almanac/properties/o/object-position/

[CSS] 各種 CSS Pseudo-Class Selector

最近在看一些 CSS 的 pseudo-class selector,有些在瀏覽器支援度已經很普及卻很少看到有人在 CSS 中實際使用,在這紀錄幾個我覺得蠻實用的 selector 提供個總表 :empty :after / :before :enabled / :disabled :first-child/:last-child :first-of-type/:last-of-type :invalid/:valid :lang :only-child :only-of-type :optional/:required :root ::selection :empty 元素中是否有內容(包含空白)。(IE9 以上及其他瀏覽器幾乎都支援)   :after / :before (IE9 以上及其他瀏覽器幾乎都支援) 在元素前/後新增擬元素(通常會使用 content 屬性)。 最簡單的例子,但是這個例子實務上可能不是這麼實際 實務上,我會比較建議把這種擬元素套到 icon 或是一些比較無結構意義的地方,進而讓 html 減少寫無架構性的元素。(程式碼可能比較長,這邊就不寫) 例如: clearfix、block 的垂直置中(方法六) 及 tooltip 常用到的三角形   :enabled / :disabled (IE9 以上及其他瀏覽器幾乎都支援) 被設置 enabled(enabled=”enabled”)、 […]

[CSS] 超連結()的狀態樣式

記錄一下超連結的(<a>)幾個狀態 css selector,相較普通元素多了”未訪問” 與 “已訪問” 的 selector a: 超連結的基本樣式。 a:link 尚未訪問過的超連結樣式。 a:visited 已訪問過的超連結樣式。 a: hover 滑鼠 hover 狀態的樣式。 a:focus 目前 focus 的超連結元素樣式。 a:active 連結被點擊當下的樣式。   參考資料: http://www.w3schools.com/cssref/sel_link.asp

[CSS] flexbox 解析,解決傳統排版的複雜問題

CSS3 的新排版方式,flexbox (目前在IE上好像還是有不少 bug….) 利用 flexbox 可以解決我們傳統排版方式遇到的許多問題。 在這篇文章中,我就不介紹 flexbox 的用法與屬性了(flexbox教學的文章網路上很多,google後應該一堆) 但我還蠻推薦這個網站: http://flexboxfroggy.com/ 花不到一個小時就可以很快上手 flexbox 排版囉! 接下來,我會簡單比較幾個複雜的案例,使用 flexbox 排版與傳統排版的差異 還記得以前在不同情況時的各種置中方法嗎? 在 flexbox 版面配置中一切都變得很容易,只要利用 justify-content 與 align-items 就可以輕易達成 選單的導覽列,我們時常使用 inline-block 去做選單的每個選項,針對選項的數量去制定寬度如( 33%、25%等),這樣日後增加選項時我們還需要去更改 CSS 的寬度設定 但在 flexbox 版面時,我們可以讓裡面的 item 自動分配寬度 如: 在寫多欄式的版面時,可能每欄的高度不同,若要使所有欄與最高欄的對齊。我們需要用一些 overflow: hidden; padding-bottom: 9999px; margin-bottom: 9999px; 這類的 CSS hack。(不乾淨的寫法。 在 flexbox,可以透過簡單 flex-grow 就可以做到相同的效果 雙邊側欄 + 中間主內容隨螢幕改變大小。 如: […]

[css] float 屬性,什麼是 clearfix?

有寫過 CSS 的應該都知道有一個屬性為 float,例如我們常常使用 float 去做一些導覽列的應用: 例: 當然也可以使用 display: inline-block,達到類似的效果。 不過在以上這個例子,如果你仔細看了一下 HTML 與 CSS的程式碼,你應該可以發現 原本應該是 div > ul > li 的結構,而且 div 應該要有 #CCC地的背景顏色,但卻似乎沒出現。 若你再仔細一點按下 F12檢查元素,會發現 div 的高度竟然是 0 ? 這其實也就是元素並不會計算到有 float 屬性的元素高度,因此可能導致高度的值有誤 在目前新的瀏覽器中,我們可以在底下增加元素並賦予 clear: both 這個屬性來解決這個問題。(稱為 clearfix) 或是在 div 增加 overflow: auto; 的屬性: 我個人覺得更好的解法是利用 css 的擬元素

[css] position 屬性relative、absolute、static 及 fixed 解析

css 的 position 屬性,許多剛入門的人不深入了解,容易不清楚究竟是以哪個父元素做定位,造成不良的HTML編排架構。(最差的狀況就是用了一堆 fixed…..) 這篇整理幾個範例,說明每個屬性的用法。 static: 預設定位,無法定義 top、left、bottom 與 right。 relative: 元素與 static 位置相同,可定義 top、left、bottom 與 right。(注意: 元素實際位置還是在 static的位置,非偏移過後的位置) absolute: 以上層非 static(預設定位)的父元素為定位基準。(重要: 若上層所有父元素都是預設的 static 定位,則會根據 body 定位) PS. 可以看到藍色區塊會以祖父元素(position: relative;)來做定位。 fixed: 以目前瀏覽器視窗定位,固定在瀏覽視窗的固定位置,不隨滾動捲軸拉動。 也就是很多廣告或彈出視窗的作法。 PS. 非不得已不要用,這等同於強制覆蓋住所有其他的元素及畫面。

[CSS] 水平置中與垂直置中(傳統作法)

想說把之前報過的幾個簡報整理為文章記錄一下好了XD 在 CSS 中,大家時常為了水平置中與垂直置中的問題而困擾,這篇文章整理幾個傳統解決置中的做法。 不過現在 CSS3 有 flexbox 排版與 grid 排版,幫助我們解決排版的問題,只不過還不夠普及就是了。(flexbox 在IE上還有許多bug….) 首先必須知道在 HTML 的每個元素都有預設的一個 display 屬性,詳情請查文件 如: inline: <span>、<a>、<b>、<i>…等。 inline 元素預設依據內容多寡決定寬度並可以多個並排在一行,無法設定 width、height、margin-top、margin-bottom、padding-top 及 padding-bottom。 block: <div>、<nav>、<section>、<p>、<h1>…等。 block 元素預設會佔滿父元素的100%並且換行, inline-block: 可以多個並排在一行,且可以設定 block 的所有 CSS 屬性。(引述以下 Vexed Blog:就是外面是 inline ,裡面是 block 。) flex: CSS3 的一種排版方式,請見此文章。 其他: 剩下的其他屬性相比較不常見,有用到再自己看囉! 接下來,我就以 inline 與 block 的水平置中及垂直置中方法來介紹(inline-block 的方法就與 inline 一樣)~ 水平置中 […]

[css] 讓過長的內容省略為….,text-overflow的用法與說明

在網頁的許多地方可能會出現較長的段落,當文字過長時可能會影響排版及 UI。 我們可以利用 css 的 text-overflow 去做一個客製化的隱藏多餘文字。 這個屬性要記得搭配 overflow: hidden; (oveflow時隱藏)與 white-space: nowrap;(瀏覽器不換行) text-overflow clip  預設值,直接將字切斷 ellipsis 將過長的地方取代為 … 例: 上面例子 <span> 標籤多了 display:inline-block;,是因為 <span> 是行內(inline)元素,並不能設定寬度,因此必須改為 display: inline-block;。 參考資料: https://developer.mozilla.org/zh-TW/docs/Web/CSS/text-overflow

[css] word-break、word-wrap(overflow-wrap) 及 white-space 的差別與用法

剛開始常分不清楚 CSS 中的 word-break、word-wrap 及 white-space 利用這篇釐清這幾個的用法與差別 word-break:決定如何斷行單詞。 normal 瀏覽器預設的單詞斷行,可以看到英文會以詞斷行(不會將原詞切斷),中文則是以字斷行。 break-all 讓非CJK(Chinese、Japanese、Korean)語言的文字,任意斷行(以字斷行)。 keep-all 用詞斷行。 例: word-wrap:當詞斷行後的結果 overflow時,要如何處理 normal 保持在同一行 break-word 切斷詞並換行。 PS. 設定 word-break: break-all; 就不會 overflow,因此 word-wrap 並不會起作用。 例: white-space:決定如何處理元素中的空白字元及斷行。 normal 預設連續空白時瀏覽器會忽略空白(還會省略開頭多餘的空白),只會視為一個,若 overflow 則自動換行。 nowrap 直到遇到 <br /> 之前都不換行,就算你再設定 word-wrap: break-word; 也不會換行。 pre 依原空白字元及排版顯示,overflow 仍不換行。 pre-wrap 保留原排版及空白字元,在 overflow時會自動換行 pre-line 保留原排版,會合併多餘的空白,overflow 自動換行。 PS. 詳細請看參考資料之網址 例: 參考資料: http://abgne.tw/css/css3-lab/css3-word-break.html […]

[HTML、CSS] 載入圖片失敗時,純 CSS 替代處理方法

當我們在網頁中載入外部圖片時,時常會使用 HTML 的 <img> 標籤 src 來嵌入圖片來源,這也是其中一個可以允許發送跨域請求的 HTML 標籤。 PS. 跨域請求:簡單來說就是可以載入任意網域的外部資源,因此常是 XSS 的攻擊方式之一。(這邊不多談) 若外部網域發生錯誤,圖片無法正常顯示則會產生一個醜醜的小縮圖,如以下範例: 因此若你的網站有大量外部資源圖片,就可能因為圖片載入失敗而影響排版與視覺觀感。   其實預設在 <img> 標籤本身就附帶 onload、onerror、onabort 幾個事件來判斷圖片是否載入成功 onload:當圖片成功載入時觸發此事件。 onerror:當圖片載入失敗時觸發此事件。 onabort:當使用者手動中斷此圖片的載入,如:點擊瀏覽器左上角的停止載入按鈕。 我們可以透過以下的程式碼來測試以上情況所觸發的事件 PS. 在瀏覽器按下 F12,選擇主控台或 console 即可看見不同情況的輸出訊息。 因此大家可能會想,那就可以利用此事件。當圖片載入發生錯誤,我們就將 src 替換為替代圖片。 因此可寫出如以下的程式碼 <img src=”404.jpg” onerror=”this.src=’noimage.jpg’” /> 但是以上這段程式碼可能會發生無窮迴圈而無止盡執行的錯誤。 若 noimage.jpg 也發生錯誤,就會導致無止盡的替換 src ,但又無止盡的發生錯誤,造成網頁的崩潰。 以上說了這些事件,是希望大家能對事件有初步的了解及可能的應用。 再來我們進入主題,可以如何使用CSS來做取代圖片 首先我們來看 <img> 這個標籤,當讀取圖片失敗時有沒有什麼特性。 <img src=”404.jpg” alt=”圖片讀取失敗” /> 若圖片讀取失敗,會將 alt […]