Cài đặt CSS Scanner 4.0 thật dễ dàng – chỉ cần truy cập Cửa hàng Google Chrome trực tuyến và thêm tiện ích mở rộng vào trình duyệt của bạn. Sau khi cài đặt, bạn có thể kích hoạt nó trên bất kỳ trang web nào và bắt đầu kiểm tra cũng như sao chép các thuộc tính CSS một cách dễ dàng.

Để sử dụng CSS Scanner 4.0, chỉ cần di chuột qua bất kỳ thành phần nào trên trang web và nó sẽ hiển thị các thuộc tính CSS của thành phần đó trong cửa sổ bật lên. Để sao chép mã CSS, chỉ cần nhấn phím cách để đóng băng cửa sổ bật lên và nhấp vào nút sao chép. Bạn cũng có thể kiểm tra đồng thời nhiều phần tử và sao chép các thuộc tính CSS của chúng cùng một lúc.

CSS Scanner 4.0 là một công cụ phải có cho các nhà phát triển giao diện người dùng và nhà thiết kế giao diện người dùng vì nó đơn giản hóa quá trình kiểm tra và gỡ lỗi các thuộc tính CSS. Với CSS Scanner 4.0, bạn không cần phải mất thời gian điều hướng qua các tệp CSS phức tạp hoặc tìm hiểu các truy vấn SQL để thực hiện phân tích dữ liệu. Thay vào đó, bạn có thể sao chép các thuộc tính CSS một cách nhanh chóng và dễ dàng chỉ bằng một cú nhấp chuột.

Một trong những điều tốt nhất về CSS Scanner 4.0 là nó hoàn toàn miễn phí, không giống như các lựa chọn thay thế trả phí khác. Điều này giúp các nhà phát triển và nhà thiết kế ở mọi cấp độ có thể tiếp cận nó, bất kể ngân sách của họ là bao nhiêu. Ngoài ra, CSS Scanner 4.0 cực kỳ nhanh và hiệu quả, cho phép bạn hoàn thành công việc của mình một cách nhanh chóng và chính xác.

Như với bất kỳ công cụ nào, có thể có một số hạn chế đối với CSS Scanner 4.0. Ví dụ: phiên bản miễn phí của tiện ích mở rộng chỉ giới hạn ở một tập dữ liệu với tối đa 100 truy vấn sử dụng các tính năng AI cơ bản. Tuy nhiên, điều này có thể dễ dàng khắc phục bằng cách đăng ký các gói trả phí, cung cấp nhiều tính năng nâng cao hơn và bộ dữ liệu không giới hạn.

The post CSS Scanner: Sao chép CSS bất kỳ nơi nào appeared first on Nhật Phúc.

Tất nhiên nó có thể được thực hiện dễ dàng với JavaScript và tìm kiếm nhanh đã tìm thấy tùy chọn -moz-user-select dành riêng cho Mozilla. Tuy nhiên có phương pháp CSS để thực hiện.

Cụ thể, user-select + -webkit-user-select cho Safari là đủ để đạt được hành vi mong muốn trong tất cả các trình duyệt chính. Đây là tất cả các biến thể CSS chính xác có sẵn:

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

Bây giờ ví dụ bạn có đoạn code:

<p>
  Selectable text.
</p>
<p class="noselect">
  Unselectable text.
</p>

Thì nội dung Unselectable text trong tag <p> mang class là noselect sẽ không thể chọn được.

Theo stackoverflow

The post Cách tắt cho phép chọn văn bản bằng CSS appeared first on Nhật Phúc.

JSBin

jsbin là một trình gỡ lỗi JavaScript đơn giản. Giao diện jsbin có thể hơi khó hiểu đối với người mới. Về cơ bản, bạn có thể chọn giữa bất kỳ thư viện JS nào – jQuery, JQuery UI, jQM, Prototype, MooTools, có rất nhiều thứ để bạn lựa chọn.

Khi bạn mã hóa các phần tử khác nhau, bản nháp sẽ tự động lưu. Bạn có thể tải xuống sản phẩm cuối cùng của mình hoặc lưu mã nguồn trực tuyến.

jsFiddle

jsFiddle khác biệt rất nhiều so với JSBin, cùng với việc hỗ trợ các chức năng phức tạp hơn. jsFiddle cung cấp một URL ngắn mà bạn có thể chia sẻ trên Web thông qua Twitter, Facebook, thậm chí cả Stack. Nhưng lưu ý bạn không cần tài khoản để bắt đầu viết mã. Nó chỉ là một tính năng tiện dụng để giữ mọi thứ được ngăn nắp.

CodePen

CodePen giống như một mạng xã hội dành cho nhà phát triển Web hơn là một sân chơi mã. Mọi người chia sẻ các đoạn mã bằng HTML, CSS và JavaScript, được gọi là Pen tại đây.

CodeSandbox

Codesandbox là một sân chơi JavaScript đầy đủ tính năng. Codesandbox sẽ tự động tải xuống các bản bổ sung từ NPM. Xem trang Khám phá để tìm những thứ thú vị được tích hợp trong CodeSandbox.

WebMaker

WebMaker là một sân chơi mã dành cho HTML, CSS, JavaScript cũng như Pre-processor như Sass, LESS và JSX. WebMaker sẽ tự động biên dịch các cú pháp của bộ xử lý trước này để trình duyệt hiển thị mã đúng cách.

CSSDesk

CSSDesk rất phù hợp để xây dựng các mẫu trang web nhỏ và thử nghiệm các thuộc tính CSS3 dài hơn với gradient và bóng hộp.

Trang web này cũng cho phép bạn tải xuống mã nguồn dưới dạng tệp vào máy tính của mình. Ngoài ra, bạn có thể tạo một liên kết URL ngắn để chia sẻ trực tuyến.

IDEOne

IDE One là một công cụ khác dựa trên lập trình sâu và phát triển phần mềm. Trình chỉnh sửa trực tuyến của họ hỗ trợ cho một số ngôn ngữ bao gồm Objective-C, Java, C #, VB.NET, SQL và nhiều thứ khác.

Điều tuyệt vời về ứng dụng của họ là cách bạn có thể nhanh chóng gỡ lỗi nhiều ngôn ngữ lập trình khác nhau từ cùng một trang. Bạn cũng có thể lưu trữ mã nguồn này thông qua một URL duy nhất để chia sẻ trên Web.

JSLint

