Lịch sử CSS qua mười lăm năm của 24 cách ◆ 24 cách

                

Tôi đã viết chín bài báo trong 15 năm của 24 cách, và tất cả trừ một trong những bài viết đó có liên quan đến CSS. Trong năm cuối cùng của dự án này, tôi nghĩ rằng tôi sẽ xem lại những bài viết CSS đó. Đó là một hành trình thú vị, và bằng cách đọc những lời của tôi trong 15 năm qua, tôi phát hiện ra không chỉ nền tảng web đã phát triển đến mức nào – mà cả suy nghĩ của tôi đã thay đổi như thế nào.

2005: Điểm bắt đầu bố trí CSS

Các phiên bản trình duyệt web mới nhất: Internet Explorer 6 (tại thời điểm này 4 tuổi), IE5.1 Mac, Netscape 8, Firefox 1 .5, Safari 2

Mười lăm năm trước, những đóng góp của tôi cho 24 cách bắt đầu với một phần về bố cục CSS. Bài báo đó đã khám phá một cái gì đó tôi đã sử dụng trong công việc của tôi. Vào năm 2005, hầu hết công việc tôi đang làm là xây dựng các trang web từ các tệp Photoshop được giao cho tôi bởi các khách hàng của cơ quan thiết kế của tôi. Tôi đã xây dựng một tập hợp các bố cục CSS mạnh mẽ, đã thử và sử dụng để triển khai chúng. Điểm khởi đầu của tôi khi tiếp cận bất kỳ dự án nào là xem xét các comps tĩnh và tìm ra cách bố trí tôi sẽ sử dụng:

• Chất lỏng, nhiều cột không có chân trang
• Chất lỏng, nhiều cột có chân trang
• Chiều rộng cố định, chính giữa

Vào thời điểm đó, vẫn còn nhiều trang web được vận chuyển với bố cục dựa trên bảng. Chúng tôi đã học cách sử dụng phao để tạo cột khoảng bốn năm trước, tuy nhiên bố cục vẫn là một điều khó khăn và thường dễ vỡ. Bằng cách phát triển các mô hình mà tôi biết đã hoạt động, nơi tôi đã tìm ra bất kỳ lỗi lạ nào, tôi đã tiết kiệm cho mình rất nhiều thời gian.

Tất nhiên, tôi không phải là người duy nhất nghĩ theo cách này. Hai trang web mà CSS ban đầu dành cho những người đam mê bố cục lấy phần lớn cảm hứng của họ, có một thư viện các mẫu cho bố cục CSS. Các hộp nhỏ của Sự cố Noodle vẫn đang trực tuyến, glish.com/css thật đáng buồn chỉ có sẵn tại Lưu trữ Internet.

