国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

常用瀏覽器私有屬性小記

taohonghui / 2627人閱讀

摘要：在上，當(dāng)你觸摸并按住觸摸的目標(biāo)，比如一個(gè)鏈接，瀏覽器將顯示鏈接有關(guān)的系統(tǒng)默認(rèn)菜單。主要用在和標(biāo)簽上。特別適合彈窗的背景層應(yīng)用，顯示的更加之有層次感的一些更新禁止縮放，不再支持需要監(jiān)聽(tīng)來(lái)實(shí)現(xiàn)禁止縮放相關(guān)鏈接去除側(cè)邊的叉叉

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

general 去除 select 表單右側(cè)箭頭 
select {
    /*for firefox*/
    -moz-appearance: none;
    /*for chrome*/
    -webkit-appearance:none;
  }

/*for IE10*/
select::-ms-expand {
    display: none;
}
禁用選擇文本

這個(gè)就是光標(biāo)由輸入改為普通箭頭

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

/* 一種實(shí)踐，避免了非輸入類的user-select */
*:not(input):not(textarea) {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}
更改選中默認(rèn)顏色 
::-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的私有屬性的，可以來(lái)這里，是由攜程UED收集維護(hù)的~

假滑動(dòng)效果

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

剛好看到這樣一個(gè)提問(wèn)，才發(fā)現(xiàn)-webkit-下有這樣的應(yīng)用，直接把scrollbal隱藏掉，這樣就形成了偽滑動(dòng)效果了，之前我的做法是外面再包一層overflow以防看到滾動(dòng)條，不過(guò)這個(gè)的話是-webkit-下的呢~

::-webkit-scrollbar {
    display: none;
}
自定義input

當(dāng)應(yīng)用此樣式時(shí)，input都會(huì)失去瀏覽器默認(rèn)表現(xiàn)，可以自行定義

input { -webkit-appearance: none; }
Mac OS下的button

Mac OS下的button會(huì)優(yōu)先使用默認(rèn)的尺寸，即使你設(shè)置了，也是無(wú)效的，因此需要重置下

button { -webkit-appearance: button; } /* none亦可 */
清除input[type="number"]側(cè)邊的箭頭 
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button { -webkit-appearance: none; }
去除點(diǎn)擊鏈接或者JavaScript可點(diǎn)元素時(shí)的高亮效果 
a {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent; /* 考慮到兼容問(wèn)題，所以寫(xiě)兩個(gè)上去，針對(duì)Android的 */
}
iOS 禁止或顯示系統(tǒng)默認(rèn)菜單

當(dāng)你觸摸并按住觸摸目標(biāo)時(shí)候，禁止或顯示系統(tǒng)默認(rèn)菜單。在iOS上，當(dāng)你觸摸并按住觸摸的目標(biāo)，比如一個(gè)鏈接，Safari瀏覽器將顯示鏈接有關(guān)的系統(tǒng)默認(rèn)菜單。這個(gè)屬性可以讓你禁用系統(tǒng)默認(rèn)菜單。

主要用在img和a標(biāo)簽上。

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

這個(gè)沒(méi)想好怎么解釋，直接看范例

背景虛化

詳細(xì)介紹，請(qǐng)查看大漠博客

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

.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不再支持

需要監(jiān)聽(tīng)touchmove來(lái)實(shí)現(xiàn)禁止縮放

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

相關(guān)鏈接：Disable viewport zooming iOS 10 safari?

-moz- -ms- 去除側(cè)邊的叉叉 
::-ms-clear { display: none; }
::-ms-reveal { display: none; }

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/49704.html

相關(guān)文章

  • 常用瀏覽器私有屬性小記

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

    李濤 評(píng)論0 收藏0

  • web開(kāi)發(fā)小記1：谷歌字體

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

    dkzwm 評(píng)論0 收藏0

  • JDK1.8 ArrayList部分源碼分析小記

    摘要：部分源碼分析小記底層數(shù)據(jù)結(jié)構(gòu)底層的數(shù)據(jù)結(jié)構(gòu)就是數(shù)組，數(shù)組元素類型為類型，即可以存放所有類型數(shù)據(jù)。初始容量大于初始化元素?cái)?shù)組新建一個(gè)數(shù)組初始容量為為空對(duì)象數(shù)組初始容量小于，拋出異常無(wú)參構(gòu)造函數(shù)。 JDK1.8 ArrayList部分源碼分析小記 底層數(shù)據(jù)結(jié)構(gòu) 底層的數(shù)據(jù)結(jié)構(gòu)就是數(shù)組，數(shù)組元素類型為Object類型，即可以存放所有類型數(shù)據(jù)。我們對(duì)ArrayList類的實(shí)例的所有的操作底層都...

    王軍 評(píng)論0 收藏0

  • 小記--獲取url鍵值

    摘要：以后會(huì)不定期把項(xiàng)目中用到的也是我們平時(shí)開(kāi)發(fā)常用的一些方法貼出來(lái)，也是一個(gè)自我總結(jié)的過(guò)程獲取鍵值是我們?cè)陧?xiàng)目會(huì)經(jīng)常遇到的需求。 以后會(huì)不定期把項(xiàng)目中用到的也是我們平時(shí)開(kāi)發(fā)常用的一些方法貼出來(lái)，也是一個(gè)自我總結(jié)的過(guò)程 獲取url鍵值是我們?cè)陧?xiàng)目會(huì)經(jīng)常遇到的需求。下面是我在項(xiàng)目中封裝的方法，詳細(xì)的說(shuō)明在代碼都有注釋。 /** * 獲取url鍵值 * url => [href] | [pa...

    galaxy_robot 評(píng)論0 收藏0

  • JavaScript & jQuery 常用方法小記

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

    codeGoogle 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<