Công cụ chất lượng mã JavaScript tự xưng phải là JSLint. Trang web của họ hơi lạ, nhưng trình soạn thảo mã hoạt động chính xác như bạn mong đợi.

SQL Fiddle

Trước đó, chúng ta đã thấy sức mạnh của một ứng dụng web như jsFiddle. Bây giờ chúng ta có thể thấy SQL Fiddle hoạt động theo cách tương tự, ngoại trừ cú pháp cơ sở dữ liệu SQL.

Tất cả dữ liệu đầu ra từ mã SQL của bạn sẽ xuất hiện trong một bảng bên dưới trình chỉnh sửa. Bạn có thể viết một số mã để triển khai dữ liệu mới ở bên phải và tạo một lược đồ ở bên trái. Lược đồ cơ sở dữ liệu này là mã SQL mà bạn có thể lưu để xuất cơ sở dữ liệu hiện tại của mình và cài đặt lại mọi thứ trên máy chủ mới.

ESLint Demo

ESLint cho phép bạn thiết lập các quy tắc viết trên mã của bạn. Đó là một công cụ tuyệt vời nếu bạn làm việc trên một dự án được chia sẻ trong một nhóm để đảm bảo rằng mọi người đều tuân theo cùng một phong cách và quy tắc khi viết mã.

PHPStan

PHPStan là công cụ phân tích mã tĩnh cho PHP. Nó kiểm tra các lỗi mã và các lỗi tiềm ẩn mà không thực sự chạy mã. Nó sẽ cho bạn biết liệu bạn có chuyển, ví dụ, một giá trị chuỗi cho một hàm thực sự chấp nhận một số nguyên hay truy cập một thuộc tính không tồn tại trên một lớp.

OneCompiler

Một trình biên dịch tất cả trong một cho nhiều ngôn ngữ lập trình. Nó hỗ trợ hơn 40 ngôn ngữ bao gồm Go, PHP, Java, JavaScript và thậm chí cả C và C ++.

Bạn có thể viết các ngôn ngữ này trong các công cụ này và nó sẽ biên dịch và thực thi mã ngay lập tức. Công cụ này là một công cụ hoàn hảo để kiểm tra mã của bạn một cách nhanh chóng cho bản demo hoặc chỉ để chạy một bài kiểm tra nhanh.

Jsitor

Một trình soạn thảo mã trực tuyến nơi bạn có thể chạy JavaScript, HTML và CSS bao gồm một số thư viện phổ biến cũng như jQuery, React.js, Vue.js, Font Awesome, và nhiều hơn nữa. Đó là một công cụ tuyệt vời để kiểm tra ý tưởng của bạn mà không cần phải thiết lập môi trường làm việc trong máy tính của bạn. Bạn cũng có thể sử dụng nó để chạy bản trình diễn nhanh.

Glitch

Một công cụ mà bạn có thể xây dựng trang web tĩnh với một số thư viện và khuôn khổ hiện đại. Nó bao gồm React.js, Node.js và Eleventy.js. Nhưng bạn cũng có thể viết HTML, CSS và JavaScript đơn giản.

Bên cạnh trình chỉnh sửa trực tuyến nơi bạn viết mã, Glitch còn cung cấp các công cụ nâng cao phục vụ giúp nó trở thành một môi trường trực tuyến làm việc tuyệt vời để tạo trang web tĩnh.

Stackblitz

Stackblitz là một môi trường phát triển trực tuyến, nơi bạn có thể xây dựng trang web với các ngăn xếp hiện đại. Nó hỗ trợ khung phụ trợ Next.js và Node.js, cùng với một số thư viện front-end phổ biến như React.js, Vue.js và Angular.

Tổng kết

Hy vọng bộ sưu tập các công cụ test code online này có thể giúp bạn suy nghĩ về môi trường phát triển hiện đại. Thật dễ dàng để nhanh chóng kết hợp một dự án web HTML / CSS và có một bản xem trước demo nhỏ trong vòng vài phút.

Theo Hongkiat

The post 10 trang web để bạn test code online appeared first on Nhật Phúc.

Đây là những kiểu chữ trong đó glyphs không sử dụng các ký tự chữ và số mà thay vào đó hiển thị các biểu tượng emotion. Về mặt kỹ thuật, chúng là văn bản trên trang, chúng có thể được thay đổi kích thước và cấu hình lại bằng cách sử dụng CSS.

Một trong những thư viện font chữ biểu tượng mới nhất và thú vị nhất là Fontisto. Nó hoàn toàn miễn phí và có một thư viện để bạn lựa chọn.

Bạn có thể tải xuống Fontisto ngay từ trang chính hoặc qua GitHub. Tất cả các biểu tượng đều miễn phí cho bất kỳ dự án nào kể cả sử dụng chúng trong mục đích thương mại.

Font chữ này cũng có thể truy cập đầy đủ cho tất cả các trình duyệt và trình đọc màn hình, làm cho nó trở nên hoàn hảo cho các nhà thiết kế quan tâm đến khả năng tương thích.

Để bắt đầu sử dụng các biểu tượng Fontisto, tất cả những gì bạn cần là một tệp CSS chứa các font chữ chính. Chỉ cần một dòng mã để cài đặt mọi thứ.

Nếu bạn không muốn lưu trữ các font chữ trên máy chủ của mình thì hãy thử sử dụng liên kết CDN. Và từ đó bạn chỉ cần thêm các lớp CSS Fontisto vào mã giao diện người dùng của mình và xem các biểu tượng đổ vào.

Bạn có thể xem các ví dụ của Fontisto tại đây.

Trang bao gồm các danh mục bạn có thể sử dụng để sắp xếp các biểu tượng và thậm chí là một bảng để lấy tất cả các mã biểu tượng để sử dụng trong CSS.

Fontisto thậm chí còn có một tiện ích mở rộng cho trình duyệt như Chrome, Firefox hoặc Opera để tải các biểu tượng trực tiếp từ trình duyệt của mình.

Có thể nói đây là một nguồn tài nguyên tuyệt vời cho các nhà thiết kế và nhà phát triển với sự hỗ trợ về cơ bản cho tất cả người dùng.

The post Fontisto – Gói Iconfont miễn phí appeared first on Nhật Phúc.

Giao diện dòng lệnh (CLI) mạnh mẽ, nhanh chóng và cho phép bạn tự động hóa các tác vụ có thể chậm hơn hoặc không thể thực hiện được nếu bạn thực hiện với đối tác giao diện người dùng của nó.

TerminalsAreSexy

