Tìm hiểu thuộc tính position trong CSS

Chắc hẳn khi các bạn làm layout, chuyển PSD sang HTML. Thì việc sử dụng thuộc tính position trong CSS là không thể thiếu. Như là khi dùng :before hay :after hoặc làm menu đa cấp hoặc header cố định một chỗ khi scroll trình duyệt…..

Hay là di chuyển một mục nào đó mà không gây ảnh hưởng tới các phần khác. Giúp bạn linh động trong việc làm layout mà không phải lo lắng gì cả. Cho nên hôm nay chúng ta sẽ cùng tìm hiểu về thuộc tính position trong CSSnhé.

Giá trị của thuộc tính position trong css

Thuộc tính position hiện tại có những giá trị thường được dùng sau:

• relative: Giá trị này thường được sử dụng để thiết lập vị trí của phần tử mà không gây ảnh hưởng tới việc hiển thị ban đầu cũng như các phần tử khác
• absolute: Giá trị này dùng để thiết lập vị trí của một phần tử theo phần tử cha có giá trị thuộc tính position là relative hoặc absolute
• fixed: Giá trị này giúp cho phần tử luôn cố định một chỗ khi chúng ta scroll trình duyệt
• static: Đây là giá trị hiển thị mặc định của thuộc tính position trong CSS.

Và đi kèm với thuộc tính position thì đó là các thuộc tính dùng để căn chỉnh vị trí cho phần tử

• top: Thuộc tính này giúp chúng ta căn chỉnh phần tử từ trên xuống dưới nếu giá trị > 0 và ngược lại nếu giá trị < 0 nó sẽ chạy ngược lên trên
• bottom: Thuộc tính này thì ngược lại so với top, nó giúp chúng ta căn chỉnh phần tử từ dưới lên trên nếu giá trị > 0 và ngược lại nếu giá trị < 0 nó sẽ chạy xuống dưới
• right: Thuộc tính này giúp chúng ta căn chỉnh phần tử từ phải qua trái nếu giá trị > 0 và ngược lại nếu giá trị < 0 nó sẽ chạy qua phải
• left: Thuộc tính nàygiúp chúng ta căn chỉnh phần tử từ trái qua phải nếu giá trị > 0 và ngược lại nếu giá trị < 0 nó sẽ chạy qua trái

Đọc xong thấy có vẻ khó hiểu nhỉ. Chắc chắn là vậy rồi. Đọc không mà. Vì thế mình có làm ví dụ từng thuộc tính một cho các bạn xem đây.

Giải thích các vị trí trong position

Trước khi đi sâu giải thích các giá trị trong position. Mình xin giải thích trước các thuộc tính về vị trí như top, right, bottom, left thì mình có làm hình minh họa như dưới đây cho các bạn dễ hình dung nè

Khi một phần tử cha có thuộc tính position: relative và bạn muốn canh phần tử con theo phần tử cha đó và phần tử con sử dụng position: absolute. Chúng ta sẽ sử dụng các thuộc tính vị trí trên để căn chỉnh cho nó. Nên mình có sơ lược vài ý dưới đây cho các bạn

1. Nếu chỉ có giá trị top = 0 và left = 0 thì phần thì phần tử sẽ nằm góc bên trái trên cùng
2. Nếu chỉ có top = 0 và right = 0 thì phần tử sẽ nằm góc bên phải trên cùng
3. Nếu chỉ có bottom = 0 và left = 0 thì phần tử sẽ nằm góc bên trái dưới cùng
4. Và nếu chỉ có bottom = 0 và right = 0 thì phần tử sẽ nằm ở góc bên phải dưới cùng
5. Các trường hợp giá trị > 0 hay < 0 thì nó sẽ di chuyển phần tử theo ý bạn(đã giải thích ở mục trên)
6. Trường hợp đều có 4 giá trị top right bottom left và đều = 0 phần tử con(absolute) sẽ phủ hết phần tử cha(relative) nếu các bạn không set thuộc tính width, height cho phần tử con
7. Nếu chỉ có left = 0 và right = 0 thì phần tử con có độ rộng là 100% của phần tử cha nếu không set thuộc tính width cho phần tử con
8. Tương tự nếu chỉ có top = 0 và bottom = 0 thì phần tử con có chiều cao 100% của phần tử cha nếu không set thuộc tính height cho phần tử con
9. Ngoài ra các thuộc tính khác vẫn sử dụng chung với position đều được như margin, background…..

Các bạn xem thêm codepen dưới đây cho dễ hiểu hơn nha. Các bạn nên mở cái Codepen này lên và thay đổi giá trị top, right, bottom hay left để thấy được cách nó hoạt động nha.

