css 隐藏视觉HTML5 BP样式

Posted 2021-05-13

// Accessibly hide things

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */

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

.visuallyhidden(@focusable) when (@focusable){ 
	border: 0; 
	clip: rect(0 0 0 0); 
	height: 1px; 
	margin: -1px; 
	overflow: hidden; 
	padding: 0; 
	position: absolute; 
	width: 1px; 
    &:active,
    &:focus {
        clip: auto; 
		height: auto; 
		margin: 0; 
		overflow: visible; 
		position: static; 
		width: auto; 
    }
}

	
	/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
	.visuallyhidden { 
		border: 0; 
		clip: rect(0 0 0 0); 
		height: 1px; 
		margin: -1px; 
		overflow: hidden; 
		padding: 0; 
		position: absolute; 
		width: 1px; 
	}

	/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
	.visuallyhidden.focusable:active, 
	.visuallyhidden.focusable:focus { 
		clip: auto; 
		height: auto; 
		margin: 0; 
		overflow: visible; 
		position: static; 
		width: auto; 
		
	}