整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
類：同一個標簽，根據其不同的種狀態，有不同的樣式。這就叫做“偽類”。偽類用冒號來表示。
比如div是屬于box類，這一點很明確，就是屬于box類。但是a屬于什么類？不明確。因為需要看用戶點擊前是什么狀態，點擊后是什么狀態。所以，就叫做“偽類”。
偽類選擇器分為兩種。
（1）靜態偽類：只能用于超鏈接的樣式。如下：
PS：以上兩種樣式，只能用于超鏈接。
（2）動態偽類：針對所有標簽都適用的樣式。如下：
a標簽有4種偽類（即對應四種狀態），要求背誦。如下：
對應的代碼如下：
```html ```
記住，在css中，這四種狀態必須按照固定的順序寫：
a:link 、a:visited 、a:hover 、a:active
如果不按照順序，那么將失效?！皭酆逌蕜t”：love hate。必須先愛，后恨。
看一下這四種狀態的動圖效果：
問：既然a{}定義了超鏈的屬性，和a:link{}定義了超鏈點擊之前的屬性，那這兩個有啥區別呢？
答：
a{}和a:link{}的區別：
超鏈接a標簽在使用的時候，比較難。因為不僅僅要控制a這個盒子，也要控制它的偽類。
我們一定要將a標簽寫在前面，將:link、:visited、:hover、:active這些偽類寫在后面。
針對超鏈接，我們來舉個例子：
為了實現上面這個效果，完整版代碼如下：
```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
```
上方代碼中，我們發現，當我們在定義a:link和 a:visited這兩個偽類的時候，如果它們的屬性相同，我們其實可以寫在一起，用逗號隔開就好，摘抄如下：
css .nav ul li a{ display: block; width: 120px; height: 50px; } /*兩個偽類的屬性，可以用逗號隔開*/ .nav ul li a:link , .nav ul li a:visited{ text-decoration: none; background-color: purple; color:white; } .nav ul li a:hover{ background-color: orange; }
如上方代碼所示，最標準的寫法，就是把link、visited、hover這三個偽類都要寫。但是前端開發工程師在大量的實踐中，發現不寫link、visited也挺兼容。寫法是：
a:link、a:visited都是可以省略的，簡寫在a標簽里面。也就是說，a標簽涵蓋了link、visited的狀態（前提是都具有了相同的屬性）。寫法如下：
```css .nav ul li a{ display: block; width: 120px; height: 50px; text-decoration: none; background-color: purple; color:white; } .nav ul li a:hover{ background-color: orange; }
```
當然了，在寫a:link、a:visited這兩個偽類的時候，要么同時寫，要么同時不寫。如果只寫a屬性和a:link屬性，不規范。
我們在第一段中描述過，下面這三種動態偽類，針對所有標簽都適用。
我們不妨來舉下例子。
舉例1：
```html ```
效果：
數字產品可訪問性是指構建可供廣泛人群使用的數字內容和應用的實踐，包括具有視覺、運動、聽覺、語言或認知障礙的個人。
使網站為所有人設計，被人過度神話了，認為那樣做既困難成本也高，但實際上并非如此。從設計初期就開始考慮產品可訪問性，其實并不會增加額外的功能或內容，因此也不應該會有額外的成本和努力。
但是，要修復一個已經無法訪問的網站可能就需要費一番精力了。我以前在Carbon Health工作時，我們使用AXE 插件來檢查了網站的可訪問性，我們發現僅在主頁上就28個違規行為需要解決。
雖然聽起來很復雜，但我們發現這些問題并不難以糾正，只是需要花費一些時間和成本來研究這些問題，最后差不多幾天功夫我們就全部解決了。
我想分享一些我們曾用過的簡單步驟，來改善你的網站可訪問性。這些原則將側重于網站和移動端。
在開始之前，先來談談為什么做這些優化很重要？
作為設計師，我們有能力和責任確保每個人都能訪問我們設計的內容，無論其能力，背景或使用場景如何，做好產品可訪問性可以為每個人帶來更好的體驗。
美國有超過5600萬人（近五分之一）和全世界超過10億殘疾人。 在2017年，有814起網站可訪問性訴訟在聯邦和州法院提起，僅這兩項數據就可以讓我們相信設計可用性的重要性。
可訪問性還有一個很好的商業案例：研究表明，可訪問的網站有更好的搜索結果，能夠覆蓋更多的受眾，對SEO友好，下載時間更快，同時還鼓勵使用更好的代碼結構，他們也總是會有更好的可用性。
以下講到的7個方面是很容易做到，可以幫助你的產品更接近滿足Web內容可訪問性規范（WCAG 2.0）AA級標準。同時建議最好也去研究下最常用的輔助功能——包括屏幕閱讀器，屏幕放大器和語音識別工具。
對Guadalupe來說，按鈕具有更好的色彩對比度將更易閱讀
顏色對比是一個經常被忽視的Web可訪問性問題，如果對比度低，弱視的人很難從背景顏色中讀取文本。 在關于視力損傷和失明的情況說明書中，世界衛生組織（WHO）估計有2.17億人患有中度至重度視力障礙。因此，考慮文本和背景之間的充分對比是至關重要的。
根據W3C規定，文本與其背景之間的對比度應該至少為4.5比1（符合AA級別）。對于較大和較重的字體，比率相對寬泛一些，因為它們在較低對比度下也能容易閱讀。比如：使用的字體為18pt或14pt粗體，則最小對比度將降至3比1。
有些工具可以幫你快速檢查，如果你使用的是Mac，建議使用對比應用（https://usecontrast.com），使用此工具可以使用顏色選擇器立即檢查對比度。如果您想獲得更詳細的分數，我建議您在WebAIM（https://webaim.org/resources/contrastchecker）顏色對比檢查器上輸入顏色值。
此工具將計算常規和較大文本，得出級別（A，AA，AAA）的分數，你可以更改顏色值并實時查看結果。
參考資料：WCAG Visual Contrast
對René來說，當圖形對色盲患者友好時，他會感到很開心！
當你在傳達重要的事情、響應動作或提示時，不要把顏色作為唯一的視覺線索，弱視或色盲的人可能很難理解你的內容。
嘗試使用顏色以外的符號，例如：文本標簽或圖案。在界面上顯示錯誤時，不要太依賴顏色，添加圖標或在消息中寫上一個標題，考慮為段落中的鏈接文本添加視覺提示（如：字體加粗或增加下劃線），以便鏈接能突出顯示。
如果只使用顏色來區分數據，那么具有更復雜信息(如柱狀圖和曲線圖)的元素就特別難閱讀。使用其他視覺元素來傳達信息，如形狀、標簽和大小。還可以嘗試將多種模式進行組合，以使差異更明顯。
Trello的色盲模式（https://twitter.com/trello/status/543420024166174721?lang=en）就是一個很好的例子，啟用后，通過添加紋理標簽能讓網站變得更容易訪問。
一個很好的技巧是將你設計的內容以黑白模式打印出來，看看你是否仍然可以理解其中的所有內容。你還可以使用Color Oracle（下載鏈接：http://colororacle.org）這樣的應用，它可以實時顯示具有常見色覺障礙的人看到的內容，這些提示可幫助你確保站點中的信息障礙與顏色無關。
參考資料：WCAG Visual Contrast Without Color
Tyler 的假手可以輕松切換按鈕焦點狀態
你是否注意到有時會出現在鏈接，輸入框和按鈕周圍的藍色輪廓？
這些藍色輪廓稱為焦點指示符，默認情況下，瀏覽器使用CSS偽類在元素選中時顯示這些輪廓。你可能會發現這些默認焦點指示符不是很漂亮，然后一門心思的想要隱藏掉它們。但是，如果你去掉了這些默認樣式，請務必將其替換為其他內容。
焦點指示符可幫助人們了解哪個元素具有鍵盤焦點，并幫助他們在瀏覽站點時清楚自己的位置。這些都是對盲人，需要屏幕閱讀器，行動不便，受過腕管損傷以及喜歡這種導航的高級用戶有用的技術。
甚至我們中的一些人，也會使用鍵盤作為他們瀏覽網頁的主要方式！應該可以聚焦的元素有：鏈接、表單字段、小部件、按鈕和菜單項，他們需要有一個焦點指示符，使它們看起來與周圍的元素不同。
你可以設計一個符合你網站風格的焦點指示符，并與你的品牌保持風格一致。創建一個高度可見的狀態，并具有良好的對比度，使得它從其他內容中脫穎而出。
參考資料：W3C Focus Visible
Mr. López 不斷嘗試將占位符文本轉換為列表項標簽
僅使用占位符文本作為標簽是設計表單時最大的錯誤之一，當位置有限或想讓設計更簡單和現代時，我們可能會想要順應這種趨勢。占位符文本通常是灰色的，對比度不高，因此很難閱讀。
如果你像我一樣，你通常會忘記你在寫什么，所以一旦文本消失，很難知道這些字段是什么。使用屏幕閱讀器的人，通常使用Tab鍵瀏覽表單以跳過表單控件。依賴<label>元素讀取控件，通常會跳過任何非標簽文本（如：占位符文本）。
始終幫助人們了解他們應該做什么，并以一種明確的形式給出。最好是標簽不會消失，即使這個人正在輸入信息，人們不應該失去他們的寫作背景。當設計師在他們的表單中隱藏描述時，其實是犧牲了可用性而追求簡潔。
這種做法并不意味著你必須用不必要的信息來混淆你的設計，只是確保提供必要的線索，太多的指導性文本可能和太少的問題一樣，目標是確認每個人有足夠的信息，來完成他們的任務而沒有障礙。
參考資料：WebAIM Creating Accessible Forms
Robin在圖片中發現了一個新的朋友
弱視的人經常利用屏幕閱讀器來“聽”網頁。這些工具會將文本轉換成語音，這樣人們就可以在網站上聽到單詞。
有兩種方法可以顯示替代文本：
嘗試描述圖片中發生的事情，以及它對故事的重要性，而不僅僅是說“圖片”。 如果圖片純粹是裝飾性的，或者由于上下文已經解釋了內容而變得多余，嘗試添加一個空的<alt>屬性將使屏幕閱讀器跳過它。如果不寫任何替代文字，一些屏幕閱讀器將讀取文件名，這樣的用戶體驗會很糟糕。
谷歌正在研究一種圖像字幕人工智能，它能以94%的準確度描述照片（https://petapixel.com/2016/09/23/googles-image-captioning-ai-can-describe-photos-94-accuracy）。這個模型是開源的，仍在研究中，希望我們能看到它在不同的產品中使用。與此同時，我們應該在我們的內容中手動添加描述圖像含義和功能的文本。
參考資料：W3C Using Alt Attributes
Noah 一直想成為一名建筑師
標題，標記內容開始的地方。它們是給文本加上的標簽，用來定義其風格和目的，標題還創建了頁面內容的層次結構。
大字號的標題有助于讀者更好地理解內容的順序，同樣，屏幕閱讀器也使用標題標簽來閱讀內容。這樣，弱視的人通過閱讀內容中的每個標題來獲得頁面的大致內容。
在開發站點時使用適當的結構元素很重要，HTML元素向瀏覽器傳達它們包含的內容類型，瀏覽器應如何呈現或處理這些內容。頁面的組件和結構形成內容樹，讀取內容樹是屏幕閱讀器的強大功能，它們被盲人使用，使得他們可以“聽”頁面內容。
不正確使用標記會影響可訪問性，不要僅將HTML標記用于樣式效果，屏幕閱讀器通過標題結構（真正的標題，而不僅僅是大字號和粗體樣式的文本）按層次結構瀏覽網頁。 使用你網站的用戶可以收聽所有標題的列表，按標題類型跳轉內容，或直接導航到頂級標題<h1>。
（譯者注：以前我最初寫重構代碼的時候，就困惑一個問題，h1-h5標簽除了自帶樣式和利于SEO等作用外，還有什么其他用途？看了本文才知道，原來還有幫助盲人聽書這么重要的作用）
參考資料：WebAIM Semantic Structure
Gael 在聽網站的時候使用鍵盤導航
鍵盤可訪問性是Web可訪問性的最關鍵方面之一，有運動障礙的人，依賴于屏幕閱讀器的盲人，沒有精確肌肉控制的人，甚至高級用戶都依賴鍵盤來導航內容。
如果你像我一樣，經常使用鍵盤上的Tab鍵來瀏覽網頁上的交互元素：鏈接、按鈕或輸入項，我們前面討論的焦點狀態，提供了當前選擇的組件的可視化指示器。
當你瀏覽頁面時，交互元素的順序很重要，導航必須有邏輯且直觀。選項卡順序應遵循頁面的閱讀順序：從左到右、從上到下——標題、主導航、內容按鈕和輸入項，最后是頁腳。
一個好的做法是僅使用鍵盤測試你的網站，使用Tab鍵選擇鏈接和表單，使用Enter鍵測試以選擇元素。 驗證所有交互式組件是否可控且有序，如果你可以在沒有鼠標的情況下瀏覽所有網站，那么你的網站就做的很棒了！
最后一點，但并非不重要，請注意導航的大小——包括鏈接的數量和文本的長度。對于有運動障礙的人來說，通過長菜單進行切換可能會很困難，對于使用屏幕閱讀器的人來說，聽冗長的鏈接可能很麻煩——盡量保持簡潔。
提供ARIA Landmarks（https://accessibility.oit.ncsu.edu/it-accessibility-at-nc-state/developers/accessibility-handbook/aria-landmarks/）或HTML5結構元素（如<main>或<nav>）將使導航更容易。
參考資料：W3C Keyboard
這七條準則是一個很好的開始，如果你想要做更多的事情來使你的產品更容易訪問，我鼓勵你去做以下一些事：
如以上所述，七個指導原則將幫助你的web設計，更接近于滿足web內容可訪問性指導方針AA級別標準（https://www.w3.org/TR/WCAG21）。
我正在努力改進可訪問性設計，也正在努力練習我講到的東西。我曾經認為它太難了并且也不重視，其實我誤解了，如今我邀請你同我一起，將可訪問性設計加入到設計流程中，并繼續討論可訪問性的重要性。
作為設計師，我們有責任倡導無障礙設計。有了它，我們使技術能為所有人服務，不管他們的能力、經濟狀況、年齡、教育或地域。
做有責任感的設計師，謝謝！
原作者的文章題目是：《Designing for accessibility is not that hard》，意思是《為可訪問性設計沒有那么難》。其實我一開始是有把可訪問性和可用性混淆的，后面查了相關資料，才發現這確實是2個不同的概念，所以想在文末解釋下可用性和可訪問性的區別。
可用性：產品是否容易上手，用戶能否完成任務，效率如何，以及這過程中用戶的主觀感受可好，是從用戶的角度來看產品的質量?？捎眯院靡馕吨a品質量高，是企業的核心競爭力。
可訪問性：Web內容對于殘障用戶的可閱讀和可理解性。
想進一步深入了解的話，有篇文章也可以推薦大家看看，可用性和可訪問性之間的差異是什么？https://www.jianshu.com/p/8a0cd5403ffc
譯者：彩云Sky，微信公眾號：彩云譯設計
本文由 @彩云Sky 翻譯發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 PEXELS，基于 CC0 協議
寫CSS的常用套路（下篇）...
點擊觀看——我寫CSS的常用套路（上篇）...
為盒子添加陰影，增加盒子的立體感，可以多層疊加，并且會使陰影更加絲滑
本demo地址：Pagination
注意到box-shadow還有個inset，用于盒子內部發光
利用這個特性我們可以在盒子內部的某個范圍內設定顏色，做出一個新月形
再加點動畫和濾鏡效果，“猩紅之月”閃亮登場！
注意到它散發著淡淡的紅光，其實就是2個偽元素應用了模糊濾鏡所產生的效果
本demo地址：Crimson Crescent Loading
文本陰影，本質上和box-shadow相同，只不過是相對于文本而言，常用于文本發光，也可通過多層疊加來制作霓虹文本和偽3D文本等效果
本demo地址：Staggered GlowIn Text
本demo地址：Neon Text
本demo地址：Staggered Bouncing 3D Loading
能將背景裁剪成文字的前景色，常用來和color: transparent配合生成漸變文本
本demo地址：Menu Hover Fill Text
漸變可以作為背景圖片的一種，具有很強的色彩效果，甚至可以用來模擬光
線性漸變是筆者最常用的漸變
這個作品用到了HTML的dialog標簽，線性漸變背景，動畫以及overflow障眼法，細心的你看出來了嗎:)
本demo地址：Confirm Modal
徑向漸變常用于生成圓形背景，上面例子中Snow的背景就是一個橢圓形的徑向漸變
此外，由于背景可以疊加，我們可以疊加多個不同位置大小的徑向漸變來生成圓點群，再加上動畫就產生了一種微粒效果，無需多余的div元素
本demo地址：Particle Button
圓錐漸變可以用于制作餅圖
用一個偽元素疊在餅圖上面，并將content設為某個值（這個值通過CSS變量計算出來），就能制作出度量計的效果，障眼法又一次完成了它的使命
本demo地址：Gauge (No SVG)
PS里的濾鏡，blur最常用
當blur濾鏡和contrast濾鏡一起使用時，會產生一種融合（gooey）的奇特效果
本demo地址：Snow Scratch
對背景應用濾鏡，產生毛玻璃的效果
本demo地址：Frosted Glass
PS里的混合模式，常用于文本在背景下的特殊效果
以下利用濾色模式（screen）實現文本視頻蒙版效果
本demo地址：Video Mask Text
PS里的裁切，可以制作各種不規則形狀。如果和動畫結合也會相當有意思
本demo地址：Name Card Hover Expand
由于clip-path有裁切功能，因此可以將多個文字疊在一起，并按比例裁切成多分，再應用交錯動畫，就能制作出酷炫的故障效果（glitch）。
本demo地址：Cross Bar Glitch Text
PS里的遮罩。所謂遮罩，就是原始圖片只顯示遮罩圖片非透明的部分
雖然clip-path能裁切出形狀，但它無法鏤空，因為形狀的里面它管不著
可能有人（包括我）會用偽元素來“模擬”鏤空（通過設置同樣的背景色），但這樣并非真的鏤空，換了個背景或浮在圖片上就會暴露出來，這時我們就要求助于遮罩了
假設，你想制作一個空心的圓環，那么你只需將一個徑向漸變作為元素的遮罩，并且第一個color-stop設置為透明，其他的color-stop設置為其他顏色即可，因為遮罩的定義就是只顯示遮罩圖片非透明的部分
注意：為了消除鋸齒，這個徑向漸變的中間需要有一個額外的color-stop用于緩沖，長度設置為原長度加0.5px即可
本demo地址：Circle Arrow Nav
投影效果，不怎么常用，適合立體感強的作品
本demo地址：Card Flip Reflection
雖然這并不是一個CSS特性，但是它經常用于完成那些CSS所做不到的事情
那么何時用它呢？當CSS動畫中有屬性無法從CSS中獲取時，自然就會使用到它了
目前CSS還尚未有獲取鼠標位置的API，因此考慮用JS來進行
通過查閱相關的DOM API，發現在監聽鼠標事件的API中，可通過e.clientX和e.clientY來獲得鼠標當前的位置
既然能夠獲取鼠標的位置，那么跟蹤鼠標的位置也就不是什么難事了：通過監聽mouseenter和mouseleave事件，來獲取鼠標出入一個元素時的位置，并用此坐標來當作鼠標的位移距離，監聽mousemove事件，來獲取鼠標在元素上移動時的位置，同樣地用此坐標來當作鼠標的位移距離，這樣一個跟蹤鼠標的效果就實現了
本demo地址：Menu Hover Image
CSS Houdini是CSS的底層API，它使我們能夠通過這套接口來擴展CSS的功能
目前來說，我們無法直接給漸變添加動畫，因為瀏覽器不理解要改變的值是什么類型
這時，我們就可以利用CSS.registerProperty()來注冊我們的自定義變量，并聲明其語法類型（syntax）為顏色類型<color>，這樣瀏覽器就能理解并對顏色應用插值方法來進行動畫
還記得上文提到的圓錐漸變conic-gradient()嗎？既然它可以用來制作餅圖，那么我們能不能讓餅圖動起來呢？答案是肯定的，定義三個變量：--color1、--color2和--pos，其中--pos的語法類型為長度百分比<length-percentage>，將其從0變為100%，餅圖就會順時針旋轉出現
利用絕對定位和層疊上下文，我們可以疊加多個從小到大的餅圖，再給它們設置不同的顏色，應用交錯動畫，就有了下面這個炫麗的效果
本demo地址：Mawaru
將交錯動畫和偽類偽元素結合起來寫出來的慎重勇者風格的菜單
本demo地址：Shinchou Menu
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