Trên nền tảng này, bạn có thể tìm thấy danh sách các ứng dụng Terminal như Bash ZSH, Fish, v.v. các ứng dụng soạn thảo như VIM, emacs và các loại trình chỉnh sửa khác , trình quản lý gói, plugin và danh sách các trang cộng đồng.

Nếu bạn đang muốn tìm hiểu thêm về cách sử dụng Terminal và CLI, bạn nên đánh dấu trang này như một tài nguyên học tập toàn diện.

Charts Blocks

Một plugin để chèn biểu đồ một cách trực quan trong trình chỉnh sửa khối WordPress chỉ với một vài cú nhấp chuột. Plugin hỗ trợ một số loại biểu đồ bao gồm biểu đồ Thanh, Đường, Hình tròn,…

Laravel Prose Linter

Một gói Laravel để kiểm tra nội dung văn bản trên ứng dụng Laravel của bạn. Nó có thể kiểm tra bản dịch, lỗi chính tả, tiếng lóng và có thể đề xuất một phong cách viết tốt hơn. Nó thực sự là một linter khá độc đáo.

Radar

Một ứng dụng cho phép bạn tập hợp các loại dữ liệu thời gian thực khác nhau mà bạn muốn theo dõi ở một nơi duy nhất. Ví dụ: bạn có thể thêm giá Bitcoin, số lượng người theo dõi trên Twitter, trao đổi tiền tệ, thu nhập AdSense, v.v.

Learderboard Performance

Một công cụ để đánh giá điểm chuẩn trên một số trang web khác nhau để so sánh hiệu suất của chúng. Nó sử dụng Lighthouse và là một công cụ tuyệt vời nếu bạn cần theo dõi các trang web khác đang hoạt động như thế nào.

Astro Build

Bạn có thể sử dụng framework yêu thích của mình như React, Vue, Web Components hoặc chỉ HTML + CSS cũ đơn thuần trong khi Astro sẽ thực hiện tất cả công việc để biên dịch tất cả các thành phần này thành một trang web tĩnh nhanh chóng.

IconVG

IconVG là sáng kiến ​​của Google về định dạng thay thế cho đồ họa nhỏ đơn giản như biểu tượng, biểu trưng và biểu tượng cảm xúc thường được sử dụng trên web. Nó nhỏ hơn tới 3 lần so với SVG và nhỏ hơn nhiều so với PNG.

Tại thời điểm viết bài này, định dạng này là thử nghiệm; Tuy nhiên, thật thú vị khi xem định dạng này sẽ được áp dụng như thế nào trong tương lai trên web.

DaisyUI

Bộ giao diện người dùng được xây dựng dựa trên Tailwind CSS. Điều độc đáo về DaisyUI là bộ sưu tập chủ đề. Nó cung cấp một số tùy chọn để chọn làm nhân vật giao diện người dùng của bạn bên cạnh chủ đề tối và sáng truyền thống.

Ví dụ: bạn có thể chọn chủ đề “Cổ điển” để thay đổi giao diện người dùng sang màu sắc cũ hoặc “Sang trọng” để làm cho nó sang trọng hơn.

Mobile Palette

Nếu khó tìm được sự kết hợp màu sắc phù hợp cho ứng dụng dành cho thiết bị di động của bạn, ứng dụng web tiện dụng này có thể giúp ích cho bạn. Chỉ cần chọn nền màu, nó sẽ tự động tạo ra một bảng màu đẹp cho giao diện người dùng di động.

Boring Avatars

Đúng như tên gọi, đây là công cụ tạo ảnh đại diện, nhàm chán. Công cụ tạo hình đại diện dựa trên sự kết hợp của mẫu, màu sắc và tên người dùng.

Nó cung cấp 6 kiểu xuất hiện, 2 hình dạng và 3 kích thước để tạo hình đại diện. Bạn có thể sao chép SVG đã tạo hoặc sử dụng URL, ví dụ:

https://source.boringavatars.com/marble/120/Jon%20Doe?colors=264653,2a9d8f,e9c46a,f4a261,e76f51

MoneyPHP

Đối phó với tiền tệ có thể phức tạp, và đây là một thư viện PHP nhằm mục đích làm cho nó trở nên dễ dàng. Nó cho phép bạn thực hiện các phép tính cộng, trừ và so sánh. Bạn có thể thực hiện những công việc nâng cao như tính toán tỷ lệ, chuyển đổi tiền tệ và định dạng.

N8N

Một công cụ để tự động hóa quy trình làm việc mà không cần viết mã. Nó có thể kết nối với nhiều dịch vụ như Github, Slack, Google Spreadsheet, Dropbox và nhiều dịch vụ khác. Một giải pháp thay thế tuyệt vời cho IFTTT và Zapier, N8N là mã nguồn mở miễn phí và bạn có thể chạy nó trên máy chủ của riêng mình.

30 Seconds of Code

Tập hợp các mẹo và đoạn mã cho một số vấn đề thường gặp trong lập trình và phát triển web. Nó bao gồm JavaScript, Python, React và Git.

Ví dụ: trong bộ sưu tập, bạn có thể tìm thấy một số ví dụ về hoạt động thuật toán, toán học, xử lý API trình duyệt, mảng, đối tượng và một số ví dụ thực tế như chuyển đổi JSON thành CSV.

HashID

Một thư viện cho phép bạn tạo ID ngắn, duy nhất và không tuần tự. ID sẽ như thế nào Vz5prKnEoo. Nó trông tương tự như ID của một video Youtube. Thư viện có sẵn bằng nhiều ngôn ngữ khác nhau bao gồm PHP, JavaScript, Ruby, Python, Swift và nhiều ngôn ngữ khác.

DevToolsTips

Một trang web hữu ích khác để đánh dấu trang, DevToolTips chứa rất nhiều mẹo và thủ thuật để sử dụng DevTools. Nó bao gồm DevTools của Chrome, Firefox, Edge và thậm chí cả Safari.

roave/no-leaks

Một plugin PHPUnit để phát hiện rò rỉ bộ nhớ trong các mã đã thử nghiệm của bạn. Một công cụ tuyệt vời để đảm bảo rằng mã của bạn sẽ không gây cạn kiệt bộ nhớ khi được triển khai vào sản xuất.

Coffee with Charli and Shopify: Scaling Systems

Một cuộc nói chuyện thú vị trong tập Coffee with Charli của Figma. Tập này cung cấp cho bạn cái nhìn sơ lược về cách Shopify tạo ra một hệ thống thiết kế có quy mô và xử lý các thử thách.

