네, 올해가 끝나기 전에 세 개의 멋진 CSS 속성이 있습니다.빠르게 돌이켜 보기 위해서, 나는 이전에 서브 격자, 쓰기 모드, 색역 등의 주제를 토론한 적이 있다. 그것의 전체 내용을 보아라.

CSS: 색재현율 및 적용.🌈

비바프 쿠르베・ 10월 23일 20일.・ 6 분 읽기

#css #html #webdev #tutorial

CSS: 하위 그리드, 다중 열 및 쓰기 모드.🥸

비바프 쿠르베・ 11월 20일'20・ 6 분 읽기

#css #html #webdev #tutorial

그래, 이제 오버롤러가 무엇인지, 오버롤러가 무슨 도움이 되는지, 왜 만지는 동작 같은 것이 필요한지 더 많이 알 때가 됐어!

맥주를 넘치게!!

➡️ CSS 하이퍼볼륨

The overscroll property tells the browser what to do when the body content reaches the boundary of the scroll area. Hence the name over-scroll.

따라서 웹 프로젝트에 오버스크롤 속성을 추가하지 않을 때, 기본값은 auto입니다.모바일 장치에서, 페이지의 밑부분 (또는 맨 위) 으로 스크롤하려고 할 때, 반등 효과를 볼 수 있으며, 웹 페이지의 이러한 행동은 오버스크롤이 제어합니다.
일반적으로 다음 두 속성 중 하나를 사용합니다.

overscroll-behavior-x: 수평 (x축) 경계에 도달했을 때 브라우저 스크롤 동작을 처리합니다.

overscroll-behavior-y: 위의 내용과 동일하지만 수직(y축) 경계에 있습니다.

또한 웹 페이지의 기본 스크롤 바를 숨기기 위해 이 속성을 사용할 수도 있습니다.그렇지 않다면 다음을 수행하십시오.
CSS 파일로 이동하여 body 요소에 다음 코드 행을 추가합니다.

body {
  overflow-y: hidden; /* Hide vertical scrollbar */
  overflow-x: hidden; /* Hide horizontal scrollbar */
}

물론, 나는 네가 스크롤 바를 완전히 벗어날 것을 권장하지 않는다. (접근할 수 있는 사용자 정의 스크롤 바가 없으면). 그러나 일부 간단한 설명에는 이 기교가 유용하다.
overscroll에서 지원하는 키워드 값은 다음과 같습니다.

overscroll-behavior: auto; 모든 웹 페이지의 기본 모드입니다.실제로는 아무것도 없다:")

overscroll-behavior: contain;은 밑바닥 원소가 굴러가는 것을 방지할 것이다.

overscroll-behavior: none;의 기본 동작이 차단되고 스크롤 막대를 삭제할 때 흔히 볼 수 있습니다.')

🤩 하이퍼링크 자원!

overscroll-behavior on CSS Tricks

Take control of your scroll: customizing pull-to-refresh and overflow effects by Google Web Developers

Scroll Bouncing On Your Websites by Smashing Magazine

다음...

➡️ CSS 오버플로우

The overflow is a CSS shorthand property that is used to set the, well, the overflow behavior of an element.

부모 요소의 경계가 넘쳐흐르는 것을 보면 넘쳐흐르는 것을 볼 수 있습니다. 넘쳐흐르는 내용을 숨겨서 이 문제를 해결해야 합니다.
이 멋진 예를 봐라.

너는 텍스트가 어떻게 용기에서 넘치는지 알아차렸니?그들은 아마도 overflow: visible; 같은 물건을 사용했을 것이다.지금 우리는 어떤 다른 선택을 하고 있습니까?

overflow: visible; 이것은 기본 동작입니다. 그렇습니다. 카드 레이아웃에 단락이나 그림이 넘칠 때, 이것은 매우 나쁜 것입니다.컨텐트는 잘리지 않고 정의된 여백/채우기 외부에 표시됩니다.

overflow: hidden; 당신의 생명의 볏짚입니다!현재, 내용이 잘렸지만, 스크롤 바를 추가하지 않을 것입니다.또한 어떤 방향으로도 드래그하고 굴릴 수 없습니다.

overflow: scroll; 여기 스크롤 바 있어요!그러나 컨텐트는 채우기에 따라 잘립니다.스크롤 막대는 어떤 경우에도 항상 표시됩니다.: ')

overflow: auto; 에서는 자동으로 컨텐츠 편집 여부를 결정합니다.컨테이너에 컨텐트가 있으면 기본 visible 비헤이비어와 유사합니다.

이 스크롤을 수행하려면:

CSS에 다음을 추가해야 합니다.

p {
  .
  .
  .
  width: 12em;
  height: 6em;
  overflow: scroll; /* always show scrollbars */ 
  .
  .
  .
}

🤩 넘치는 자원들!

The CSS Overflow Property on CSS Tricks

Finding/Fixing Unintended Body Overflow by CSS Tricks

Debug scrollable overflow by Mozilla Developer Network

마지막으로 우리는 얻었다...

➡️ CSS 터치 동작

우리는 터치 제어 설비의 땅에 왔다!

The touch-action property sets how an element's region can be changed on a touch-enabled device.

터치스크린에 추가된 감동적인 기능, 예를 들어 수축 축소, 평이, 더블 클릭 빠른 축소 등은 모두 이 놀라운 CSS 속성을 통해 제어할 수 있다.
따라서 스마트폰에서 손가락으로 제스처를 시작할 때 배경에서 일어나는 일은 브라우저가 터치된 요소(예를 들어 드래그할 수 있는 상자)와 조상(예를 들어 신체 용기)의 touch-action치와 교차하여 제스처가 실현될 때까지 하는 것이다.
다음과 같은 몇 가지 흥미로운 가치를 제공합니다.

auto: 모든 초점이동 및 줌 기능을 사용할 수 있습니다.

none: 이 옵션을 사용하면 모든 초점이동 및 줌 기능을 사용할 수 없습니다.

pan-x과 pan-y: 각각 한 손가락의 수평과 수직 제스처를 사용합니다.그 밖에 pan-x , pan-up , pan-left 등 일부 자치도 있다.

manipulation: 초점이동 및 축소 및 축소 등의 표준 제스처가 켜져 있지만 두 번 클릭 등의 비표준 제스처가 켜져 있습니다.달콤하게?😏

pinch-zoom: 가장 흥미로운 일입니다!pan- 값을 사용하여 여러 손가락으로 페이지를 초점이동 및 배율 조정할 수 있습니다.

터치 장치에서 다음 프레젠테이션과 상호 작용을 시도합니다.
🤩 행동 자원을 건드리는 것들!

Touch Action Options on Google Web Developers

Touch-action pinch-zoom CSS property Sample by Google Chrome Developers

CSS touch-action property by caniuse.com

읽어줘서 고마워, 고마워!오늘 하루 즐겁게 보내세요.(✿◕‿◕✿)

Adopting a architecture means moving in and the challenges that come with it! Payara Cloud will save you time and effort running apps on the cloud, and ensure everything works with . Watch this space! pic.twitter.com/iIEANhfVRt

— Payara (@Payara_Fish)

📫 매주 개발자 통신 구독📫

PS: 올해부터 저는 이곳에서 개발 커뮤니티에 관한 글을 쓰기로 했습니다.전에 나는'중'자를 썼다.제 글을 보고 싶은 사람이 있다면 here은 제 매체 자료입니다.