Giá trị relative

Như đã nói ở trên giá trị này giúp căn chỉnh phần tử mà không gây ảnh hưởng đến các phần tử khác. Bình thường chúng ta dùng margin hay padding chắc chắn sẽ đẩy các phần tử khác ra một đoạn gây ảnh hưởng tới layout.

Các bạn thấy chứ mình dùng position: relative cho phần tử image thế là nó nằm lên trên đoạn text luôn mà đoạn text không hề di chuyển. Nếu bình thường bạn không dùng position: relative mà bạn dùng margin hay padding sẽ ảnh hưởng ngay.

Giá trị absolute

Đây giá trị này mình mới giải thích kỹ cho các bạn về các vị trí ở trên mục giải thích các vị trí. Thường thường giá trị absolute này khi được sử dụng cho phần tử mà phần tử cha của nó đang có relative hoặc absolute . Để lúc này nó sẽ chạy theo phần tử cha đó

Các bạn nhớ dùng Codepen này của mình thay đổi giá trị thử nhé. Hiện tại mình để top: 0 và left: 0nên nó nằm trên cùng bên trái đó. Có gì không hiểu kéo lên mục giải thích các vị trí ở trên nha.

Giá trị fixed

Đây là giá trị thần thánh mà bạn hay gặp. Khi vào một website nào đó bạn scroll trình duyệt mà cứ thấy cái menu nó cứ đứng ở đó hoài hay là cái button chẳng hạn. Đó là giá trị fixed. Giá trị này không phụ thuộc vào phần tử cha hay gì cả. Khi nào scroll trình duyệt là nó hoạt động thôi. Xem ví dụ để hiểu nè.

Ngoài lề giá trị sticky

Mình không có đề cập nó ở trên là vì nó không được hỗ trợ nhiều. Nhưng cũng nói sơ cho các bạn hiểu và hình dung. Nó cũng na ná fixed nhưng mà khi các bạn scroll đụng đó nó sẽ nằm như fixed và khi các bạn scroll lên ra khỏi nó nó sẽ quay lại vị trí ban đầu.

Xem demo phát cho dễ hiểu nè. Vì nó không hỗ trợ nhiều nên mình khuyến khích các bạn không nên dùng nà.

Lời kết

Thuộc tính position trong CSS rất quan trọng nên mình khuyên các bạn nên học và nắm vững chúng thật kỹ càng. Nó được sử dụng rất nhiều trong việc code website hiện nay lắm đặc biệt là cắt layout và làm các thành phần như menu đa cấp(sử dụng nhiều position lắm).

Nếu có thời gian mình sẽ viết thêm bài áp dụng thuộc tính position này vào trong một thành phần nào đó trong website cho các bạn dễ hình dung nha. Còn giờ thì cám ơn bạn đã đọc bài và chúc các bạn một ngày tốt lành.

Read More

Case study: Tối ưu hoá hình ảnh cho Ehkoo

Công khai PR bài gốc ở Ê-ku có sửa sang chút đỉnh  https://ehkoo.com/bai-viet/ehkoo-what-is-webp-image-optimization-cloudinary

---

Hình chụp bởi Alora Griffiths. Nguồn: Unsplash

Chuyện như chưa bắt đầu

Nếu bạn chưa biết thì Cloudinary là một dịch vụ lưu trữ, quản lý và phân phối media gần như miễn phí. Bạn có thể upload hình ảnh, video lên Cloudinary rồi phân phối chúng qua hệ thống CDN. Cloudinary dựa vào CDN của những ông lớn như Akamai, Fastly, và CloudFront, tự động chọn lấy nhà phân phối đang có hiệu suất tốt nhất để đảm bảo tài liệu được chuyển đến người sử dụng chỉ trong vòng vài nốt nhạc.

Ngoài chuyện upload, bạn còn có thể trực tiếp chỉnh sửa tài liệu (gọi là "transformation") chỉ bằng việc thay đổi tham số trên URL của tài liệu, chẳng hạn như chỉnh kích thước ảnh, đổi định dạng, crop hình, vân vân và mây mây. Cloudinary còn có những tính năng nâng cao khác mà bạn có thể tìm hiểu thêm ở đây.

Mình sử dụng Cloudinary cho Ehkoo từ những ngày đầu tiên. Cloudinary đặc biệt hào phóng khi cung cấp gói Free cho phép chứa 10GB media, 20GB bandwidth, 300k tập tin và 20k thao tác chuyển đổi hàng tháng. Theo ước lượng ban đầu của một trang không ai thèm vào thì gói này là đủ rồi, cho đến một ngày...