Plow

CLI hiệu quả để đánh giá các yêu cầu web. Nó đi kèm với giao diện người dùng web và thiết bị đầu cuối mà bạn có thể sử dụng để xem tiến trình điểm chuẩn như thế nào trong thời gian thực.

Tinywind

Một tập hợp nhỏ các thành phần được xây dựng bằng các lớp CSS Tailwind tích hợp sẵn. Mỗi thành phần đều đơn giản, không có kiểu bổ sung hoặc thừa. Nó cho thấy một ví dụ tuyệt vời về những gì chúng ta có thể xây dựng với các lớp Tiện ích và HTML.

Theo Hongkiat

The post Tài nguyên mới cho developer và designer tháng 6/2021 appeared first on Nhật Phúc.

Với sự phổ biến của CSS3, các nhà phát triển đang xây dựng nhiều tài nguyên giá trị. Một thư viện mới đặc biệt nổi bật gần đây là Vivify.

Đây là một thư viện animation miễn phí được xây dựng trên CSS và nó hoạt động tương tự như Animate.css. Tuy nhiên, nó cung cấp những hình ảnh động hoàn toàn độc đáo mà bạn sẽ không thể tìm thấy ở bất kỳ source nào khác.

Ngay trang chủ Vivify đã có sẵn nhiều ví dụ để bạn có thể sử dụng. Bạn có thể tự mình tạo những hình ảnh động này khi code từ đầu không? Chắc chắn nhưng nó sẽ mất rất nhiều thời gian và không phải là quá trình đơn giản. Bạn nên tận dụng một thứ như Vivify vì nó tiết kiệm thời gian hơn.

Từ trang chủ Vivify, bạn sẽ tìm thấy một liên kết đến kho lưu trữ GitHub, nơi bạn có thể tải về tập lệnh Vivify mới nhất. Tất cả những gì bạn cần là tệp Vivify CSS trong tiêu đề trang của bạn và nó sẽ hoạt động tốt.

Với Vivify, bạn cũng có thể đặt độ trễ tùy chỉnh cho hoạt ảnh của mình. Bằng cách này, bạn có thể xác định khi nào chúng nên chạy và khi nào khách truy cập nhìn thấy chúng.

Hoặc bạn có thể sử dụng JavaScript để thêm động các lớp này vào các phần tử trang của bạn khi chúng xuất hiện. Rất nhiều tùy chọn, nhiều tính năng và nhiều chỗ để tùy chỉnh.

Để bắt đầu, chỉ cần truy cập GitHub chính và tải xuống source code. Từ đó, bạn có thể kiểm tra một số file demo và thậm chí xem trước một số mẫu trên trang web chính. Sẽ chỉ mất một vài dòng mã để làm cho điều này hoạt động.

The post Vivify – Thư viện animation CSS độc đáo appeared first on Nhật Phúc.

Ngày nay, các nhà phát triển hiện có thể thêm các hiệu ứng chuyển tiếp hoặc hoạt ảnh khi một sự kiện di chuột được kích hoạt.

Trong bộ sưu tập này, có hơn 250 hiệu ứng di chuột để truyền cảm hứng cho bạn. Bạn cũng có thể lấy mã tại nguồn.

Image Hover Effects (16 hiệu ứng)

Trong trang này, bạn sẽ tìm thấy một bộ sưu tập đẹp mắt gồm 16 hiệu ứng hình ảnh rê chuột với chú thích.

Lấy mã HTML và CSS cho từng hiệu ứng bằng cách di chuột qua các hình ảnh, sau đó nhấp vào Show Code.

Image Caption Hover Animation (4 hiệu ứng)

Dưới đây là 4 hoạt ảnh phụ đề thú vị chạy khi một người di chuột qua hình ảnh. Các hiệu ứng được xây dựng với tinh khiết hiệu ứng chuyển tiếp CSS3 và chuyển đổi , và không có JavaScript, tăng compability trên trình duyệt.

iHover (35 hiệu ứng)

iHover là một bộ sưu tập các hiệu ứng di chuột được hỗ trợ bởi CSS3. Có 20 hiệu ứng di chuột vòng tròn và 15 hiệu ứng di chuột vuông. Để sử dụng các hiệu ứng, bạn sẽ cần viết một số đánh dấu HTML và bao gồm các tệp CSS.

Image Hover (44 hiệu ứng)

Thư viện này chứa 44 hiệu ứng được tạo bằng CSS thuần túy. Một số hiệu ứng bao gồm mờ dần, đẩy, trượt, bản lề, tiết lộ, thu phóng, làm mờ, lật, gấp và cửa chớp, theo nhiều hướng.

Có một phiên bản mở rộng của 216 hiệu ứng có thể được mua với giá 14EURO.

Hover Effect Ideas (30 hiệu ứng)

Bản demo di chuột qua hình ảnh này được thực hiện bởi Codrop, mang đến cho bạn cảm hứng khi thực hiện chuyển đổi mượt mà giữa hình ảnh và chú thích của nó. Có tổng cộng 30 hiệu ứng trên hai bộ với hướng dẫn và mã nguồn.

Hover CSS (108 hiệu ứng)

Hover CSS cho phép bạn thêm hiệu ứng di chuột vào bất kỳ phần tử nào, chẳng hạn như nút, liên kết hoặc hình ảnh. Các hiệu ứng bao gồm chuyển tiếp 2D, chuyển đổi nền, đường viền, chuyển tiếp Bóng tối và Phát sáng, v.v. Thư viện có sẵn trong CSS, Sass và LESS.

Animatism (hơn 100 hiệu ứng)

Có hơn 100 hình ảnh động khi di chuột qua các nút, lớp phủ, chi tiết, chú thích, hình ảnh và các nút mạng xã hội. Tất cả các hiệu ứng đều được cung cấp bởi CSS3.

See the Pen Pure CSS3 Image Hover Animations by Sahar Ali Raza
(@mrsahar) on CodePen.

Caption Hover Effect (7 hiệu ứng)

Có 7 hiệu ứng khác nhau trong bộ sưu tập này. Tất cả các chuyển đổi trông thực sự đẹp và mượt mà. Đi tới phần hướng dẫn để tìm hiểu cách áp dụng các hiệu ứng này vào dự án của bạn.

CSS Image Hover Effects (15 hiệu ứng)

