現在該剪輯已被棄用，可以隱藏內容嗎？

目前我正在使用下面的代碼來隱藏內容可訪問性。但是，根據MDN，clip屬性已被棄用，並將被刪除。現在該剪輯已被棄用，可以隱藏內容嗎？

border: 0; 
    clip: rect(0 0 0 0); 
    height: 1px; 
    margin: -1px; 
    overflow: hidden; 
    padding: 0; 
    position: absolute; 
    width: 1px;

現在最好的隱藏內容的最佳做法是什麼？

來源

2016-01-11 chap

你可以用'顯示：none'和'知名度：hidden'隱藏元素。 – ketan

'display：none'通常會隱藏來自屏幕閱讀器的內容，在某些情況下您不希望這樣做。 – Matt

您可以使用clip-path適當供應商前綴，與clip作爲後備一起，因爲clip-path如圖Can I Use沒有在這個時候所有的瀏覽器都支持。

的CSS會是這個樣子：

.offscreen { 
    position: absolute; 
    height: 1px; 
    width: 1px; 
    clip: rect(1px 1px 1px 1px); 
    clip: rect(1px,1px,1px,1px); 
    clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px); 
    -webkit-clip-path: polygon(0px 0px, 0px 0px,0px 0px, 0px 0px); 
    overflow: hidden!important; 
}

我還添加了一個codepen爲你see it in action。

來源

2016-01-11 14:13:01 Matt

opacity: 0 
height: 0 
height: 0;

如果您不希望元素從屏幕閱讀器中消失，將會執行此操作。

你也可能需要使用

margin: 0; 
padding: 0;

防止間距誤差。

剛纔看到caniuse在Matt's answer，以及不透明度將always work:P

來源

2016-01-11 14:17:53

現在該剪輯已被棄用，可以隱藏內容嗎？

回答

相關問題