按鈕樣式的正確方式

DataPipeline 發布于2019-08-29 15:31 / 2271人閱讀

摘要：按鈕樣式的正確方式如果你正在建立一個網站或一個應用，你可能會用到按鈕，也許看起來像按鈕的鏈接。這是我們想要做的事情可應用于鏈接或按鈕的按鈕樣式我們希望有選擇地應用它，因為我們的頁面中會有其他鏈接和按鈕樣式。

按鈕樣式的正確方式

如果你正在建立一個網站或一個web應用，你可能會用到按鈕，也許看起來像按鈕的鏈接。不管怎樣，讓這些正常展示是很重要的。

在本教程中，我們將為和 編寫一個“button”CSS組件

現在我們已經刪除了默認樣式，讓我們定義我們自己的按鈕樣式。這是我們想要做的事情：

可應用于鏈接或按鈕的“按鈕”樣式;

我們希望有選擇地應用它，因為我們的頁面中會有其他鏈接和按鈕樣式。

這需要一個CSS組件。 CSS組件是一種風格或樣式集合，我們可以使用類來應用，通常在幾種不同類型的HTML元素之上。您可能熟悉Bootstrap或Foundation等CSS框架中的這個概念。

我們將這個組件稱為.btn（就像Bootstrap一樣，但我們只設置顏色和大小，以保持簡單）。

.btn {
  /* default for

以下是我們的按鈕組件的外觀：

你可能想知道為什么差別這么明顯。第二行按鈕看起來就不錯，誰不喜歡柔和的外觀？

懸停(hover)，焦點(focus)和活動(active)樣式

很酷，你的按鈕看起來不錯，但是...用戶將與它進行交互，并且當按鈕的狀態改變時，他們需要視覺反饋。

瀏覽器為“focus”和“active”（即按下）狀態設置了默認樣式，但通過重置按鈕樣式我們已經刪除了其中的一些。我們還希望為鼠標懸停設置樣式，總體而言，我們希望可見的樣式與我們的設計相匹配。

讓我們從以下主題開始：活動狀態，即按鈕或者鏈接被點擊：

/* 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;
}

現在讓我們添加一些焦點樣式。您的網站或網絡應用程序的用戶可以使用鍵盤或虛擬鍵盤（在iOS和Android上）“”并激活表單域，按鈕，鏈接和其他交互元素。

對于一些用戶來說，它可以加速緩慢的交互，比如填寫表單。

對于其他人來說，使用鼠標或觸摸指針是不可能的或困難的。他們依靠使用鍵盤或專用設備訪問網站。

在我見過的大多數Web項目中，設計師都指定了預期的鼠標移過樣式，但未指定焦點樣式。我們應該做什么？一個簡單的解決方案是重用：hover風格作為我們的focus風格：

/* 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;
}

在這里嘗試一下; 如果您在桌面計算機上，請使用Tab和Shift + Tab鍵在按鈕之間導航：

處理focus樣式

還有一個棘手的問題。在多個瀏覽器中，當您單擊鏈接或按鈕時，將應用兩個偽類：

:active

:focus

一旦停止按下鼠標按鈕或觸控板，“active”偽類就會停止應用。但在某些瀏覽器中，focus樣式會一直保留，直到用戶點擊頁面上的其他內容為止。

在我的測試中，受影響的瀏覽器包括Chrome（66），Edge（16）和Firefox（60，僅用于鏈接）。 Safari（11.1）似乎更聰明并避免了這個問題。

我們可以使用新的： :focus-visible偽類（草稿規范）來解決此問題。這個功能還沒有完全指定，但想法是瀏覽器只能在鍵盤或類似鍵盤的交互之后設置： :focus-visible，而不是點擊。

由于它尚未被瀏覽器實現，我們將不得不使用JavaScript實現，比如有些polyfill。它在整個頁面上運行，并且僅在使用鍵盤時才將焦點可見的類設置為接收焦點的元素。

讓我們改變我們的樣式來解耦：hover和：focus樣式：

/* 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);
}

現在，在我們的頁面中包含focus-visible.js腳本后，它會為元素添加一個js-focus-visible類。我們可以使用它來從沒有焦點可見類的焦點元素中移除焦點樣式：

/* hide focus style if not from keyboard navigation */
.js-focus-visible .btn:focus:not(.focus-visible) {
  box-shadow: none;
}

一個更簡單的解決方案是只為focus-visible類聲明焦點樣式，但如果polyfill不是活動的（例如，如果我們的JS未能加載），則會中斷焦點樣式。

關注我的微信公眾號，更多優質文章定時推送

GPU云服務器云服務器自定義按鈕樣式按鈕樣式html php 按鈕樣式 asp 按鈕樣式

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113372.html

HTML編碼規范建議

摘要：示例強制對中規定允許省略的閉合標簽，不允許省略閉合標簽。示例圖片強制禁止的取值為空。示例提交取消取消提交建議當使用進行表單提交時，如果條件允許，應使原生提交功能正常工作。示例建議模板代碼應以保證單個標簽語法的正確性為基本原則。這段時間在整理前端部分代碼規范，初步想法是從HTML、CSS、Javascipt、項目文件目錄四部分是整理。之前已經整理完了CSS編碼規范，有興趣可以了解下 1...

sunnyxd 2019-08-01 17:02 評論0 收藏0
HTML表單（來自MDN的總結）

摘要：多個標簽原生表單部件通用屬性默認這個布爾屬性允許您指定當頁面加載時元素應該自動具有輸入焦點，除非用戶覆蓋它，例如通過鍵入不同的控件。元素的名稱這是用于表單數據提交的。到目前為止，表單是最常見的攻擊媒介可能發生攻擊的地方。表單介紹 HTML表單是用戶和web站點或應用程序之間交互的主要內容之一。它們允許用戶將數據發送到web站點。大多數情況下，數據被發送到web服務器，但是web頁面也...

JouyPub 2019-08-02 11:15 評論0 收藏0
HTML編碼規范

摘要：示例強制禁止為了腳本，創建無樣式信息的。示例強制對中規定允許省略的閉合標簽，不允許省略閉合標簽。指定字符編碼的必須是的第一個直接子元素。示例提交取消取消提交建議當使用進行表單提交時，如果條件允許，應使原生提交功能正常工作。轉載：原地址 1 前言 HTML作為描述網頁結構的超文本標記語言，在百度一直有著廣泛的應用。本文檔的目標是使HTML代碼風格保持一致，容易被理解和被維護。 2 代碼...

bang590 2019-08-01 14:43 評論0 收藏0
9：瀏覽器兼容

摘要：由和開發的瀏覽器排版引擎，年月發布。瀏覽器的兼容問題是我們必須去克服的。表示過濾器的意思，它是一種對特定的瀏覽器或瀏覽器組顯示或隱藏規則或聲明的方法。? 9：瀏覽器兼容常見的主流瀏覽器 1）主流瀏覽器 Internet Explorer、 Safari、Mozilla Firefox、 Google Chrome、Opera、百度、360、搜狗、傲游 2）最早的瀏覽器 : Mosaic ...

AWang 2019-04-23 13:33 評論0 收藏0