Một bộ sưu tập các hiệu ứng di chuột đơn giản như thu phóng, trượt, xoay, thang màu xám, mờ, độ mờ và các hiệu ứng cơ bản khác. Bạn có thể sử dụng các hiệu ứng này bằng cách thêm lớp CSS trước thẻ figure của mình.

See the Pen Demo: CSS image hover effects by Naoya
(@nxworld) on CodePen.

Direction-aware 3D hover effect

Đây là một hiệu ứng di chuột siêu thú vị sẽ phát hiện chuyển động chuột cuối cùng của bạn. Chú thích hình ảnh sẽ mở từ một trong bốn hướng dựa trên vị trí con trỏ cuối cùng của bạn.

See the Pen Direction-aware 3D hover effect (Concept) by Noel Delgado
(@noeldelgado) on CodePen.

Tiles with Animated Hover

Một cho thiết kế ô, cái này có tính năng thu phóng chậm, trang trình bày, cửa sổ bật lên, lớp phủ mờ trong số những cái khác.

See the Pen Tiles with animated :hover by Christopher Grabiński
(@chrisgrabinski) on CodePen.

SVG clip-Path Hover Effect

Hiệu ứng di chuột qua hình ảnh tiêu điểm tia x siêu tuyệt vời được hỗ trợ bởi SVG và CSS. Hoạt động tốt trên Chrome, Opera và Safari.

See the Pen SVG clip-path Hover Effect by Noel Delgado
(@noeldelgado) on CodePen.

The post 12 thư viện CSS cho hiệu ứng rê chuột qua hình ảnh đẹp mắt appeared first on Nhật Phúc.

Hơn nữa, trong thời đại kỹ thuật số này, nút cũng đã phát triển ở dạng kỹ thuật số, giúp nó tương tác hơn, năng động hơn và dễ thực hiện hơn so với nút vật lý.

Trong bài viết này, bạn sẽ được hướng dẫn cách tạo một nút tương tác và mượt mà dựa trên thiết kế tuyệt vời này tại Dribbble chỉ sử dụng CSS.

HTML

Chúng tôi sẽ bắt đầu bằng cách đặt đánh dấu sau vào tài liệu HTML của chúng tôi. Nó thực sự đơn giản, nút sẽ dựa trên một thẻ liên kết, chúng tôi cũng có một span bên cạnh nó để tạo đèn báo, và sau đó chúng được bọc lại với nhau trong một thẻ HTML5 section.

<section>
 <a href="#button" id="button"></a>
 <span></span>
</section>

Đây là cách nút của bạn thể hiện ban đầu.

Tạo kiểu cơ bản

Trong phần này, chúng ta sẽ bắt đầu làm việc với các Kiểu (Styles).

Trước tiên, chúng ta áp dụng nền tối từ Subtle Pattern trên phần body, đồng thời sẽ canh giữa section. Sau đó, chúng ta cũng sẽ xóa dấu chấm outline trên liên kết :focus và :active.

body {
 background: url('images/micro_carbon.png');
}
section {
 margin: 150px auto 0;
 width: 75px;
 height: 95px;
 position: relative;
 text-align: center;
}
:active, :focus {
 outline: 0;
}

Sử dụng font tuỳ chỉnh

Đối với biểu tượng của nút, chúng ta sẽ sử dụng phông chữ tùy chỉnh Font Awesome thay vì hình ảnh. Bằng cách đó, biểu tượng sẽ dễ dàng tạo style và có thể mở rộng thông qua stylesheet.

Đầu tiên bạn tải xuống phông chữ, lưu trữ các tệp phông chữ (eot, woff, ttf và svg) trong fonts, sau đó đặt mã sau vào stylesheet của bạn để xác định họ font chữ mới.

@font-face {
 font-family: "FontAwesome";
 src: url("fonts/fontawesome-webfont.eot");
 src: url("fonts/fontawesome-webfont.eot?#iefix") format('eot'), 
 url("fonts/fontawesome-webfont.woff") format('woff'), 
 url("fonts/fontawesome-webfont.ttf") format('truetype'), 
 url("fonts/fontawesome-webfont.svg#FontAwesome") format('svg');
 font-weight: normal;
 font-style: normal;
}

Các biểu tượng sức mạnh mà chúng ta cần cho nút này được thể hiện trong Unicode số F011; nếu bạn xem xét kỹ HTML markup ở trên, bạn sẽ thấy ký tự số này  trong thẻ anchor, nhưng vì chúng tôi chưa xác định tùy chỉnh font-family trong kiểu nút (button style), nên biểu tượng vẫn chưa được hiển thị chính xác.

Tạo kiểu cho nút

Trước hết, chúng ta cần xác định font-family cho nút.

Nút của chúng ta sẽ là một vòng tròn, chúng ta có thể tạo được hiệu ứng vòng tròn bằng cách sử dụng thuộc tính border-radius và đặt giá trị ít nhất bằng một nửa của nút width.

Vì chúng tôi đang sử dụng phông chữ cho biểu tượng, chúng tôi cũng có thể dễ dàng đặt color và thêm text-shadow cho biểu tượng trong stylesheet.

Tiếp theo, chúng ta cũng sẽ tạo hiệu ứng vát cho nút. Hiệu ứng này khá phức tạp. Đầu tiên, chúng ta cần áp dụng background-color: rgb(83,87,93); cho nền màu của nút, sau đó chúng ta thêm tối đa bốn lớp box-shadows.

a {
 font-family: "FontAwesome";
 color: rgb(37,37,37);
 text-shadow: 0px 1px 1px rgba(250,250,250,0.1);
 font-size: 32pt;
 display: block;
 position: relative;
 text-decoration: none;
 background-color: rgb(83,87,93);
 box-shadow: 0px 3px 0px 0px rgb(34,34,34), /* 1st Shadow */
  0px 7px 10px 0px rgb(17,17,17), /* 1nd Shadow */
  inset 0px 1px 1px 0px rgba(250, 250, 250, .2), /* 3rd Shadow */
  inset 0px -12px 35px 0px rgba(0, 0, 0, .5); /* 4th Shadow */
 width: 70px;
 height: 70px;
 border: 0;
 border-radius: 35px;
 text-align: center;
 line-height: 79px;
}

Ngoài ra còn có một vòng tròn lớn hơn ở bên ngoài nút và chúng tôi sẽ sử dụng phần tử giả :before cho nó thay vì thêm đánh dấu bổ sung.

