사람들을 빛나게 만드는 5가지 프런트엔드 팁-CSS 튜토리얼-php.cn

사람들을 빛나게 만드는 5가지 프런트엔드 팁

醉折花枝作酒筹

풀어 주다： 2021-08-05 18:01:36

앞으로

1471명이 탐색했습니다.

모든 사람이 더 쉽게 프로그래밍할 수 있도록 이 책에서는 유용하지만 비교적 드물고 유용한 기술을 선택합니다. 더 이상 고민하지 말고 운전해 봅시다.

1. 빠른 숨기기

DOM 요소를 숨기려면 JavaScript가 필요하지 않습니다. 기본 HTML 속성은 숨기기에 충분합니다. 효과는 display: none; 스타일을 추가하는 것과 유사합니다. display: none;。

<p hidden>该段落在页面上是不可见的，它对HTML是隐藏的。</p>

로그인 후 복사

不过，这个技巧对伪元素不起作用。

2. 迅速定位

熟悉`inset` CSS 属性吗？它是`top`、`left`、`right`和`bottom`的缩写版本。与简写的`margin`和`padding`类似，我们可以在一行中设置一个元素的所有偏移量。

// Before
div {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

// After
div {
  position: absolute;
  inset: 0;
}

로그인 후 복사

3.前端测网速

Chrome浏览器提供了原始的API navigator.connection.downlink 可以访问用户当前网络环境的网络带宽。

navigator.connection.downlink;

로그인 후 복사

connection.downlink返回的并不是用户当前环境的展示的网络传输速度，而是当前网络的带宽，官方说法是：返回以Mb/s为单位的有效带宽，并保留该值为25kb/s的最接近的整数倍。

例如，我在我家里Chrome浏览器控制台跑一下navigator.connection.downlink这段语句，结果返回的是10, 表示下载带宽是10M的。

사람들을 빛나게 만드는 5가지 프런트엔드 팁

4.禁止拉动刷新

CSS overscroll-behavior属性允许开发人员在达到内容的顶部/底部时覆盖浏览器的默认溢出滚动行为。使用该案例包括禁用移动设备上的“拉动到刷新”功能，消除过度滚动发光和橡皮筋效果，并防止页面内容在模态/叠加层下滚动

body {
 overscroll-behavior-y: contain;
}

로그인 후 복사

这个属性对于组织模态窗口内的滚动也非常有用--它可以防止主页面在到达边界时拦截滚动。

5. 禁止插入文字

当用户在浏览器用户界面发起“粘贴”操作时，会触发paste事件。

有时间，我想禁止用户从某个地方复制的文本粘贴到输入框中。通过监听paste事件并调用其方法preventDefault()，这可以很容易做到。

<input type="text"></input>
<script>
  const input = document.querySelector(&#39;input&#39;);

  input.addEventListener("paste", function(e){
    e.preventDefault()
  })

</script>

로그인 후 복사

代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebugrrreee

이 트릭은 의사 요소에는 작동하지 않습니다.

2. 빠른 위치 지정

🎜🎜`inset` CSS 속성에 익숙하십니까? `top`, `left`, `right` 및 `bottom`의 축약 버전입니다. `margin` 및 `padding`과 유사하게 요소의 모든 오프셋을 한 줄에 설정할 수 있습니다. 🎜rrreee🎜🎜3. 프런트엔드 네트워크 속도 테스트🎜🎜🎜Chrome 브라우저는 사용자의 현재 네트워크 환경의 네트워크 대역폭에 액세스할 수 있는 원본 API navigator.connection.downlink를 제공합니다. 🎜rrreee🎜connection.downlink는 사용자의 현재 환경에 표시된 네트워크 전송 속도가 아니라 현재 네트워크의 대역폭을 반환합니다. 공식 설명은 유효 대역폭을 Mb/s로 반환하고, 이 값을 25kb/s의 가장 가까운 정수배로 유지하세요. 🎜🎜예를 들어 집에 있는 Chrome 브라우저 콘솔에서 navigator.connection.downlink 명령문을 실행했는데 반환된 결과는 10이었습니다. 이는 다운로드 대역폭이 10M임을 의미합니다. 🎜🎜 사람들을 빛나게 만드는 5가지 프런트엔드 팁

🎜 🎜🎜4. 당겨서 새로고침 비활성화🎜🎜🎜CSS overscroll-behavior 속성을 사용하면 개발자는 콘텐츠의 상단/하단에 도달할 때 브라우저의 기본 오버스크롤 동작을 재정의할 수 있습니다. 이에 대한 사용 사례에는 모바일 장치의 "새로 고침" 기능 비활성화, 오버스크롤 글로우 및 고무줄 효과 제거, 페이지 콘텐츠가 모달/오버레이 아래에서 스크롤되는 것을 방지하는 것이 포함됩니다. 🎜rrreee🎜이 속성은 모달 내에서 스크롤을 구성하는 데 유용합니다. windows 또한 매우 유용합니다. 메인 페이지가 테두리에 도달할 때 스크롤을 가로채는 것을 방지합니다. 🎜🎜🎜5. 텍스트 삽입은 금지됩니다🎜🎜

사용자가 브라우저 사용자 인터페이스에서 "붙여넣기" 작업을 시작하면 붙여넣기 이벤트가 트리거됩니다.

🎜때때로 사용자가 어딘가에서 복사한 텍스트를 입력 상자에 붙여넣는 것을 비활성화하고 싶을 때가 있습니다. 이는 붙여넣기 이벤트를 수신하고 해당 메서드 preventDefault()를 호출하여 쉽게 수행할 수 있습니다. 🎜rrreee🎜코드가 배포된 후에는 가능한 BUG를 알 수 없습니다. 나중에 이러한 BUG를 해결하기 위해 로그 디버깅에 많은 시간을 소비했습니다. 그런데 유용한 BUG를 추천하고 싶습니다. 모니터링 도구 Fundebug. 🎜🎜추천 학습: 🎜css 비디오 튜토리얼🎜🎜

위 내용은 사람들을 빛나게 만드는 5가지 프런트엔드 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!