Khoảng 3 tuần trước, mình nhận được một email từ Cloudinary nhắc nhở rằng tài khoản đã sử dụng gần hết bandwidth trong tháng. Bình thường thì website sử dụng khoảng 80-90% bandwidth cho phép, nên chuyện này cũng không có gì lạ lắm. Nhưng vì đây là lần đầu tiên nhận được email cảnh báo nên cũng đáng để xem xét thử.

Thống kê cho thấy ngày hôm đó có 8.64k requests, ngốn 1.06GB bandwidth.

Suy nghĩ đầu tiên: Hmm, anh đẹp trai nào hotlink mấy tấm hình của iem rồi.

Nhưng "Thật bất ngờ - Trúc Nhân", thống kê khác cho thấy phần lớn requests lại đến từ chính ehkoo.com. Có nghĩa là website "vô tình" có thêm traffic, đẩy bandwidth hình ảnh lên cao.

Tuy nhiên cũng không quên chỉ mặt điểm danh anh Tét Văn Thót Chấm Vê Nờ đã tích cực lấy bài đồng thời tích cực hotlink nha.

Suy nghĩ tiếp theo: Có khi nào Cloudinary giả vờ tính sai để ép mình mua gói trả phí không?

Trong khoảng thời gian từ 1/10 đến 31/10/2018 thì Ehkoo có 12,637 lượt truy cập. Tính trung bình mỗi lần load trang khoảng 10 hình (ngoài trang chủ thì nhiều hình hơn), mỗi hình tầm 200KB, vị chi là khoảng 25,274,000KB ~ 25.274GB . Vậy là Cloudinary có lý khi gửi email cảnh báo.

Thành thật xin lỗi anh Cloudinary vì em đã nghi ngờ anh .

Thiệt may vì ngoài chuyện "la làng", Cloudinary còn tốt bụng gợi ý thêm vài chiêu để giảm bandwidth xuống.

25% of your bandwidth is being used to deliver PNG images. You can save considerable bandwidth by delivering non-transparent PNGs as JPGs. If you aren’t already doing so, consider using the ‘lossy’ flag to do this conversion automatically.

Consider using automatic WebP, JPEG-XR and JPEG image format selection for each different browser using 'f_auto' in delivery URLs.

Accessing original images without any transformation is responsible for 89% of your bandwidth usage. If possible, specify image dimensions to match the actual view size.

Ồ kê, đã có hướng dẫn, bắt đầu làm thôi.

Bắt đầu tối ưu hoá

Chuyển PNG thành JPG

Bước đầu tiên quá rõ ràng rồi, chuyển tất cả hình PNG thành JPG để giảm dung lượng file xuống. Thao tác này khá đơn giản vì Cloudinary cho phép bạn đổi định dạng hình ảnh chỉ bằng cách đổi đuôi file trên URL là xong.

-https://res.cloudinary.com/ehkoo/image/upload/v1541164603/imqusj.png
+https://res.cloudinary.com/ehkoo/image/upload/v1541164603/imqusj.jpg

Có một điểm lưu ý là tập tin JPG không hỗ trợ nền trong suốt (transparent background), nhưng vì web của Ehkoo nền trắng nên cũng không thành vấn đề. Bài học ở đây là nên thiết kế web nền trắng nhé.

Tự động chuyển qua WebP nếu trình duyệt hỗ trợ

WebP là một định dạng ảnh mới được phát triển bởi Google từ 2010. So với JPG thì WebP thường có dung lượng nhỏ hơn khoảng 30%, nhưng vẫn đảm bảo chất lượng tương đương. WebP hỗ trợ nền trong suốt như với PNG nhưng có thể nhẹ hơn đến 25%. WebP cũng hỗ trợ ảnh động như GIF nhưng có vẻ vẫn chưa phổ biến lắm.

Hiện tại các trình duyệt có thể đọc hiểu WebP bao gồm Chrome (duh), Opera và Edge. Firefox sẽ hỗ trợ WebP từ phiên bản 65, riêng Safari thì vẫn chưa thấy nói gì.  Xem hỗ trợ WebP ở CanIUse.

Bằng cách thêm vào tham số f_auto, Cloudinary sẽ tự động trả về file hình ở định dạng WebP nếu trình duyệt của người dùng hỗ trợ. Trong trường hợp còn lại, hình JPG sẽ được trả về.

-https://res.cloudinary.com/ehkoo/image/upload/v1541164603/imqusj.jpg
+https://res.cloudinary.com/ehkoo/image/upload/f_auto/v1541164603/imqusj.jpg

