資訊專欄INFORMATION COLUMN
摘要：按鈕樣式的正確方式如果你正在建立一個(gè)網(wǎng)站或一個(gè)應(yīng)用，你可能會(huì)用到按鈕，也許看起來(lái)像按鈕的鏈接。這是我們想要做的事情可應(yīng)用于鏈接或按鈕的按鈕樣式我們希望有選擇地應(yīng)用它，因?yàn)槲覀兊捻?yè)面中會(huì)有其他鏈接和按鈕樣式。
按鈕樣式的正確方式
如果你正在建立一個(gè)網(wǎng)站或一個(gè)web應(yīng)用，你可能會(huì)用到按鈕，也許看起來(lái)像按鈕的鏈接。不管怎樣，讓這些正常展示是很重要的。
在本教程中，我們將為和元素以及一個(gè)自定義.btn的CSS組件創(chuàng)建基本樣式。 你會(huì)在這個(gè)過(guò)程的每一步中找到一個(gè)演示頁(yè)面。
重置通常，網(wǎng)站或應(yīng)用程序中可點(diǎn)擊事件的99.9％的元素應(yīng)該是或元素。 如果您不確定在給定情況下使用什么元素：
如果它轉(zhuǎn)到其他網(wǎng)址或更改了網(wǎng)頁(yè)的大部分內(nèi)容，請(qǐng)使用鏈接（ ... ）。
否則，請(qǐng)使用通用按鈕（）。
使用正確的元素有幾個(gè)優(yōu)點(diǎn)：它對(duì)搜索引擎友好（尤其是鏈接?。m用于鍵盤導(dǎo)航，它提高了所有用戶的可訪問(wèn)性。
盡管如此，開(kāi)發(fā)人員很少使用元素。 在整個(gè)Web上，我們可以看到很多觸發(fā)JavaScript操作的按鈕，仔細(xì)檢查后發(fā)現(xiàn)它們是用 為什么元素如此不受待見(jiàn)？ 知識(shí)點(diǎn)：許多開(kāi)發(fā)人員不知道它（學(xué)習(xí)100+HTML元素需要一點(diǎn)時(shí)間）。 樣式上：附帶復(fù)雜的默認(rèn)樣式，這可能很難實(shí)現(xiàn)自定義外觀。 幸運(yùn)的是，樣式部分可以北修復(fù)！ 我們最終得到的按鈕是類似普通文本的。 這種方法的缺點(diǎn)是，現(xiàn)在我們必須對(duì)所有按鈕進(jìn)行樣式設(shè)置，否則用戶將無(wú)法識(shí)別它們。 另一個(gè)選擇是使用這種風(fēng)格作為mixin（使用Sass或其他預(yù)處理器）并選擇性地應(yīng)用它： 現(xiàn)在我們已經(jīng)刪除了默認(rèn)樣式，讓我們定義我們自己的按鈕樣式。 這是我們想要做的事情： 可應(yīng)用于鏈接或按鈕的“按鈕”樣式; 我們希望有選擇地應(yīng)用它，因?yàn)槲覀兊捻?yè)面中會(huì)有其他鏈接和按鈕樣式。 這需要一個(gè)CSS組件。 CSS組件是一種風(fēng)格或樣式集合，我們可以使用類來(lái)應(yīng)用，通常在幾種不同類型的HTML元素之上。 您可能熟悉Bootstrap或Foundation等CSS框架中的這個(gè)概念。 我們將這個(gè)組件稱為.btn（就像Bootstrap一樣，但我們只設(shè)置顏色和大小，以保持簡(jiǎn)單）。 以下是我們的按鈕組件的外觀： 你可能想知道為什么差別這么明顯。第二行按鈕看起來(lái)就不錯(cuò)，誰(shuí)不喜歡柔和的外觀？ 很酷，你的按鈕看起來(lái)不錯(cuò)，但是...用戶將與它進(jìn)行交互，并且當(dāng)按鈕的狀態(tài)改變時(shí)，他們需要視覺(jué)反饋。 瀏覽器為“focus”和“active”（即按下）狀態(tài)設(shè)置了默認(rèn)樣式，但通過(guò)重置按鈕樣式我們已經(jīng)刪除了其中的一些。 我們還希望為鼠標(biāo)懸停設(shè)置樣式，總體而言，我們希望可見(jiàn)的樣式與我們的設(shè)計(jì)相匹配。 讓我們從以下主題開(kāi)始：活動(dòng)狀態(tài)，即按鈕或者鏈接被點(diǎn)擊： 我們可以更改按鈕的顏色，但我想為我們的鼠標(biāo)懸停式樣保留這種效果： 現(xiàn)在讓我們添加一些焦點(diǎn)樣式。 您的網(wǎng)站或網(wǎng)絡(luò)應(yīng)用程序的用戶可以使用鍵盤或虛擬鍵盤（在iOS和Android上）“”并激活表單域，按鈕，鏈接和其他交互元素。 對(duì)于一些用戶來(lái)說(shuō)，它可以加速緩慢的交互，比如填寫表單。 對(duì)于其他人來(lái)說(shuō)，使用鼠標(biāo)或觸摸指針是不可能的或困難的。 他們依靠使用鍵盤或?qū)Ｓ迷O(shè)備訪問(wèn)網(wǎng)站。 在我見(jiàn)過(guò)的大多數(shù)Web項(xiàng)目中，設(shè)計(jì)師都指定了預(yù)期的鼠標(biāo)移過(guò)樣式，但未指定焦點(diǎn)樣式。 我們應(yīng)該做什么？ 一個(gè)簡(jiǎn)單的解決方案是重用：hover風(fēng)格作為我們的focus風(fēng)格： 一旦你有了這種可見(jiàn)的對(duì)焦風(fēng)格（而不是之前?。?，你可能想要?jiǎng)h除瀏覽器的按鈕的默認(rèn)樣式： 在這里嘗試一下; 如果您在桌面計(jì)算機(jī)上，請(qǐng)使用Tab和Shift + Tab鍵在按鈕之間導(dǎo)航： 還有一個(gè)棘手的問(wèn)題。 在多個(gè)瀏覽器中，當(dāng)您單擊鏈接或按鈕時(shí)，將應(yīng)用兩個(gè)偽類： :active :focus 一旦停止按下鼠標(biāo)按鈕或觸控板，“active”偽類就會(huì)停止應(yīng)用。 但在某些瀏覽器中，focus樣式會(huì)一直保留，直到用戶點(diǎn)擊頁(yè)面上的其他內(nèi)容為止。 在我的測(cè)試中，受影響的瀏覽器包括Chrome（66），Edge（16）和Firefox（60，僅用于鏈接）。 Safari（11.1）似乎更聰明并避免了這個(gè)問(wèn)題。 我們可以使用新的： :focus-visible偽類（草稿規(guī)范）來(lái)解決此問(wèn)題。 這個(gè)功能還沒(méi)有完全指定，但想法是瀏覽器只能在鍵盤或類似鍵盤的交互之后設(shè)置： :focus-visible，而不是點(diǎn)擊。 由于它尚未被瀏覽器實(shí)現(xiàn)，我們將不得不使用JavaScript實(shí)現(xiàn)，比如有些polyfill。 它在整個(gè)頁(yè)面上運(yùn)行，并且僅在使用鍵盤時(shí)才將焦點(diǎn)可見(jiàn)的類設(shè)置為接收焦點(diǎn)的元素。 讓我們改變我們的樣式來(lái)解耦：hover和：focus樣式： 現(xiàn)在，在我們的頁(yè)面中包含focus-visible.js腳本后，它會(huì)為 一個(gè)更簡(jiǎn)單的解決方案是只為focus-visible類聲明焦點(diǎn)樣式，但如果polyfill不是活動(dòng)的（例如，如果我們的JS未能加載），則會(huì)中斷焦點(diǎn)樣式。 關(guān)注我的微信公眾號(hào)，更多優(yōu)質(zhì)文章定時(shí)推送 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/113372.html，或編碼的。
/**
* Reset button styles.
* It takes a bit of work to achieve a neutral look.
*/
button {
padding: 0;
border: none;
font: inherit;
color: inherit;
background-color: transparent;
/* show a hand cursor on hover; some argue that we
should keep the default arrow cursor for buttons */
cursor: pointer;
}
@mixin button-reset {
padding: 0;
border: none;
font: inherit;
color: inherit;
background-color: transparent;
cursor: pointer;
}
.my-custom-button {
@include button-reset;
padding: 10px;
background-color: skyblue;
}
編寫一個(gè)“button”CSS組件
.btn {
/* default for
/* old-school "down" effect on clic + color tweak */
.btn:active {
transform: translateY(1px);
filter: saturate(150%);
}
/* inverse colors on mouse-over */
.btn:hover {
color: #9555af;
border-color: currentColor;
background-color: white;
}
/* inverse colors on mouse-over and focus */
.btn:hover,
.btn:focus {
color: #9555af;
border-color: currentColor;
background-color: white;
}
.btn {
/* ... */
/* all browsers: remove the default outline since
we are rolling our own focus styles */
outline: none;
}
/* Firefox: removes the inner border shown on focus */
.btn::-moz-focus-inner {
border: none;
}
/* inverse colors on hover */
.btn:hover {
color: #9050AA;
border-color: currentColor;
background-color: white;
}
/* make sure we have a visible focus ring */
.btn:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 105, 180, 0.5),
0 0 0 1.5px rgba(255, 105, 180, 0.5);
}
/* hide focus style if not from keyboard navigation */
.js-focus-visible .btn:focus:not(.focus-visible) {
box-shadow: none;
}
摘要：示例強(qiáng)制對(duì)中規(guī)定允許省略的閉合標(biāo)簽，不允許省略閉合標(biāo)簽。示例圖片強(qiáng)制禁止的取值為空。示例提交取消取消提交建議當(dāng)使用進(jìn)行表單提交時(shí)，如果條件允許，應(yīng)使原生提交功能正常工作。示例建議模板代碼應(yīng)以保證單個(gè)標(biāo)簽語(yǔ)法的正確性為基本原則。 這段時(shí)間在整理前端部分代碼規(guī)范，初步想法是從HTML、CSS、Javascipt、項(xiàng)目文件目錄四部分是整理。之前已經(jīng)整理完了CSS編碼規(guī)范，有興趣可以了解下 1...
摘要：多個(gè)標(biāo)簽原生表單部件通用屬性默認(rèn)這個(gè)布爾屬性允許您指定當(dāng)頁(yè)面加載時(shí)元素應(yīng)該自動(dòng)具有輸入焦點(diǎn)，除非用戶覆蓋它，例如通過(guò)鍵入不同的控件。元素的名稱這是用于表單數(shù)據(jù)提交的。到目前為止，表單是最常見(jiàn)的攻擊媒介可能發(fā)生攻擊的地方。 表單介紹 HTML表單是用戶和web站點(diǎn)或應(yīng)用程序之間交互的主要內(nèi)容之一。它們?cè)试S用戶將數(shù)據(jù)發(fā)送到web站點(diǎn)。大多數(shù)情況下，數(shù)據(jù)被發(fā)送到web服務(wù)器，但是web頁(yè)面也...
摘要：示例強(qiáng)制禁止為了腳本，創(chuàng)建無(wú)樣式信息的。示例強(qiáng)制對(duì)中規(guī)定允許省略的閉合標(biāo)簽，不允許省略閉合標(biāo)簽。指定字符編碼的必須是的第一個(gè)直接子元素。示例提交取消取消提交建議當(dāng)使用進(jìn)行表單提交時(shí)，如果條件允許，應(yīng)使原生提交功能正常工作。 轉(zhuǎn)載：原地址 1 前言 HTML作為描述網(wǎng)頁(yè)結(jié)構(gòu)的超文本標(biāo)記語(yǔ)言，在百度一直有著廣泛的應(yīng)用。本文檔的目標(biāo)是使HTML代碼風(fēng)格保持一致，容易被理解和被維護(hù)。 2 代碼...
閱讀 1330·2023-04-25 17:05
閱讀 3082·2021-11-19 09:40
閱讀 3838·2021-11-18 10:02
閱讀 1823·2021-09-23 11:45
閱讀 3094·2021-08-20 09:36
閱讀 2850·2021-08-13 15:07
閱讀 1206·2019-08-30 15:55
閱讀 2542·2019-08-30 14:11
