포켓몬(Android 4.4 이상) 덕분에 CSS 5는 정식 해금

5296 단어 CSS
Pokemon Go 모 애플리케이션, 안드로이드 4 덕분이다.미달 4는 실질적으로 지원 대상에서 벗어났다(이렇게 하세요)
이렇게 해서 드디어 정상적으로 사용할 수 있게 되었습니다!!!나는 다섯 개의 CSS가 있기 때문에 그 생각을 서술하는 길이가 길다고 생각한다.

1. Viewport units(vw,vh,vmin,vmax)


http://caniuse.com/#feat=viewport-units
수직/가로 뷰 포트 길이 단위.
장치의 화면 크기에 따라 길이를 지정할 수 있습니다.
ex)1vh는 시야 포트 높이의 1%입니다.
유닛
vh (viewport high)
뷰 포트 높이의 1/100
vw (viewport widht)
뷰 포트 너비의 1/100
vmin (viewport minimum)
뷰 포트 높이 또는 너비가 작은 1/100
vmax (viewport max)
뷰 포트 높이 또는 너비가 작은 1/100
특정 컨텐트를 첫 번째 시야에 표시하고 싶을 때는 지금까지 JS를 훑어봤다.하이트인가요?인너 하이트인가요?아니면 스크린?height?조사하면서 화면 크기를 확보하면서 도로를 못 본 척 삐걱삐걱 움직이는 모습vh 하나면 해결된다.%도 좋지만 부모 요소의 높이에 따라 계산되기 때문에 반드시 시야 포트의 사이즈와 일치하지는 않는다.기대만큼 일치하지 않았다거나.

2. CSS background-position edge offsets


http://caniuse.com/#feat=css-background-offsets
background-position의 편향 기법.
"오른쪽에서 5px, 아래에서 5px"처럼 오른쪽 아래를 기준으로 설정할 수 있습니다.
background-position: right 5px bottom 5px; 
치명적이지는 않지만 가변 포석을 할 때 제대로 배치하지 못해 구출됐다.right bottom 대체할 수 있을 것 같다. 백그라운드-size로 상대치를 넣으면 미묘한 설정이 될 수 있고flidgrid/image는 일반화되지만 이런 부자유는 불가능하다.

3. CSS Filter Effects


브래지어, 색조, 포화도, 밝기 등 필터를 착용할 수 있다.
img {
   /* グレースケール50% + ブラー5px */
   filter:grayscale(0.5) blur(5px);
}

지금은 느낌이 대단한데 오히려 감개가 깊다.
성능에 영향을 미친 것 같아서 한 문장은 모든 효과에 대해 총괄한 것이다.
한두 개 정도는 괜찮을 것 같아요.
https://www.html5rocks.com/en/tutorials/filters/understanding-css/

4.Flexible Box Layout Module


flexbox모델은 flat를 사용하지 않고 flexcontainer의 여분도 내용의 여분을 상쇄하지 않으며 Block모델을 초월하는 수단을 제공한다.
CSS flex에서 -MDN 활용
컨테이너 상자의 디스플레이 속성을 유연하게 설정할 수 있습니다.
예를 들어 아래와 같이 3분할 설정을 진행할 때

Flexbox Playground
간단한 ""과 간단한 CSS는 좌우에 마진이 없고 공백이 없는 세 개의 분할 블록을 조합할 수 있다.
div.container > div*3
.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}
.container > div {
  width: 30%;
}
엎치락뒤치락하는 디자인이 마침내 안정된 분위기를 연출했지만 안드로이드flex-wrap만 사용할 수 없는 지옥은 계속되고 있다.
플랫 해제와 디스플레이: inline-box 사이의 대변을 보지 않아도 되고, JS에서 가장 긴 사이즈와 다른 사이즈를 맞출 수도 있다.. 드디어 허무한 업무에서 해방되었다.

5.calc() as CSS unit value


학점이 달라도 사칙으로 쳐줄 거야.
※Android4.4는 덧셈과 뺄셈이다.
// 横100%のコンテンツだけど左右20pxずつ短くしたい時
width : calc(100% - 40px);
이것밖에 없지만 너무 즐거웠어요.
나는 몇 번 해 봤는데, 그에게 원어를 물게 하는 것보다 차라리 고정치를 넣는 것이 낫다.
가변적인 레이아웃인데도 자꾸 목표를 잡았다고 생각하니 보기 싫은 한숨은 없어지지 않을까.
능숙하게 사용할 수 있도록 열심히 공부하세요.

기타


ShadowDOM 및 HTML Template를 사용할 수 있습니까?이처럼 웹 구성 요소를 실제로 사용하는 시대가 도래하기를 기대하고 있다.

끝맺다


어? IE11...

좋은 웹페이지 즐겨찾기