Thêm lý do nữa, là 63% lượng khách truy cập Ehkoo sử dụng Chrome cùng với 11% sử dụng Chrome Mobile, nên chỉ cần hiển thị WebP cho 3/4 tổng lượng truy cập cũng đã là một cải tiến lớn rồi.

Ngoài lề, liệu WebP có thống trị định dạng hình ảnh sau này?

Hên xui. Một trong những những hạn chế của WebP là không hỗ trợ tải ảnh theo kiểu tăng tiến (progressively). Nghĩa là trình duyệt vẫn phải download hết file ảnh trước khi hiển thị. Ở mức độ nào đó thì hạn chế này có thể ảnh hưởng đến trải nghiệm người dùng. MozJPEG, một định dạng ảnh được phát triển bởi Mozilla, có thể giải quyết hạn chế này, đồng thời vẫn đảm bảo những tính năng hay ho của WebP.

Nếu bạn quan tâm hơn về chủ đề tối ưu hoá hình ảnh, đừng bỏ qua bài thuyết trình dưới đây của Kornel Lesiński tại hội nghị performance.now() vừa diễn ra hồi đầu tháng 11. Kornel giải thích cách tập tin JPG được mã hoá, trình bày một kỹ thuật sử dụng HTTP2 để tiến hành tải ảnh một cách tăng tiến (ở cả server của bạn lẫn CDN), và một mẹo "kỳ cục" để sử dụng hình được nén bằng AV1 ngay hôm nay 

Mách nhỏ
Bạn nên nghía qua https://squoosh.app/, công cụ chuyển đổi ảnh trực tuyến vừa được Google giới thiệu tại hội nghị Chrome Dev Summit 2018 vừa qua. Ứng dụng này cho phép bạn chuyển đổi qua lại giữa các định dạng với nhau, hỗ trợ cả WebP và MozJPEG.

Nếu không sử dụng Cloudinary để tự động truyền tải WebP, bạn có thể dùng thẻ PICTURE để thực hiện fallback.

<picture>
  <source srcset="img.webp" type="image/webp" />
  <img src="img.jpg" alt="My image" />
</picture>

Trình duyệt sẽ tự động chọn lấy nguồn ảnh phù hợp, và trong trường hợp xấu nhất, sử dụng hình của thẻ IMG. Thẻ SOURCE còn hỗ trợ thuộc tính media, cho phép bạn quy định media queries khi hình ảnh này được hiển thị.

<picture>
  <source srcset="/media/examples/surfer-240-200.jpg" media="(min-width: 800px)" />
  <img src="/media/examples/painted-hand-298-332.jpg" />
</picture>

Hiện tại thì thẻ PICTURE đã có thể dùng được trên tất cả trình duyệt thường xuân (evergreen) trừ IE ra nhé :p

Thu nhỏ hình ảnh

Cái này thì nhờ vào tình hình thực tế của Ehkoo thôi. Website hiện tại đang có giao diện giống như bên dưới.

Vì container không bao giờ vượt quá 1280px và nội dung chính không vượt quá 960px, Ehkoo chỉ cần để chiều rộng của hình trong khoảng 1000px là tương đối hiệu quả rồi. Để tự động điều chỉnh kích thước ảnh, bạn thêm vào tham số c_scale,w_XXX với XXX là chiều rộng mong muốn. Cloudinary sẽ giữ nguyên tỉ lệ ảnh sau khi chỉnh sửa.

-https://res.cloudinary.com/ehkoo/image/upload/v1541164603/imqusj.jpg
+https://res.cloudinary.com/ehkoo/image/upload/f_auto,c_scale,w_1000/v1541164603/imqusj.jpg

Kết quả

Ngày 1/11 là khi bắt đầu sử dụng WebP đó nha

Đây là tình hình của Ehkoo trong 30 ngày qua. Sau khi áp dụng tất cả chiêu trò ở trên thì mọi thứ có vẻ khá khả quan. Lấy con số ra hù nhau một chút:

Ngày	Requests (1000)	Bandwidth (GB)
29/10	8.64	1.06
06/11	22.2 (257%)	1.25 (118%)
12/11	25.7 (297%)	1.71 (161%)

Số % là so sánh với ngày 29/10 - trước khi áp dụng tối ưu hóa

Trong những ngày đỉnh điểm, lượng request tăng lên 2.5 - 3 lần, trong khi bandwidth tiêu thụ chỉ tăng khoảng 1.2 - 1.6 lần. Hiện tại, website chỉ đang sử dụng khoảng 74% tổng lượng bandwidth cho phép.

