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

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>

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>
  • 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>

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>

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

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

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

Một số mẹo khác

© 2019-2020 Phan Nhật Chánh