CSS là một ngôn ngữ dễ học nhưng không phải lúc nào ta cũng làm nó tốt. Vấn đề phát sinh là điều chắc chắn gặp nhưng làm sao để giải quyết chúng đơn giản nhất. Bài viết dưới đây có thể giúp ích cho bạn.

Làm sao để căn giữa mọi thứ theo chiều dọc?

Nói về căn giữa thì có khá nhiều tip để làm về vấn đề này. Một trong số chúng thì bạn có thể tìm hiểu tại https://www.sitepoint.com/atoz-css-quick-tip-float-and-clear/  nhưng đó là theo chiều ngang.

Một vài người nó căn giữa theo chiều dọc là một thứ gì đó rất khó. Nhưng mẹo này sẽ giúp bạn dễ dàng làm xử lý được nó mà không tốn quá nhiều CSS và có thể làm việc trên mọi element, thậm chí bạn còn chẳng phải quan tâm đến kích thước của các màn hình hay chiều ngang, chiều rộng của các thẻ nữa.

Mình có một đoạn code dưới đây.

<div class="container">
  <div class="modal"> 
  <h2>Message title</h2> 
  <p>Message text lorem ipsum dolor sit amet</p> 
</div>
</div>

Để căn giữa tuyệt đối thẻ .modal thì ta cần phải sử dụng thuộc tính position. Thẻ .container bao quanh sẽ là toàn bộ khung trình duyệt của bạn và thẻ .modal nằm bên trong là absolute theo thẻ .container

.container {position: relative; width: 100vw; height: 100vh;} 
.modal {position: absolute; top: 50%; left: 50%;}

Sau đó ta cần đưa thẻ .modal trở lại vị trí chính giữa của thẻ .container. 

Nếu ta biết được width và height của thẻ .modal thì quá ez. Bạn có thể dùng margin, padding ... để có thể đem lại hiệu quả căn giữa. Thực sự nó rất đơn giản.

Nhưng nếu modal có thể thay đổi kích thước thì sao? Vậy những thuộc tính nêu trên đều không hoạt động.

Do đó chúng ta cần sử dụng thuộc tính translate để làm điều này.

.modal {
position: absolute; top: 50%; left: 50%;
/* Thêm đoạn này vào trong css của thẻ .modal */
transform: translate(-50%, -50%);
}

Như vậy là bạn đã có thể căn giữa theo chiều dọc 1 thẻ mà không cần quan tâm đề chiều dài cũng như kích thước của thẻ đó.

Bạn có thể xem code tại đây

 

Tham khảo các khóa học lập trình online, onlab, và thực tập lập trình tại TechMaster

Làm sao có thể giải quyết vấn đề vendor prefix?

Bạn có thể nhận thấy là ở ví dụ trên thì mình không sử dụng một chút vendor prefix nào cho ví dụ. Có 2 lý do:

1 là để cho code ví dụ nó đơn giản, dễ hiểu và một phần là mình chẳng bao giờ bao giờ viết vendor prefix cả.

Không phải do mình không quan tâm đến các trình duyệt mà mọi người sử dụng, cũng chẳng phải mình là tên dev lười biếng hay ngu dốt cả ( có thể là có 1 chút). Mình vẫn thường xuyên kiểm tra các thuộc tính mà mình sử dụng trên caniuse.com. Bạn cũng có thể sử dụng nó để kiểm tra những gì mà bạn sẽ viết sẽ hỗ trợ cho những trình duyệt nào.

Quay lại vấn đề xử lý vendor prefix thì mình khuyên các bạn nên sử dụng một bộ tiền xử lý CSS ( CSS preprocessor ) như LESS hay Sass. Chúng sẽ giúp chúng ta vendor prefix để phù hợp với các trình duyệt mà thậm chí mình còn chẳng thấy nó ở đâu cả. Chỉ cần 1 tùy chọn là đoạn CSS đó ra sẽ được generate ra mà thôi.

Tất nhiên nếu bạn không muốn sử dụng  LESS, Sass hay ... để viết thì bạn có thể sử dụng trang web https://autoprefixer.github.io/ nó sẽ giúp ích cho bạn rất nhiều.

CSS của tôi không chạy, ai đó giúp tôi với?

Để trả lời câu hỏi này thì thật sự khó, mình không thể ngồi cạnh mà xem bạn đang viết những gì chí ít là xem toàn bộ nhưng gì bạn viết để có thể tìm được nguyên nhân nhưng mà mình có thể giúp bạn một chút. Thử tham khảo quy trình gỡ lỗi của tôi đi.

  • Kiểm tra các tập tin có liên quan được lưu hay chưa?
  • Kiểm tra xem những đoạn hightlight của trình duyệt và xem có lỗi ở đó không?
  • Kiểm tra xem liệu thiếu dấu ngoặc kép, dấu ngoặc đơn hoặc dấu chấm phẩy
  • Đảm bảo các file bạn đang chỉnh sửa những gì bạn nhìn vào trong trình duyệt
  • Đảm bảo bất kỳ đường dẫn là chính xác (cho các tập tin CSS, hình ảnh hoặc bất cứ điều gì khác). Bạn có thể kiểm tra xem tất cả các tập tin bên ngoài của bạn đã được nạp đúng cách trong Network, Source hoặc tab Console trong các công cụ phát triển của trình duyệt ( như Google dev tools).
  • Kiểm tra class và div đảm bảo rằng tất cả các tên đã được viết đúng chính tả.
  • Inspect element đảm bảo rằng tất cả các thuộc tính CSS đã được viết đúng chính tả (trong Chrome, bất kỳ thuộc tính không hợp lệ hoặc giá trị này sẽ được đánh dấu bằng một biểu tượng cảnh báo màu cam trong phần xem thuộc tính của thẻ).

Rất có thể qua ngần ấy bước thì lỗi của bạn đã phơi bày ra cả rồi. Nếu vấn đề không được giải quyết thì hãy copy đoạn code của bạn lên Codepen hay JSfiddle để họ có thể giúp đỡ bạn.

Bài viết được dựa theo SitePoint