Trong khi đó, số pageviews và sessions vẫn tiếp tục tăng.

Tạm kết

Tình hình đã tạm ổn nhưng vẫn còn nhiều chỗ cần cải tiến thêm. Chẳng hạn như hình ảnh ngoài trang chủ vẫn đang sử dụng hình với kích thước gốc, hay hình thu nhỏ ở phần Bài viết liên quan cũng vậy. Dù sao thì nếu website/ứng dụng của bạn cần chứa hình ảnh, hãy cân nhắc chuyển qua WebP và sử dụng Cloudinary nhé.

Read More

Bài học đau đớn khi chập chững CSS + Kinh hoàng bài tập Tribute Page trên freecodecamp

Bài này không nhằm chê freecodecamp, thậm chí còn khen nhé :v

Trong bài có sử dụng sự trợ giúp của các bạn Hồ Xuân Diễn, Robin Huy, Anh Nguyễn, Da Peng, Nguyễn Quốc Đại.   (no particular order)

1. Những kinh hoàng

1.1 Kinh hoàng thứ nhất,

Challenge này có vẻ đến quá đột ngột, người học mới chỉ được học qua về html và css và bootstrap (một cái mình nghĩ là hơi sai thời điểm). Thật ra lý thuyết mà nói thì những nguyên liệu cần thì cung cấp đủ rồi nhưng không có cách pha chế thì sao pha được. Không có cái "chốt", tổng quan, hướng dẫn cách làm sao cho đúng. Ngay từ đầu mà tạo thói quen xấu thì sau khó sửa.

1.2. Kinh hoàng thứ hai

Đáp án sử dụng liên hoàn trận bootstrap với hình thức là một mớ class tung hoành ngang dọc trừu tượng, làm chúng em bối rối. Tại sao lại đưa bootstrap vào lúc này? Vào bài tập code ĐẦU TIÊN trong đời người freecodecamper? Thay vì làm css thuần cho quen tay, cho hiểu rõ ngọn ngành vấn đề, lại gợi ý người ta dùng bootstrap. Damn...

Tóm gọn lại là...

Dù như vậy nhưng freecodecamp vẫn là một nơi rất đáng học nhóe. Đặc biệt là mục Javascript. Hơn nữa cộng đồng freecodecamp Việt Nam (2 group FB là free code camp Hanoi và free code camp Sai gon) đều chứa những con người hết sức đáng yêu, nhờ có họ xui mình mới biết đến "diễn đàn" này để viết bài :v

2. Cách làm bài Tribute Page

Sau đây là cách làm bài này theo CSS đúng nghĩa, không bootstrap boot triếc gì hết, chưa nắm css đã bootstrap nhiều hư người!

2.1. Bước 1 là bước quan trọng nhất: Quan sát tổng quan

Nhiều bạn sẽ lao đầu vào gõ html luôn. Vậy không sai nhưng sẽ mất công add class về sau. Nếu ý thức được ít nhất vài class chính mà từng element sở hữu để viết đến đâu thì add class đến đó sẽ tiết kiệm thời gian và công lực cho chúng ta.

Đừng phang bàn phím vội mà hãy sống chậm lại và yêu thương nhiều hơn... nhìn vào trang web và tạm ước lượng có những font gì, có những kiểu cách gì... lặp đi lặp lại thì tạo class đó đi đã.

Ta nhìn vào trang Tribute Page này và nhận thấy kiểu cách đầu tiên đập vào mặt là mớ số đậm này đây

Còn chờ gì nữa mà không sản sinh ra ngay 1 class text-bold

.text-bold {
    font-weight: bold;
}

ê chỗ này có chứ nghiêng nè, tạo class chữ nghiêng thôi chứ chờ gì nữa

.text-italic{
  font-style: italic;
}

Ngắm ngắm thì sơ qua trang web này có 5 size chữ. Mình tạm gọi theo size áo là XS, S, M, L, XL.

.text-xs{
font-size: 1rem;
}

.text-s{
font-size: 1.2rem;
}

.text-m{
font-size: 1.5rem;
}

.text-l{
font-size: 2rem;
}

.text-xl{
font-size: 3rem;
}

Hiển nhiên phản xạ của chúng ta là dùng px để định dạng kích thước font chữ bởi vì px là thứ quen thuộc thân thương nhất còn những cái như rem hay % thật khó hiểu và xa vời. Nhưng rem và % mới là cặp đôi hoàn hảo nâng niu font chữ web... sẽ ghi rõ ở phần 2.3.

