싱기한 css들 본문

code/HTML & css

싱기한 css들

남우p 2022. 10. 14. 16:46
html {-webkit-text-size-adjust:100%;}

[모바일] 특정  device에서 글자가 크게 보이는 경우.

비표준 속성이므로 벤더 프리픽스 사용

 

* {text-decoration-skip-ink:auto;}

 

위 아래 높낮이가 있는 글자에 밑줄을 그을 때

아래로 내려오는 글자를 무시하고 선을 그을 것인가(none),

아래로 내려오는 글자를 피해서 선을 그을 것인가(auto)

 

*{-webkit-tap-highlight-color:transparent;}

해당 요소에 focusing이 될 때, 하이라이트 색상

비표준 속성이므로 벤더 프리픽스 사용

 

.ellipsis {
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    text-overflow:ellipsis;
    white-space:normal;
    overflow:hidden;
}

2줄 ellipsis. 

2줄 이상의 글자가 들어가야 되는데, 공간이 모자라면

마지막에 (...)으로 표시해주는 기본 공식.

* {-webkit-overflow-scrolling:touch;}

auto : 손가락을 화면에서 떼면 바로 스크롤을 멈춘다.

touch : 손가락의 스피드와 머문 시간 등을 고려해 추가로 스크롤 할지 결정해준다.

비표준 속성이므로 벤더 프리픽스 사용.

@media (prefers-color-scheme:dark){}

다크모드 media query

 

'code > HTML & css' 카테고리의 다른 글

contenteditable : 편집이 가능한 div  (0) 2022.12.02
[css] grid 정리  (0) 2022.11.04
[css] iphone-x 대응  (0) 2022.11.04
[CSS] pointer-events 속성  (0) 2022.05.14
[css] object-fit :이미지를 background처럼  (0) 2022.05.07
Comments