a:before {
 content: "";
 width: 80px;
 height: 80px;
 display: block;
 z-index: -2;
 position: absolute;
 background-color: rgb(26,27,29);
 left: -5px;
 top: -2px;
 border-radius: 40px;
 box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1), 
 inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}

Đèn báo

Dưới nút, có một đèn nhỏ để chỉ định trạng thái Bật và Tắt nguồn. Dưới đây, chúng ta áp dụng màu đỏ cho màu của ánh sáng vì nguồn ban đầu TẮT, chúng ta cũng thêm box-shadow vào để bắt chước hiệu ứng lấp lánh của ánh sáng.

a + span {
 display: block;
 width: 8px;
 height: 8px;
 background-color: rgb(226,0,0);
 box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
 0px 0px 3px 2px rgba(226,0,0,0.5);
 border-radius: 4px;
 clear: both;
 position: absolute;
 bottom: 0;
 left: 42%;
}

Hiệu ứng

Tại thời điểm này, nút của chúng ta bắt đầu trông đẹp và chúng ta chỉ cần thêm một số hiệu ứng vào nó, ví dụ: khi nút đang được “nhấp vào”, chúng ta muốn nút trông giống như đang được nhấn và giữ.

Để đạt được hiệu ứng, đầu tiên box-shadow trong nút sẽ được làm bằng không và vị trí sẽ được hạ xuống một chút. Chúng ta cũng cần điều chỉnh cường độ của ba bóng khác một chút để phù hợp với vị trí của nút.

a:active {
 box-shadow: 0px 0px 0px 0px rgb(34,34,34), /* 1st Shadow */
  0px 3px 7px 0px rgb(17,17,17), /* 2nd Shadow */
  inset 0px 1px 1px 0px rgba(250, 250, 250, .2), /* 3rd Shadow */
  inset 0px -10px 35px 5px rgba(0, 0, 0, .5); /* 4th Shadow */
 background-color: rgb(83,87,93);
 top: 3px;
}

Hơn nữa, khi nút đã được nhấp, nó sẽ vẫn được nhấn xuống và biểu tượng sẽ ‘tỏa sáng’ để cho biết rằng nguồn đang BẬT.

Để đạt được hiệu ứng như vậy, chúng tôi sẽ nhắm mục tiêu nút bằng cách sử dụng lớp giả :target, sau đó thay đổi màu của biểu tượng thành màu trắng và thêm một text-shadow màu trắng nữa.

a:target {
 box-shadow: 0px 0px 0px 0px rgb(34,34,34),
  0px 3px 7px 0px rgb(17,17,17), 
  inset 0px 1px 1px 0px rgba(250, 250, 250, .2), 
  inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
 background-color: rgb(83,87,93);
 top: 3px;
 color: #fff;
 text-shadow: 0px 0px 3px rgb(250,250,250);
}

Chúng ta cũng cần điều chỉnh box-shadow trong vòng tròn bên ngoài nút, như sau.

a:active:before, a:target:before {
 top: -5px;
 background-color: rgb(26,27,29);
 box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1), 
 inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}

Đèn báo sẽ chuyển từ màu đỏ sang màu xanh lá cây mặc định để nhấn mạnh rằng nguồn đã BẬT.

a:target + span {
 box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
 0px 0px 3px 2px rgba(135,187,83,0.5);
 background-color: rgb(135,187,83);
}

Hiệu ứng chuyển đổi

Cuối cùng, để làm cho hiệu ứng của nút chạy trơn tru, chúng ta cũng sẽ áp dụng hiệu ứng chuyển tiếp sau đây.

Đoạn mã dưới đây sẽ thêm cụ thể chuyển đổi vào thuộc tính color và text-shadow là 350ms trong phần tử liên kết.

a {
transition: color 350ms, text-shadow 350ms;
 -o-transition: color 350ms, text-shadow 350ms;
 -moz-transition: color 350ms, text-shadow 350ms;
 -webkit-transition: color 350ms, text-shadow 350ms;
}

Đoạn mã thứ hai bên dưới sẽ thêm phần chuyển đổi cho thuộc tính background-color và box-shadow trong đèn báo sáng.

a:target + span {
transition: background-color 350ms, box-shadow 700ms;
 -o-transition: background-color 350ms, box-shadow 700ms;
 -moz-transition: background-color 350ms, box-shadow 700ms;
 -webkit-transition: background-color 350ms, box-shadow 700ms;
}

Kết quả cuối cùng

• Demo
• Source code

Cách tắt nó

Nếu bạn đã thử nút từ bản trình diễn ở trên, bạn nhận thấy rằng nút chỉ có thể được nhấp một lần, đó là để bật nó, vậy làm cách nào để tắt nó?.

Chúng ta phải làm điều đó với jQuery, nhưng nó cũng thực sự đơn giản. Dưới đây là tất cả mã jQuery mà chúng ta cần.

$(document).ready(function(){
 $('#button').click(function(){
 $(this).toggleClass('on');
 });
});

Đoạn mã trên sẽ thêm lớp ON trong anchor và chúng tôi đã sử dụng  hàm toggleClass từ thư viện jQuery để thêm nó. Vì vậy, khi #button được click vào, jQuery sẽ kiểm tra xem lớp ON đã được thêm vào hay chưa: khi chưa được thêm vào, jQuery sẽ thêm lớp và nếu nó đã được thêm vào, jQuery sẽ loại bỏ lớp đó.

Lưu ý: Đừng quên bao gồm thư viện jQuery khi sử dụng thủ thuật này.

Bây giờ chúng ta phải thay đổi Style một chút. Chỉ cần thay thế tất cả :target bằng class selector .on, như sau:

a.on {
 box-shadow: 0px 0px 0px 0px rgb(34,34,34),
  0px 3px 7px 0px rgb(17,17,17), 
  inset 0px 1px 1px 0px rgba(250, 250, 250, .2), 
  inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
 background-color: rgb(83,87,93);
 top: 3px;
 color: #fff;
 text-shadow: 0px 0px 3px rgb(250,250,250);
}
a:active:before, a.on:before {
 top: -5px;
 background-color: rgb(26,27,29);
 box-shadow: 0px 1px 0px 0px rgba(250,250,250,0.1), 
 inset 0px 1px 2px rgba(0, 0, 0, 0.5);
}
a.on + span {
 box-shadow: inset 0px 1px 0px 0px rgba(250,250,250,0.5),
 0px 0px 3px 2px rgba(135,187,83,0.5);
 background-color: rgb(135,187,83);
}