2.2. Div và div và div

Hồi đầu mình cũng không thích thằng <div> này đâu vì chẳng hiểu đâu sinh ra từ "div" nghe khốn khốn... chẳng rõ nghĩa gì cả. header thì nói toẹt ra là <header>, paragraph thì nói ra là <p>, list nói toẹt ra là <li>

Nhưng khổ đau thay <div> lại là thứ không thể thiểu ở bất kì web nào dù nhỏ đến lớn.

Công dụng của nó là ĐÓNG GÓI các thành phần cần đóng gói.

Tại sao cần đóng gói?

Dễ xử hơn chứ sao. Ví dụ như bạn có rất nhiều ảnh trong ổ cứng thì bạn hay chia thành các thư mục lớn thư mục nhỏ bởi như vậy dễ quản hơn

Còn đối với trang web thì ta chú ý ngay từ trước khi viết html, phải gói các element vào các div class để dễ bề cai trị và áp đặt lề lối (lề trái lề phải lề trên lề dưới). Đừng cho cả đống ngồi lũ lượt ra tràn lan khắp nơi.

Lấy ví dụ là cái trang Tribute page loài mèo mình nhái lại layout của trang Tribute Page ông Truman đen trắng bên freecodecamp ấy. Bạn sẽ thấy chúng được phân chia như sau.

Cái body trắng bao lấy content xanh. content bao lấy cái ảnh-kèm-caption có nền trắng, cái ảnh-kèm-caption thì bao lấy ảnh và caption. Lưu ý là không phải caption là nền trắng mà là cả ảnh và caption đều có nền trắng, thế nên mới gói ảnh và caption lại 1 div class .image-with-cap

Biết thế rồi nên hồi sau, khi viết html nhét luôn div class vào chỗ cần thiết

2.3. Làm gì cũng nghĩ đến những thằng bé hơn mình

Không phải nhà ai cũng có điều kiện như bạn để sở hữu chiếc máy tính bàn với màn hình desktop (và cục cây đồ sộ kêu rần rần hàng đêm). Biết bao con người ngoài kia với hoàn cảnh khó khăn đang khổ sở lướt web với những thiết bị bé tí như iPad, iPhone X,... Vì thế chúng ta phải biết nghĩ cho họ và viết một cái website hiển thị tốt trên những thiết bị tội nghiệp đó chứ đừng có hống hách một mình một lối.

Vì thế nên những đơn vị đo tuyệt đối như px phải bị loại trừ và thay vào đó là đơn vị đo tương đối, chúng rất linh hoạt uyển chuyển, đó là vw, %, rem.

• vw là bao nhiêu phần trăm so với chiều ngang màn hình
• vh là bao nhiêu phần trăm so với chiều dọc màn hình
• % là bao nhiêu phần trăm so với kích thước cha mẹ
• em là gấp bao nhiêu lần kích thước font chữ tiêu chuẩn của trang web của bạn.

Ứng dụng:

2.3.1. Kích thước font chữ

2.3.1.1. Tuyên bố font size tiêu chuẩn của web của bạn.

Bằng cách set font-size: bao nhiêu %; cho body.

phần trăm ở đây được hiểu là phần trăm so với con số 16px.

Vì font size tiêu chuẩn của trình duyệt thường là 16px nhưng mà chưa chắc được. mỗi thằng trình duyệt một kiểu, lỡ thằng nào ko biết nghĩ cho người nghèo dùng điện thoại bé nó set cho 10px thì có mà mờ mắt. Hoặc thằng nào cận thị lâu ngày nghĩ ai cũng như mình nên cho luôn 20px đi chẳng hạn. Cho nên chúng ta những web dev luôn lường trước được điều đó và dùng phần trăm cho body để dễ bề xử lí hậu họa về sau.

body {
font-size: 90%;
}

2.3.1.2. Set kích thước font chữ cho các đoạn văn trong trang

Không biết có ai như mình không, bị cận nhưng vì đôi mắt một mí quá quyến rũ nên không nỡ đeo kính, lúc mình đọc báo trên điện thoại, thỉnh thoảng có vài trang web chữ bé tí. Mình vô trình duyệt đặt chế độ chữ TO rồi thì hầu như là các trang chữ TO lên thật, nhưng một số trang vẫn cứng đầu không theo?!

Vì cái thằng viết web đó nó đặt font chữ bằng px đó mấy pa! Đã px là không xê dịch (một cách thông thường) được.

