Các mẹo khi thiết kế web

Các mẹo khi thiết kế web

Phan Nhật Chánh

Chánh19 tháng 01, 2020

2 min read
·
•••views
·
•••likes

@media không làm việc

Khi sử dụng bootstrap, đôi khi @media nó không hoạt động khi bạn chuyển sang sử dụng thiết bị di động, hãy thử thêm dòng dưới đây vào <head>

<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="width=device-width" />

Cách tăng tốc độ tải CSS, JS

<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("abc.css");
loadCSS("def.css");
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
//CSS Ready
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }
loadCSS("abc.css");
loadCSS("def.css");
//]]>
</script>

Tải không đồng bộ các tài nguyên JavaScript

  • Thuộc tính async của JavaScript cho phép bạn tải không đồng bộ các tài nguyên JavaScript. Nội dung HTML sẽ được tiếp tục tải mà không cần chờ đợi các tài nguyên JavaScript.
<script async src='/jquery.min.js' type='text/javascript'></script>
<script async src='/jquery.min.js' type='text/javascript'></script>
  • Thuộc tinh defer của JavaScript cho phép trì hoàn tải các tài nguyên JavaScript cho đến khi nội dung HTML được tải xong. Tài nguyên JavaScript sẽ được tải sau khi toàn bộ HTML được tải xong.
<script defer src='/jquery.min.js' type='text/javascript'></script>
<script defer src='/jquery.min.js' type='text/javascript'></script>

Auto focus thẻ input khi load trang

Chỉ cần thêm autofocus vào thẻ <input>

<input name="q" class="search" type="search" placeholder="..." autofocus>
<input name="q" class="search" type="search" placeholder="..." autofocus>

Tách một danh sách thành 2 cột

Và làm cho nó thành 1 nếu bạn thu nhỏ màn hình xem demo

<div class="two-columns-list">
  <ul>
    <li></li>
  </ul>
</div>
<div class="two-columns-list">
  <ul>
    <li></li>
  </ul>
</div>
.two-columns-list{
  -webkit-columns: 384px 2;
  -moz-columns: 384px 2;
  columns: 350px 2;
}
.two-columns-list{
  -webkit-columns: 384px 2;
  -moz-columns: 384px 2;
  columns: 350px 2;
}

Flexbox Responsive Form

  • 4 layout cho Form chỉ với một đoạn code nhờ Flexbox

Các công cụ hữu ích khác

  • Mario Ranftl - google-webfonts-helper.
  • bttn.css - Một cái nút đẹp cho trang web của bạn.
  • Locofy - Công cụ giúp chuyển thiết kế của bạn (Figma) thành code (React/React Native, HTML/CSS, Vue, Angular).

Xem thêm: Tổng hợp các công cụ & tài nguyên dành cho phát triển Web

Một số mẹo khác

•••