Cuối cùng, hãy thử nó trên trình duyệt.

• Demo
• Download source code

Nguồn: Hongkiat

The post Hướng dẫn tạo nút Bật/Tắt đẹp với CSS3 appeared first on Nhật Phúc.

Trong bài đăng này, chúng ta sẽ lướt qua các đơn vị đo này để hiểu sâu hơn về các đơn vị đo lường này.

Đơn vị CSS: PX

Pixel là đơn vị đo lường cố định và là đơn vị đo nhỏ nhất trên màn hình nhưng đừng nhầm lẫn điều này với Pixel xác định độ phân giải màn hình. Pixel trong CSS không liên quan gì đến độ phân giải màn hình.

Khi chúng tôi thử xem một trang web cố định ở chiều rộng 1024px, chẳng hạn như trên máy tính bảng có độ phân giải màn hình 1024 x 480px , trang web sẽ không vừa với màn hình.

Tôi đã từng gặp vấn đề này trước đây và phát hiện ra rằng Pixel trong CSS thực sự không phải là một đơn vị tuyến tính – nó thực tế là một phép đo xuyên tâm. Nghĩa là sao?

Về cơ bản, Pixel trong CSS đo chiều dài của vùng hiển thị thay vì độ phân giải màn hình, vì vậy độ phân giải màn hình 1024px không có nghĩa là màn hình cũng có chiều dài 1024px.

Tôi không phải là chuyên gia về các kỹ thuật trong vấn đề này nhưng nếu bạn biết về Lượng giác và muốn tìm hiểu thêm, hãy xem giải thích sau của Sean B. Plamer: đơn vị px trong CSS là một Phép đo góc.

Vì vậy, làm thế nào để chúng tôi tìm thấy khu vực hiển thị thực tế của một thiết bị? May mắn thay, có một công cụ đặc biệt tiện dụng để ước tính gần đúng diện tích hiển thị ở định dạng Pixel, CM đến PX. Chúng ta chỉ cần chiều dài của thiết bị dưới dạng đơn vị cm và PPI (Point Per Inch) / DPI (Dot Per Inch) mà bạn có thể lấy chúng từ hộp thiết bị. Ví dụ: nó chỉ ra rằng máy tính bảng tôi đã sử dụng chỉ có 953px chiều dài.

Kích thước phông chữ Pixels trong Photoshop

Khi làm việc trên Photoshop, chúng ta sẽ thấy rằng kích thước phông chữ được đặt mặc định là Pt (Points) . Đơn vị Pt lý tưởng cho các kiểu in.

Để không nhầm lẫn điều này với px khi chúng ta dùng nó để thiết kế các thành phần cho web, chúng ta có thể thay đổi các đơn vị từ menu sau: Edit > Preferences > Units and Rulers. Ở đó, bạn sẽ có một tùy chọn cửa sổ như được hiển thị trong ảnh chụp màn hình bên dưới. Chọn ‘pixel‘ cho đơn vị Type.

Và như vậy mình cũng lưu ý với các bạn là đơn vị points hoàn toàn khác pixel nhé.

EM

EM là một phép đo tương đối. Trong CSS, EM đề cập đến việc nhân cỡ phông chữ mặc định từ thiết bị hoặc bản thân tài liệu. Đây là một ví dụ; giả sử trong một tài liệu, kích thước phông chữ được chỉ định cho là 16px. 1em là bằng 16px, 2em bằng với 32px và cứ như vậy.

Mặc dù EM theo truyền thống được sử dụng để định kích thước phông chữ và trên thực tế, nó là đơn vị tiêu chuẩn được sử dụng trong các kiểu trình duyệt để đo kích thước phông chữ, chúng ta cũng có thể sử dụng EM để xác định độ dài của phần tử.

Hạn chế duy nhất khi làm việc với đơn vị EM là nó không hoàn toàn trực quan, nhưng có hai cách thực tế chúng ta có thể xử lý điều này. Đầu tiên, chúng ta có thể sử dụng công cụ đổi PX sang EM này; đây là một công cụ máy tính tiện dụng mà tôi thường sử dụng.

Một cách khác là đặt cơ sở pixel tài liệu thành 10px, vì vậy chúng tôi có thể tính toán nó dễ dàng hơn; ví dụ cài đặt 15px là 1.5em. Tôi hy vọng bạn có được ý tưởng cơ bản với ví dụ này.

Phần trăm (%)

Nó đơn giản hơn với tỷ lệ phần trăm, đo lường tương đối với độ dài gốc. Khi chiều rộng cha là 800px sau đó 50% sẽ trở thành 400px. Trong những năm gần đây, khi thiết kế đáp ứng bắt đầu trở thành tiêu chuẩn thiết kế web, đơn vị phần trăm được điều chỉnh thường xuyên hơn trong tự nhiên.

Hãy xem ví dụ sau; mã này bên dưới định nghĩa lớp .container và .main có 60% chiều rộng, nhưng các lớp này tham chiếu đến các lớp cha mẹ khác nhau, do đó chúng tạo ra các độ dài khác nhau.

Các .container sẽ chiếm 60% của trình duyệt khung nhìn rộng, trong khi .main sẽ chiếm .container chiều rộng như cha mẹ trực tiếp của nó.

.container {
  width: 60%;
  margin: 100px auto;
  background-color: #eaeaea;
  padding: 1%;
  height: 250px;
  font-family: Arial;
  text-align: center;
}
.main, .aside {
  line-height: 253px;
}
.main {
  width: 60%;
  height: 100%;
  float: left;
  background-color: #ccc;
}
.aside {
  width: 40%;
  height: 100%;
  background-color: #aaa;
  float: left;
}

Do đó, nó sẽ cho chúng ta kết quả như bên dưới:

Tỷ lệ phần trăm cũng là một đơn vị tương đối, vì vậy nó cũng có một ràng buộc tương tự như đơn vị EM. Không rõ là bao nhiêu phần trăm 15px là của 500px? Điều này thường xảy ra khi chúng ta dịch đơn vị px từ giai đoạn thiết kế sang web trong nhiều trường hợp.

Có hai cách chúng ta có thể thực hiện để giải quyết vấn đề này, hoặc chúng ta làm theo cách truyền thống với máy tính hoặc nếu bạn cảm thấy thoải mái với việc sử dụng CSS Pre-processor, bạn có thể sử dụng chức năng percentage() từ Sass.

Tổng kết