Hơn nữa, giả sử muốn cả web của mình chữ to lên hay bé đi (nhưng vẫn phải có thứ tự trên dưới, có cái này to hơn cái kia, chứ không phải đều đều toàn bộ 1 size). Khi làm phiên bản desktop, vì hay show hình show các chương mục show đủ thứ linh tinh... đảm bảo nhu cầu thẩm mĩ... thì chữ bé nó mới ngầu. Còn trên phiên bản di động, vứt hết mọi râu ria chỉ để lại chữ và vài cái ảnh cơ bản, thì lại to chữ ra cho dễ đọc tìm kiếm thông tin. Không lẽ thay size từng đoạn văn một.

Ví dụ ban đầu web có 3 font như sau

.to{
size: 100px;
}
.vua{
size: 40px;
}
.nho{
size: 10px;
}

Thế giờ muốn cả lũ này gấp đôi lên thì lại phải thế này

.to{
size: 200px;
}
.vua{
size: 80px;
}
.nho{
size: 20px;
}

Khi đó dùng rem

Cũng không có gì khó cả, 1rem = kích thước font chữ vừa set trong body = kích thước phần trăm so với font chữ của trình duyệt (thường là 16px)

Và rem nó tỉ lệ với nhau nên mình chỉ cần thay đổi đúng thằng body là được

Đây ban đầu giả sử body là 100% (100% thường là 16px)

body{
font-size: 62.5%;     tức là 62.5% x 16px = 10px
}

còn cái font chữ của các đoạn văn thì nó như sau:

.to{
font-size: 10rem;           tức là 10 x 10px = 100px
}
.vua{
font-size: 4rem;            tức 4 x 10px = 40px
{
.nho{
font-size: 1rem;            tức 1 x 10px = 10px
}

Khi cần cả lũ to lên gấp đôi thì chỉ việc chỉ điểm thằng body

body{
font-size: 125%;        tức 125% x 16px = 20px
}

Đẹp cả hai đường nội ngoại

2.3.2. Kích thước div

Cái này đỡ nhức nách hơn kích thước font chữ, chỉ dùng duy nhất %

Với điều kiện bạn đóng gói div cẩn thận, lớp lang... rồi, thì không cần quan tâm đến gì ngoài %

% ở đây là % so với kích thước cha mẹ chúng. Và từ giờ trở đi tất cả những gì ta làm là so với div cha mẹ chúng, chứ không phải so với đơn vị đo tuyệt đối toàn cầu như px. Mọi thứ đều tương đối, y như việc bạn đẹp trai nhất nhà nhưng lại xấu trai nhất lớp vậy.

bởi vì là so với cha mẹ chúng, nên khi cần chúng co dãn theo chiều rộng màn hình thì ta không cần set chúng với vw (view width = phần trăm chiều rộng màn hình) bởi vì tổ tiên cố nội nó là thằng body đã được set chiều rộng 100vw = chiều rộng của loại màn hình mà người dùng đang sử dụng.

Điều ta cần làm là

• Set mọi thứ với % (trừ phông chữ thì xem lại mục 2.3.1 liền trước)
• Lo sao cho chúng có cây gia phả tử tế, chặt chẽ, không mồ côi cơ nhỡ. Khi nó không có tổ tiên cha mẹ để dựa vào thì khó điều chỉnh. Xem lại mục 2.2. div div và div

3. Cụ thể các bước làm

Lẽ ra một bài tập nhỏ con thế này không phải rùm beng lên thế. Nhưng các bạn thông cảm, mình xác định lâu dài chứ không phải chợp giật, làm cho qua. Học cách làm bài này rồi còn có nền tảng làm những bài lớn hơn nữa chứ không phải thấy nó nhỏ mà khinh. Ngay từ đầu mất thời gian một tí về sau càng đỡ mất thời gian.

Lưu ý là các kích thước không thật sự y chang như trang tribute page mẫu vì mình ngại đo nên mình ước lượng bằng mắt... Nhưng tinh thần layout như nào thì giữ nguyên như thế và các bạn hoàn toàn áp dụng được.

Link xem trực tiếp bài mình làm ở Codepen, xin lỗi vì indent như !@#$:

.

body{
width: 100vw;
  padding: 0;
  margin:0;
  font-family: noticia text, arial;
  font-size: 90%;
  line-height:1.5;
}

Chiểu rộng của body mình xác định luôn là 100vw tức bằng đúng chiều rộng màn hinh, cho chắc.

Cái padding và margin là vì nhiều trình duyệt hay tự thêm margin và padding vào, gây xấu xí cho trang web của mình nên ngay từ đầu mình set để nó không còn đường đẻ trứng.

có tận 2 font vì 1 font đẹp và 1 font cùi dự phòng khi trình duyệt không hỗ trợ cái font thật thì nhảy về dùng font cùi.

font-size của body như đã nói, mình dùng %. ở đây mình cho 90%

line-height là dãn dòng, mình cho 1.5 vì mặc định là 1 trông hơi dầy so với bài mẫu

ul{
  padding:0;
}

cái ul là danh sách, mặc định là danh sách luôn lùi vào nhưng mình không thích nên mình cho nó lùi ra bằng việc set padding = 0

.text-size-1{
  font-size:1rem;
}
.text-size-2{
  font-size:1.4rem;
}
.text-size-3{
  font-size:2rem;
}
.text-size-4{
  font-size:3rem;
}

xin lỗi các bạn vì ở trên thì nói là text SML mà đây lại dùng là 1, 2, 3, 4.. nhưng chắc các bạn cũng dễ hiểu là 1 là bé nhất và 2 3 4 là to dần. Các bạn có thể đặt bất cứ tên gì bạn muốn miễn nó khiến bạn thấy tiện.

img{
  width:100%;
}

Khi ảnh vào trang nó sẽ to đùng ra vì kích thước gốc to của nó. Nhưng mình hãm lại bằng cách cho nó chiều rộng 100% tức là có to cỡ mấy cũng cấm vượt mặt cha mẹ nó... mà cha mẹ nó thì không vượt ông bà nó... và tổ tiên nó là body thì mình đã đặt là chiều ngang body là 100vw (chiều rộng màn). Các bạn thấy đấy, chỉ cần quấn div cho chặt là mọi thứ không cần xoắn nhiều mà tự biết thân biết phận.

.cap{
  margin: auto 10%;
}

caption của ảnh được mình đặt margin trên = dưới = auto = mặc định, và margin trái = phải = 10%

Khi đó dù co kéo thế nào thì ảnh và cap vẫn co giãn theo chiều rộng màn và luôn đẹp và 2 margin của cap thì luôn bằng nhau, cân đối và đẩy chữ vào giữa

.quote{
  margin-left:10%;
}

quote là trích dẫn, là cái đoạn trong ngoặc kép ở gần cuối. Nó hơi lùi vào nên mình cho cái margin-left 10%

.content{
  margin:140px 7%;
  background: lightcyan;
  padding: 5%;
}

content là cái phần nền xanh, như bài mẫu Truman thì là cái phần nền xám. Vì nó cách cạnh trên 1 đoạn không đổi khi co kéo màn hình, hơn nữa lại là chiều height nên không quá nguy hiểm, nên mình mới dùng px. Mình ước lượng tầm 140px.

Nhưng còn lề trái lề phải thì rất quan trọng nên mình cần nó co dãn theo màn, màn nhỏ thì lề ít, màn to thì lề to. Mình đặt 7%

Padding dễ gây bối rối vì nhiều người không phân biệt được giữa padding và margin. Thật ra rất đơn giản.

con mèo là nội dung
thành hộp các tông là border
margin là khoảng cách giữa cái hộp và bức tường
padding khoảng cách giữa con mèo và cái hộp

.image-with-cap{
  margin: 3%;
  background:white;
  padding:6px;
}

Khi set margin cho cái phần ảnh-kèm-caption (nền trắng) mình dùng % vì khoảng cách giữa nó và cái phần xanh cần được co dãn. Nhưng khi set padding cho nó thì dùng px vì cái chỗ màu trắng tí tị này luôn luôn tí tị, mình ước lượng rồi cho nó 6px

@media screen and (max-width: 600px){

}

Đây là code với ý nghĩa là "khi nào màn hình bé hơn 600px thì áp dụng các setting sau đây".

Con số 600 là tùy chọn, thay đổi được. Thường thì máy tính bảng là 800, điện thoại tầm 400. Lưu ý là cái chiều rộng px này không phải là cái độ phân giải px đâu nhé. Mình cũng đếch biết nó quy đổi kiểu gì nhưng kể cả mấy máy điện thoại màn hình super HD, 1280px thì chiều rộng css của nó vẫn tầm 400px 500px thôi nhé.

  .image-with-cap, .danh-sach-meo{
    margin: 1%;
    padding:1%;
  }
  .content{
    margin: 100px 2%;
  }

Màn hình bé rồi nên các thứ lề liếc mình cho nhỏ xíu luôn

  .text-size-3, .text-size-4 {
    font-size: 1.5rem;
  }

font size cũng tem tém lại.

Vậy là xong rồi, chúc các bạn thành công! Nhớ tín dụng :v

Read More