常用瀏覽器私有屬性小記

李濤發布于2019-08-28 18:28 / 2861人閱讀

摘要：在上，當你觸摸并按住觸摸的目標，比如一個鏈接，瀏覽器將顯示鏈接有關的系統默認菜單。主要用在和標簽上。特別適合彈窗的背景層應用，顯示的更加之有層次感的一些更新禁止縮放，不再支持需要監聽來實現禁止縮放相關鏈接去除側邊的叉叉

把日常工作中使用率較高的記錄下來，如果想看更全的可以看這個偽元素表單控件默認樣式重置與自定義大全

general 去除 select 表單右側箭頭

select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
  }

/*for IE10*/
select::-ms-expand {
    display: none;
}

禁用選擇文本

這個就是光標由輸入改為普通箭頭

* {
-webkit-user-select: none;
   -moz-user-select: none;
    -ms-user-select: none;
        user-select: none;
}

/* 一種實踐，避免了非輸入類的user-select */
*:not(input):not(textarea) {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

更改選中默認顏色

::-webkit-selection {
    background: #d3d3d3; 
    color: #555;
}
::-moz-selection {
    background: #d3d3d3; 
    color: #555;
}
::selection {
    background: #d3d3d3; 
    color: #555;
}

https://jsfiddle.net/lyplba/9...

更改輸入框文字placeholder顏色

::-webkit-input-placeholder {
    color: purple;
}

::-moz-input-placeholder {
    color: purple;
}

::-ms-input-placeholder {
    color: purple;
}

::input-placeholder {
    color: purple;
}

https://jsfiddle.net/lyplba/y...

-webkit-

想更多了解webkit的私有屬性的，可以來這里，是由攜程UED收集維護的~

假滑動效果

http://3g.163.com/touch/news/...

剛好看到這樣一個提問，才發現-webkit-下有這樣的應用，直接把scrollbal隱藏掉，這樣就形成了偽滑動效果了，之前我的做法是外面再包一層overflow以防看到滾動條，不過這個的話是-webkit-下的呢~

::-webkit-scrollbar {
    display: none;
}

自定義input

當應用此樣式時，input都會失去瀏覽器默認表現，可以自行定義

input { -webkit-appearance: none; }

Mac OS下的button

Mac OS下的button會優先使用默認的尺寸，即使你設置了，也是無效的，因此需要重置下

button { -webkit-appearance: button; } /* none亦可 */

清除input[type="number"]側邊的箭頭

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; }

去除點擊鏈接或者JavaScript可點元素時的高亮效果

a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; /* 考慮到兼容問題，所以寫兩個上去，針對Android的 */
}

iOS 禁止或顯示系統默認菜單

當你觸摸并按住觸摸目標時候，禁止或顯示系統默認菜單。在iOS上，當你觸摸并按住觸摸的目標，比如一個鏈接，Safari瀏覽器將顯示鏈接有關的系統默認菜單。這個屬性可以讓你禁用系統默認菜單。

主要用在img和a標簽上。

img, a {
    -webkit-touch-callout: none;
}

-webkit-overflow-scrolling

這個沒想好怎么解釋，直接看范例

背景虛化

詳細介紹，請查看大漠博客

此屬性目前是在iOS 9 以及 Mac Safari下可見該效果，可以作為一種漸進增強的效果，提升體驗之用，效果很不錯，相較于-webkit-filter以及我們傳統的增加mask或者overlay黑色背景層這種方式有很大的提升。
特別適合彈窗的背景層應用，顯示的更加之有層次感！

.backdrop {
    -webkit-backdrop-filter: blur(5px);
            backdrop-filter: blur(5px);
            
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9999;
}

iOS10的一些更新 禁止縮放，meta不再支持

需要監聽touchmove來實現禁止縮放

document.addEventListener("touchmove", function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
        event.preventDefault();
    }
}, false);

相關鏈接：Disable viewport zooming iOS 10 safari?

-moz- -ms- 去除側邊的叉叉

::-ms-clear { display: none; }
::-ms-reveal { display: none; }

云服務器 GPU云服務器私有屬性訪問私有屬性 php類私有屬性 java私有屬性成員

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

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

常用瀏覽器私有屬性小記

摘要：在上，當你觸摸并按住觸摸的目標，比如一個鏈接，瀏覽器將顯示鏈接有關的系統默認菜單。主要用在和標簽上。特別適合彈窗的背景層應用，顯示的更加之有層次感的一些更新禁止縮放，不再支持需要監聽來實現禁止縮放相關鏈接去除側邊的叉叉把日常工作中使用率較高的記錄下來，如果想看更全的可以看這個偽元素表單控件默認樣式重置與自定義大全 general 去除 select 表單右側箭頭 select { ...

taohonghui 2019-08-01 15:00 評論0 收藏0
web開發小記1：谷歌字體

摘要：標簽今天開發的時候，遇到一個問題，就是在谷歌瀏覽器上發現使用設置字體的大小時候，在字體小于的時候，不起作用。標簽： web 今天開發的時候，遇到一個問題，就是在谷歌瀏覽器上發現使用font-size設置字體的大小時候，在字體小于12px的時候，不起作用。具體解決方案如下：在一些老版本的谷歌瀏覽器中：可以用Chrome的私有屬性禁用瀏覽器文字大小調整的功能 -webkit-text-...

dkzwm 2019-08-29 11:06 評論0 收藏0
JDK1.8 ArrayList部分源碼分析小記

摘要：部分源碼分析小記底層數據結構底層的數據結構就是數組，數組元素類型為類型，即可以存放所有類型數據。初始容量大于初始化元素數組新建一個數組初始容量為為空對象數組初始容量小于，拋出異常無參構造函數。 JDK1.8 ArrayList部分源碼分析小記底層數據結構底層的數據結構就是數組，數組元素類型為Object類型，即可以存放所有類型數據。我們對ArrayList類的實例的所有的操作底層都...

王軍 2019-08-15 11:56 評論0 收藏0
小記--獲取url鍵值

摘要：以后會不定期把項目中用到的也是我們平時開發常用的一些方法貼出來，也是一個自我總結的過程獲取鍵值是我們在項目會經常遇到的需求。以后會不定期把項目中用到的也是我們平時開發常用的一些方法貼出來，也是一個自我總結的過程獲取url鍵值是我們在項目會經常遇到的需求。下面是我在項目中封裝的方法，詳細的說明在代碼都有注釋。 /** * 獲取url鍵值 * url => [href] | [pa...

galaxy_robot 2019-08-21 17:58 評論0 收藏0
JavaScript & jQuery 常用方法小記

摘要：函數節流用途如調整瀏覽器大小，或者用戶輸入信息，導致反復提交接口調用方法判斷手機端訪問獲取地址欄參數返回頂部當滾動條的位置處于距頂部像素以下時，跳轉鏈接出現，否則消失當點擊跳轉鏈接后，回到頁面頂部位置正則檢測手機號郵箱 1.JavaScript 函數節流用途：如調整瀏覽器大小，或者用戶輸入信息，導致反復提交接口 function throttle(method,context) { ...

codeGoogle 2019-08-21 10:31 評論0 收藏0