Có rất nhiều cuộc thảo luận về các phương pháp hay nhất của việc sử dụng các đơn vị trong thiết kế web. Nhưng lý tưởng nhất là đơn vị PX nên được sử dụng khi các thuộc tính nói chung cần phải chính xác, ví dụ như offset border-radius và box-shadow ngang hoặc dọc, trong khi đơn vị EM như được đề xuất bởi W3C thì tốt hơn được sử dụng để định cỡ phông chữ. Phần trăm là đơn vị lý tưởng để sử dụng trên các bố cục responsive.

The post Đơn vị trong CSS: Pixels, EM, và phần trăm appeared first on Nhật Phúc.

CSSOM là viết tắt của từ CSS Object Model (Tạm dịch là mô hình đối tượng CSS). CSSOM rất giống với DOM trong HTML, viết tắt của Document Object Model. Bạn có thể hiểu CSSOM giống như DOM dành cho CSS – một giao diện để tương tác với CSS styles.

CSSOM cùng với DOM được trình duyệt sử dụng cho việc hiển thị các trang web, nó ánh xạ các rule trong một file stylesheet với các thành phần tương ứng trên trang web mà cần phải định dạng. Có thể coi tập hợp ánh xạ của các node với style tương ứng trên một trang web là một CSSOM.

CSSOM là một thành phần không thể thiếu trong quá trình trình duyệt tiến hành render ra giao diện một trang web. Tất cả các quá trình này diễn ra tự động, “đằng sau hậu trường”.

Vậy tại sao CSSOM lại quan trọng? Đó là “bản đồ” được trình duyệt sử dụng để hiển thị đúng các kiểu CSS trên một trang web. CSSOM giúp trình duyệt hiển thị các style trên trang dễ dàng hơn. Toàn bộ mọi thứ đều rất kỹ thuật nhưng bạn cần hiểu một chút về quy trình, đặc biệt nếu bạn xây dựng trang web.

Làm thế nào nó hoạt động?

Cả DOM và CSSOM đều được sử dụng rộng rãi bởi tất cả các trình duyệt web để diễn giải và hiển thị các trang web.

Sơ đồ dưới đây là từ hướng dẫn Nguyên tắc cơ bản về web của Google Developers và giải thích cách DOM được hiển thị trong trình duyệt web.

Trong cả DOM & CSSOM, tất cả thông tin được chuyển đổi từ byte thành bản đồ kỹ thuật số hiển thị mọi phần tử trong tài liệu web. Quy trình hoạt động như sau:

1. Trình duyệt tải xuống HTML cho một trang web.
2. Trong khi xử lý HTML, trình phân tích cú pháp có thể chạm vào phần tử liên kết tham chiếu đến stylesheet bên ngoài.
3. Sau đó, stylesheet CSS này được phân tích cú pháp thành một bản đồ bằng cách sử dụng các thông số kỹ thuật của Mô hình đối tượng CSS .
4. Sau đó, mã kết quả có thể được áp dụng cho các phần tử trong DOM.

Tất cả điều này xảy ra rất nhanh chóng và xảy ra với mọi yêu cầu trang. Sơ đồ khác dưới đây giới thiệu một cấu trúc cây mẫu của CSSOM.

Lưu ý cách một số thuộc tính trong sơ đồ có màu chữ xám nhạt hơn. Các thuộc tính này được kế thừa từ cha mẹ (parent). Vì phần nội dung có kích thước phông chữ cụ thể, tất cả các phần tử bên trong phần nội dung cũng nhận được kích thước phông chữ đó trừ khi nó bị ghi đè.

Các chuỗi HTML và CSS được chuyển đổi thành các tokens mà sau đó trình duyệt có thể hiểu là các nodes. Các nodes này giống như các đối tượng trong cấu trúc cây xác định cách toàn bộ trang được xây dựng.

CSSOM và DOM là các mô hình dữ liệu hoàn toàn riêng biệt, do đó chúng được phân tích cú pháp riêng biệt với nhau. Nhưng cả hai đều có cấu trúc cây tương tự và đều phục vụ cùng một mục đích: tạo cho trình duyệt một cấu trúc để hiển thị và xác định các phần tử khác nhau trên trang.

Tại sao các nhà phát triển web nên quan tâm

Vì tất cả việc render diễn ra ở backend, bạn thực sự không cần phải lo lắng nhiều về cây CSSOM. Nhưng nó có thể hữu ích để hiểu cách nó hoạt động.

Một điều cần nhớ là CSSOM phải được tải đầy đủ trước khi trang web được hiển thị, vì nó sẽ xác định mọi phần tử trên trang sẽ trông như thế nào. Nếu trang được tải trước CSSOM, trước tiên nó sẽ xuất hiện dưới dạng HTML thuần túy, sau đó là các style vài giây sau đó.

Các trình duyệt đặc biệt tránh điều đó vì nó sẽ khiến trang trông rất xấu ban đầu. Và điều đáng chú ý là CSSOM không thể được lưu vào bộ nhớ đệm, nó phải được tạo lại trên mỗi trang.

Các tệp CSS thực tế có thể được lưu vào bộ nhớ đệm để tải nội dung nhanh hơn nhưng hiển thị một trang trong trình duyệt luôn yêu cầu chạy trình phân tích cú pháp CSSOM. Điều này cũng có nghĩa là JavaScript có thể có tác động tiêu cực đến việc render và hiệu suất.

Cách tốt nhất để tối ưu hóa trang web của bạn là tạo ra một loạt tài nguyên tự nhiên được tải song song. Có thể thao tác CSSOM bằng JavaScript vì nó là một API JS về mặt kỹ thuật. Nhưng nó không phục vụ nhiều mục đích so với thao tác JavaScript DOM.

Lý do lớn hơn để tìm hiểu về CSSOM là để tự tìm hiểu thêm về cách các trang web thực sự hoạt động. Khi bạn hiểu thêm một chút về toàn bộ quy trình, bạn có thể hình dung toàn bộ mọi thứ kết hợp với nhau như thế nào.

Hy vọng bài viết giúp bạn hiểu về Mô hình đối tượng CSS (CSSOM) là gì và nó ảnh hưởng như thế nào đến các trang web.

Không có nhiều thứ để thao tác trong CSSOM, vì vậy nó khác một chút so với DOM. Tuy nhiên, nó vẫn là một công nghệ quan trọng trong phát triển web.

The post CSSOM là gì? Cách sử dụng CSSOM appeared first on Nhật Phúc.