bạn đang thiết kế một trong hai trang web nào? pic.twitter.com/ZD0uRGTqqm[19459003THER, Jon Jon Gold (@jongold) ngày 2 tháng 2 năm 2016

Suy nghĩ này đã được đưa đến một thái cực lớn hơn nhiều vào năm 2011, khi Twitter Bootstrap ra mắt và bắt đầu với toàn bộ khuôn khổ để bố trí và nhiều thứ trở nên phổ biến trong toàn ngành. Trong khi tôi hiểu mối quan tâm của nhiều người dân về mọi trang web cuối cùng trông giống nhau, thì vào năm 2005 tôi là một người thực dụng. Điều đó đã không thay đổi. Tôi đã luôn xây dựng các trang web và điều hành các doanh nghiệp bên cạnh việc truyền bá các tiêu chuẩn web và đóng góp cho nền tảng này. Tôi tất cả về việc hoàn thành công việc, thanh toán các hóa đơn, cân bằng với việc cố gắng làm cho mọi thứ tốt hơn để chúng tôi không cần phải thực hiện nhiều thỏa hiệp trong tương lai. Nếu điều đó có nghĩa là chọn từ một trong số các mẫu, đó thường là một cách tiếp cận rất hợp lý. Không phải tất cả mọi thứ cần phải là một kết quả sáng tạo.

Tuy nhiên, ngày nay, Bố cục lưới CSS và Flexbox có nghĩa là chúng ta có thể có một cách tiếp cận linh hoạt hơn nhiều để phát triển bố cục. Điều này cho phép thực tế và như nhau sáng tạo. Nhu cầu về điểm bắt đầu bố trí – dù đơn giản như của tôi hay khung đầy đủ như Bootstrap – dường như đang giảm, tuy nhiên ở vị trí của chúng lại có mối quan tâm đến các thư viện thành phần. Cách tiếp cận phát triển này được kích hoạt một phần bởi thực tế là bố cục mới cho phép thả một thành phần vào giữa bố cục mà không làm nổ tung toàn bộ.

2006: Phát triển nhanh hơn với các hằng CSS

Các phiên bản trình duyệt web mới nhất: Internet Explorer 7, Netscape 8.1, Firefox 2 Safari 2

Bài viết của tôi năm 2006 một lần nữa được lấy từ công việc tôi đang làm với tư cách là nhà phát triển. Tôi đã luôn luôn là nhiều, nếu không phải là một nhà phát triển phụ trợ hơn là một frontend. Vào năm 2006, tôi đã làm việc trong PHP về các triển khai CMS tùy chỉnh. Chúng cũng thường bao gồm các công việc front-end. Cùng với một số người khác trong ngành, tôi đã thử nghiệm các cách sử dụng CSS, hằng số CSS vì tất cả chúng ta dường như gọi chúng, bằng cách xử lý CSS bằng ngôn ngữ lựa chọn phía máy chủ của chúng tôi.

Trường hợp sử dụng chủ yếu để phát triển, mặc dù là nhà phát triển CMS, tôi có thể thấy tiềm năng cho phép các giá trị này được cập nhật thông qua CMS. Có lẽ để cho phép một trình soạn thảo nội dung thay đổi bảng màu.

Cũng trong năm 2006, phiên bản đầu tiên của Sass đã được phát hành, được tạo bởi Hampton Catlin và Natalie Weizenbaum. Sass, LESS và các bộ xử lý trước khác bắt đầu cung cấp cho chúng ta một cách hợp lý và thanh lịch hơn để đạt được các biến trong CSS.

Năm 2009, nhu cầu về bộ xử lý trước hoàn toàn cho các biến đang dần biến mất. CSS bây giờ có Thuộc tính tùy chỉnh – thứ mà tôi đã không thấy trước vào năm 2006. Các biến CSS CSS này có sức mạnh hơn nhiều so với việc hoán đổi một giá trị trong quá trình xây dựng. Chúng có thể được thay đổi linh hoạt, dựa trên một cái gì đó thay đổi trong môi trường, thay vì được đặt tĩnh tại thời điểm xây dựng.

2009: Mã sạch hơn với bộ chọn CSS3

Các phiên bản trình duyệt web mới nhất: Internet Explorer 8, Firefox 3.5, Safari 4, Chrome 3

Sau khi ngừng viết 24 cách, năm 2009 tôi đã viết bài này về Bộ chọn CSS3, hoàn thành với các dự phòng jQuery do một số trong số các bộ chọn này không thể sử dụng được trong Internet Explorer 8.

Ngày nay, các bộ chọn hữu ích này có hỗ trợ trình duyệt rộng, chúng tôi cũng có một số lượng lớn các bộ chọn mới là một phần của đặc tả Cấp 4. Phần thay đổi của thông số kỹ thuật cấp 4 cho thấy một bản tóm tắt tuyệt vời về những gì đã được thêm vào trong những năm qua. Hỗ trợ trình duyệt cho các bộ chọn mới hơn này không nhất quán hơn, MDN có một danh sách tuyệt vời với trang cho mỗi bộ chọn chi tiết các ví dụ sử dụng và hỗ trợ trình duyệt hiện tại.

2012: Ưu tiên nội dung với bố cục lưới CSS3

Các phiên bản trình duyệt web mới nhất: Internet Explorer 10, Firefox 17, Safari 6, Chrome 23

Tác phẩm năm 2012 của tôi là khởi đầu cho mối quan tâm của tôi về đặc tả Bố cục Lưới CSS. Trước đó vào năm 2012, tôi đã tham dự một hội thảo được đưa ra bởi Bert Bos, trong đó ông đã trình diễn một số mô-đun CSS giai đoạn đầu, bao gồm cả đặc tả Bố cục Lưới CSS. Tôi sớm phát hiện ra rằng sẽ có một triển khai Grid trong IE10, trình duyệt mới được phát hành vào tháng 9 năm 2012 và tôi bắt đầu học cách sử dụng Grid Layout. Bài viết này dựa trên những gì tôi đã học được.

Vấn đề về nguồn so với thứ tự trực quan

Là một nhà phát triển CMS, tôi ngay lập tức liên kết khả năng bố trí các mục và ưu tiên nội dung, với các trình soạn thảo CMS và nội dung. Tôi rất muốn tìm cách cho phép các biên tập viên nội dung ưu tiên nội dung qua các điểm dừng và tôi cảm thấy Bố cục lưới có thể cho phép chúng tôi làm điều đó. Hóa ra, chúng ta vẫn còn cách mục tiêu đó. Mặc dù Grid không cho phép chúng tôi tách màn hình trực quan khỏi thứ tự nguồn, nhưng nó có thể phải trả giá. Các trình duyệt không trực quan và thứ tự tab của tài liệu theo nguồn và không hiển thị trực quan. Điều này giúp dễ dàng tạo trải nghiệm bị ngắt kết nối và khó sử dụng nếu về cơ bản chúng ta làm lộn xộn việc hiển thị các yếu tố, di chuyển chúng ra khỏi cách chúng xuất hiện trong tài liệu. Tôi vẫn nghĩ rằng một vấn đề chúng ta cần giải quyết là làm thế nào để cho phép các nhà phát triển chỉ ra rằng màn hình trực quan nên được coi là thứ tự đúng hơn là thứ tự tài liệu.

Thông số lưới được chuyển vào

Một số vấn đề trong phiên bản đầu tiên của thông số lưới này là rõ ràng trong bài viết của tôi. Tôi cần sử dụng bộ xử lý trước, để tính toán các cột mà một phần tử sẽ trải dài. Điều này một phần là do các thông số kỹ thuật lưới ban đầu không có khái niệm về tài sản gap . Ngoài ra, thông số ban đầu không bao gồm vị trí tự động và do đó, mỗi mục phải được đặt rõ ràng trên lưới. Những điều cơ bản của đặc tả kỹ thuật cuối cùng đã có, tuy nhiên trong những năm sau đó, đặc điểm kỹ thuật đã được cải tiến và phát triển. Chúng tôi có các khoảng trống, và vị trí tự động, và thuộc tính lưới-mẫu-khu vực đã được giới thiệu. Vào thời điểm Grid xuất xưởng trong Firefox, Chrome và Safari, nhiều điều khó khăn tôi gặp phải khi viết bài viết này đã được giải quyết.

2015: Lưới, Flexbox, Sắp xếp hộp: Hệ thống mới để bố trí

Các phiên bản trình duyệt web mới nhất: Edge 13, Firefox 43, Safari 9, Chrome 47

Lưới vẫn không được vận chuyển trong nhiều trình duyệt hơn nhưng thông số kỹ thuật đã được chuyển sang. Chúng tôi đã hỗ trợ cho các khoảng trống, với các thuộc tính lưới-hàng lưới-cột-khoảng cách và khoảng cách lưới . Suy nghĩ của riêng tôi về đặc điểm kỹ thuật và các thông số kỹ thuật liên quan đã được phát triển. Tôi đã bắt đầu dạy lưới không phải là một mô-đun độc lập, mà bên cạnh Flexbox và Box Alocate. Tôi đã cố gắng chứng minh làm thế nào các mô-đun này làm việc cùng nhau để tạo ra một hệ thống bố cục để phát triển web hiện đại.

Một nơi khác mà suy nghĩ của tôi đã chuyển từ bài viết Grid đầu tiên của tôi vào năm 2012, là về mặt sắp xếp lại nội dung và khả năng tiếp cận. Vào tháng 7 năm 2015 tôi đã viết một bài báo có tựa đề, Bố cục CSS hiện đại, Sức mạnh và Trách nhiệm trong đó tôi nêu ra những mối quan tâm này.

Một số thứ thay đổi, và một số vẫn giữ nguyên. Các thuộc tính khoảng trống tiền tố - cuối cùng đã được chuyển sang đặc tả Hộp căn chỉnh để chúng có thể được xác định cho bố cục Flex và bất kỳ phương pháp bố trí nào khác trong các khoảng trống cần thiết trong tương lai. Điều tôi không mong đợi, là bốn năm sau tôi vẫn sẽ được hỏi về Grid so với Flexbox:

Sau đó, một câu hỏi tôi luôn được hỏi là liệu bố cục và hộp linh hoạt lưới CSS có phải là hệ thống bố cục cạnh tranh hay không, như thể có thể hỗ trợ người thua cuộc trong cuộc cạnh tranh bố cục CSS. Tuy nhiên, thực tế là hai phương thức này sẽ kết hợp với nhau như một hệ thống để thực hiện bố cục trên web, mỗi phương thức chơi theo một số điểm mạnh nhất định và phục vụ các tác vụ bố cục cụ thể.

2016: Điều gì tiếp theo cho Bố cục lưới CSS?

Các phiên bản trình duyệt web mới nhất: Edge 15, Firefox 50, Safari 10, Chrome 55

Vào năm 2016, chúng tôi vẫn không có Grid trong các trình duyệt và tôi ngày càng trông giống như tôi đang bán phần mềm CSS. Tuy nhiên, với thông số kỹ thuật tại Khuyến nghị của Ứng viên và có vẻ như chúng tôi sẽ có lưới ở ít nhất hai trình duyệt vào mùa xuân, tôi đã viết một bài viết về những gì có thể xảy ra tiếp theo cho lưới.

Chủ đề chính là tính năng phụ, điểm đó đã bị xóa khỏi đặc tả Cấp 1. Nhóm làm việc CSS vẫn đang cố gắng quyết định xem một phiên bản của subgrid bị khóa ở cả hai chiều có được chấp nhận hay không. Trong phiên bản này, chúng tôi đã khai báo : subgrid trên mục lưới, sau đó các hàng và cột của nó sẽ bị khóa theo dấu vết của cha mẹ. Tôi rất vui vì cuối cùng đã quyết định cho phép các lớp con một chiều. Điều này có nghĩa là bạn có thể sử dụng các rãnh cột của cha mẹ, nhưng vẫn có một lưới ẩn cho các hàng. Điều này cho phép các mẫu như mẫu tôi đã mô tả trong Mẫu thiết kế được giải quyết bằng subgrid. Vào cuối năm 2019, chúng tôi không có hỗ trợ trình duyệt rộng cho subgrid, tuy nhiên Firefox đã chuyển giá trị trong Firefox 71. Hy vọng các trình duyệt khác sẽ làm theo.

Cấp độ 2 của đặc tả lưới cuối cùng đã trở thành tất cả về việc thêm hỗ trợ cho subgrid, và vì vậy chúng tôi không có bất kỳ tính năng nào khác mà tôi đã đề cập trong phần đó. Tất cả các tính năng này được trình bày chi tiết trong các vấn đề trong repo Github của Nhóm làm việc CSS và aren đã bị quên. Khi chúng ta quyết định các tính năng cho Cấp độ 3, có lẽ một số trong số chúng sẽ thực hiện việc cắt giảm.

Thật đáng để chờ đợi subgrid, vì phiên bản một chiều mang lại cho chúng ta nhiều sức mạnh hơn, và khi tôi nhìn lại 24 bài viết này, nó thực sự nhấn mạnh bao nhiêu trò chơi dài đóng góp cho nền tảng này. Tôi đã đề cập trong đoạn kết thúc bài viết năm 2016 của tôi rằng bạn không nên cảm thấy bị bỏ qua nếu ý tưởng hoặc trường hợp sử dụng của bạn không được thảo luận ngay lập tức và thêm vào một thông số kỹ thuật, và đó vẫn là trường hợp. Những người trong chúng tôi tham gia vào việc chỉ định CSS và triển khai CSS trong các trình duyệt quan tâm rất nhiều đến phản hồi của bạn. Chúng tôi phải cân bằng với nhu cầu về công cụ này là đúng.

2017: Quà tặng Giáng sinh cho bản thân tương lai của bạn: Kiểm tra nền tảng web

Các phiên bản trình duyệt web mới nhất: Edge 16, Firefox 57, Safari 11, Chrome 63

Năm 2017 tôi đã từ bỏ việc nói trực tiếp về bố cục, và thay vào đó đã xuất bản một bài viết về thử nghiệm. Không phải về việc kiểm tra mã của riêng bạn, mà là về dự án Kiểm tra nền tảng web và cách đóng góp cho các thử nghiệm giúp đảm bảo khả năng tương tác giữa các trình duyệt có thể có lợi cho nền tảng – và bạn.

Bài viết này vẫn còn liên quan đến ngày hôm nay như hai năm trước. Tôi thường hỏi mọi người về cách họ có thể tham gia với CSS và thử nghiệm là một nơi tuyệt vời để bắt đầu. Thông số kỹ thuật cần các thử nghiệm để tiến triển để trở thành Khuyến nghị, do đó, các thử nghiệm đóng góp có thể giúp cải thiện tiến trình của một thông số kỹ thuật. Bạn cũng có thể giúp giải phóng thời gian của các biên tập viên đặc tả, để chỉnh sửa thông số kỹ thuật của họ, bằng cách đóng góp các bài kiểm tra mà họ có thể cần phải làm việc.

Dự án Kiểm tra nền tảng web gần đây đã có tài liệu mới và được cải tiến. Nếu bạn có thời gian rảnh rỗi và muốn giúp đỡ, hãy xem và xem bạn có thể xác định một số địa điểm cần xét nghiệm hay không. Bạn sẽ tìm hiểu rất nhiều về thông số kỹ thuật CSS mà bạn đang kiểm tra trong khi thực hiện và bạn có thể cảm thấy rằng mình đang đóng góp hữu ích và rất cần thiết cho sự phát triển của nền tảng web.

2018: Nghiên cứu một thuộc tính trong thông số kỹ thuật CSS

Các phiên bản trình duyệt web mới nhất: Edge 17, Firefox 64, Safari 12, Chrome 71

Tôi gần như tránh xa bố cục trong tác phẩm năm 2018 của mình, tuy nhiên tôi đã làm nổi bật thuộc tính Grid Layout Grid-auto-rows trong bài viết này. Nếu bạn muốn hiểu làm thế nào để khai thác tất cả các chi tiết của một thuộc tính CSS, thì bài viết này vẫn hữu ích.

Một điều đã thay đổi kể từ khi tôi bắt đầu viết theo 24 cách, đó là lượng thông tin tuyệt vời có sẵn để giúp bạn học CSS. Cho dù bạn là người thích đọc như tôi, hay người học tốt nhất từ ​​video, hoặc bằng cách làm theo hướng dẫn, tất cả đều có sẵn cho bạn. Bạn không có để dựa vào việc hiểu các thông số kỹ thuật, mặc dù tôi sẽ khuyến khích mọi người làm quen với việc đó, nếu chỉ có thể thực sự kiểm tra một hướng dẫn dường như đang làm gì đó ngoài kết quả mã.

2019: Và đó là một gói

Các phiên bản trình duyệt web mới nhất: Edge 18, Firefox 71, Safari 12, Chrome 79

Năm nay là lần đếm ngược cuối cùng cho 24 cách. Với rất nhiều ấn phẩm khác tạo ra nội dung tuyệt vời, có lẽ ít có nhu cầu viết lách trong những ngày cuối mỗi năm. Các kho lưu trữ sẽ là một lịch sử của những gì quan trọng, những gì chúng ta đã nghĩ và những vấn đề của ngày hôm nay – nhiều trong số chúng ta đã giải quyết theo cách mà các tác giả không bao giờ có thể tưởng tượng được vào thời điểm đó. Tôi có thể xem qua các bài viết của mình về cách suy nghĩ của tôi phát triển qua nhiều năm và tôi rất phấn khích về những gì tiếp theo khi tôi trở lại vào năm 2005, tự hỏi làm thế nào để bố trí CSS dễ dàng hơn.