Bài mới nhất

Sửa Đóng
Thư mục: IT |
Quan trọng
Đăng ngày: 02:09 29-07-2008
#The Last Entry... Some Plus CSS - Code patch v2.0

Lâu lắm rồi không đụng vào phần CSS của blog. Không phải vì hết thứ để nghịch, cũng không hẳn vì do không có thời gian,... Cái lý do chính vì sao nên sự thì cũng chán chẳng buồn nói nữa, chung quy thì không tại mình tất tại người, không tại người thì tại trời vậy .

Hôm vừa rồi phá lệ mới lục lại chút CSS, nguyên nhân thì cũng do đồng chí Plus dở chứng thôi (nói chính xác thì là do các bác vnteam bày trò). Ban đầu cũng định để mặc blog nó như thế, ra sao thì ra. Nhưng rồi ngó đi ngó lại, thấy ngứa mắt cái vụ nền trắng quá, thôi thì ta động tay động chân chút vậy .

Và sau một lúc ngồi test code để tìm cách tối ưu khắc phục tình trạng lởm khởm vừa rồi, bạn đã thêm vào CSS một số đoạn code sau:
Code:

<!--*Fixed blog interface for Plus down-grade 22/07/2008*{}
<!--Secondary module header and content{}

.col-150 .rc_bd .rc_bc .hd .titlebar,  .col-150 .rc_bd .rc_bc .bd {background-color:transparent;}
<!--Primary module header and content{}
.col-600 .rc_bd .rc_bc .hd .titlebar, .row-920 .rc_bd .rc_bc .hd .titlebar, .row-760 .rc_bd .rc_bc .hd .titlebar, .col-600 .rc_bd .rc_bc .bd, .col-600 .rc_bd .rc_bc .ft, .row-920 .rc_bd .rc_bc .bd, .row-920 .rc_bd .rc_bc .ft, .row-760 .rc_bd .rc_bc .bd, .row-760 .rc_bd .rc_bc .ft {background-color:transparent;}

<!--Fixed white-background{}
#blast .bd, #profile_highlight .bd, #calendar .bd, #folder .bd, #article_new .bd, #subscribe_link .bd, #statistic .bd, #update_date .bd, #search_module .bd, #comment_list tbody th, #comment_list tbody td, #comment_new .bd, #buddy .bd, #buddy_list tbody th, #friendlist .bd #friendlist_list tbody th, #friendlist .bd #friendlist_list tbody td,  #subscriber_list tbody th, #subscriber_list .bd tbody td
{background-color:transparent;background-image:url(image_link);}

<!-- *Fixed font_display for articles, but don't really need cus has a better way*{}
.mod-alist-full .main-bd {text-align:justify;border-top:2px dotted #BDBDFF;}
#blog_quote div *, .mod-alist-full .main-bd div, .mod-alist-full .main-bd div *, .mod-alist-full .main-bd table, .mod-alist-full .main-bd table div, td, th {font-size:100%;}
<!--*End Fix.*{}


 -   Hai phần code đầu tiên là dành để sửa lỗi nền không trong suốt cho phần header và body của các module.
 -   Phần code thứ 3 là dành để sửa lỗi nền trắng cho toàn bộ các module (các đoạn code của Dephiaco0l.l0ve công bố chỉ sửa một số module bị lỗi ở blog họ - những module không có sự thiết lập nền riêng), với image_link là link của ảnh nền đối với những blog có sử dụng ảnh nền cho các module đó.
 -   Phần code cuối cùng là dành để sửa lại việc hiển thị của font chữ trong bài viết, trước đấy code chỗ này hơi bị dài, nhưng sau đấy bạn tìm ra cách khác tối ưu hơn (hoặc cũng có một số code bạn nhận thấy tác dụng không như ý) nên đã lọc bỏ đi nhiều. Hiện code này chỉ còn tác dụng sửa lại lỗi kích thước font chữ của bài viết và của các thành phần sử dụng table, div. Đây là những code thiết lập chung, cho nên ngắn gọn, nhanh chóng và tối ưu hơn cách thiết lập code chỉnh sửa font-size trực tiếp cho từng thành phần có sử dụng table như bên blog co0l.l0ve đã chia sẻ.
Lưu ý:
-    Các đoạn code bị gạch ngang, đấy là những đoạn code bạn chỉ dùng để để thiết lập cho riêng blog này, nhưng ai thích dùng cũng không sao, không ảnh hưởng gì đến các thành phần khác =).
-   Vì đây là các đoạn vá lỗi cho CSS của Plus nên vị trí chèn thích hợp là ngay phần đầu tiên của các code CSS, như thế sẽ tránh việc đụng chạm đến các thiết lập CSS riêng mà lâu nay các ấy đang sử dụng.

Về một số lỗi khác mà bạn không đề cập trong phần code CSS trên, như lỗi line-height, lỗi cấu trúc bài viết khi sử dụng thuộc tính chữ in nghiêng,...
-    Nói về line-height, như entry trước đây bạn đã đề cập, plus đã fix thuộc tính này thành một giá trị cố định. Đáng lý theo như thiết lập của file CSS mới, thì line-height  này sẽ bằng 150% độ cao của font chữ có kích thước là 13px. Nhưng các đồng chí vnteam có lẽ quên mất rằng bên dưới file CSS mới này, có một thiết lập chỉnh sửa lại kích thước font chữ của phần bài viết Entry lên 16px, do đó line-height thực tế là 150% của 16px, vì vậy nên nhìn các dòng chữ khá là "cao ráo", và điều này gây ra lỗi hiển thị không được hay lắm đối với các bài viết sử dụng font-size nhỏ cỡ 12px trở xuống. W.Dephia sử dụng một cách mà đồng chí này cho là giải quyết được vấn đề line-height, đó là chỉnh lại kích thước font của phần bài viết về giá trị 13px:
Code:

<!-- *Fixed line-height display for articles, nearly correct*{}
.mod-alist-full .main-bd {font-size:13px;}


Thoạt nhìn thì đối với các kích cỡ font chữ bình thường hay sử dụng (từ 10-12px đến 16-18px), mọi chuyện  dường như đã  trở về  quỹ đạo bình thường. Nhưng thực ra,  về bản chất thì vẫn không có gì thay đổi, chiều cao các dòng chữ vẫn bị giới hạn bởi một kích thước như nhau, và nếu có sự thay đổi lớn về kích thước font chữ, vấn đề trên lập tức sẽ lại nảy sinh: với font chữ quá nhỏ thì các dòng rời rạc, dường như không có sự liên kết, còn đối với các font chữ quá to, các dòng chữ lại sít vào nhau, rất khó đọc .

Vì vậy lời khuyên đối với những ai sử dụng cách này, đó là không nên dùng cỡ chữ quá to hoặc quá nhỏ, chỉ nên nằm trong khoảng giới hạn mà bạn đã nói ở trên, nếu như ko muốn gặp vấn đề trong bố cục bài viết .

--- Thật ra, về vấn đề này bạn đã có phương án giải quyết triệt để, nhưng ko thể thiết lập chung cho toàn blog mà chỉ ở từng bài một, thành ra hơi mất công. Vì vậy tạm thời bạn không công bố, chỉ mong chờ động tĩnh ở phía vnteam xem sao đã, còn ai tự mày mò ra được để sử dụng thì cũng tốt thôi .

-    Tiếp theo về vấn đề lỗi cấu trúc bài viết đối với các Entry trước đây có sử dụng kiểu chữ in nghiêng. Bạn nhấn mạnh từ "trước đây", tại vì lỗi này thực chất không có ảnh hưởng gì đến các bài viết mới có sử dụng kiểu chữ in nghiêng như một số người lầm tưởng, - ví dụ như bài viết này. Lý do xảy ra hiện tượng này là do hồi đầu, bộ công cụ bài viết của  phần soạn thảo entry mới, các chức năng như in đậm B, in nghiêng I và gạch chân U được thay thế bởi các thẻ HTML <strong>, <em><u>. Một thời gian sau thì các thiết lập này được thay bằng việc tùy chỉnh style trong thẻ <span style="font-weight: bold; font-style: italic; text-decoration: underline;">. Việc thay đổi này tất nhiên là tốt hơn, không có vấn đề gì xảy ra. Cho đến sau lần chỉnh sửa vừa rồi, khi có sự xuất hiện của dòng code này:
Code:

.mod-alist-full div em {float: right;}


Vâng, điều đó có nghĩa là các thẻ <em> xuất hiện trong các thẻ <div> thuộc phần bài viết sẽ bị đẩy lệch sang bên phải. Toàn bộ bài viết đều nằm trong
.mod-alist-full .main-bd, mà .main-bd cũng là một thẻ div, cho nên toàn bộ các thẻ <em> đều "tử vì đạo". Tình hình đến đây không thể không khiến cho bạn có một suy nghĩ là, các đồng chí "chuyên gia" của vnteam có mục đích gì khi chỉnh sửa code CSS kiểu này? Nếu đây không phải là một hành vi có chủ đích thì thật sự bạn hơi nghi ngờ khả năng đọc hiểu và xử lý code CSS của các đồng chí "chuyên gia" này .

Cách khắc phục lỗi hiển thị này, không có phương án nào khả thi bằng việc phải tự tay chỉnh lại từng bài bị lỗi một, vì việc sửa thông qua CSS ta không thể thiết lập đc thuộc tính float:none, code đều bị lọc sạch trơn. Thật là toàn làm khó nhau .


Thôi bạn xin dừng phím tại đây, mọi chuyện có gì hạ hồi phân giải. Bạn mới đi đo mắt về. Sau hơn 4 năm không đi thay kính lẫn kiểm tra mắt, giờ khám lại mới phát hiện ra là bạn bị loạn thị mắt trái... Cộng thêm việc đeo kính mới chưa quen nên việc viết lách tập trung lâu vào màn hình khiến mắt hơi mỏi, đầu hơi choáng váng. Đành gác máy đi ngủ sớm vậy .


Author: m3Noa - 29 July, 2008 - Copyright © 2008.
*Please ask for permission before copying this.

--- Có lẽ đây cũng là Entry cuối cùng trước khi chia tay... tháng bảy.

Nhưng ai mà biết đc...
Trích dẫn (0)
Tìm tag: Design, Tips, IT, CSS, HTML, fix, yahoo, 360plus
Bạn bè blog có liên quan: co0l.l0ve, [W].Dephia
  • Báo cáo

    Bella 17:30 14-10-2009

    Bạn vui tính ghê đó
  • hic.ban oi.ban sang nha` tui xem gium tui voi.sao ma pluss cua tui no chay cham qua ah.phai lam sao day.bo tri sao ma cu loan het ca len ay.hix hix
  • dung" la` 1 lu~ ga` dj nho*` con gaj"hoc...tap..daj...ca ne` cac" ku oi
  • Hi hi, hoá ra là mình đọc thiếu mấy chữ cuối, cũng may là mình không làm thầy thuốc...!
  • Báo cáo

    j0shdt 09:56 02-08-2008

    Xuất ngoại xuất ngoại...... nghe có ý đồ gì đây ý nhờ..... anh Noa sắp đầu wân cho nền giáo dục nước ngoài àh? Chúc  anh may mắn nhoa!
  • Báo cáo

    co0l.l0ve 02:23 02-08-2008

    Đi du học hả Noa?

  • Báo cáo

    D.P.T 21:31 31-07-2008

    anh Noa hâm !! Rồi một ngày chúng ta sẽ gặp nhau...
  • Báo cáo

    RikG 17:58 31-07-2008

    Cố gắng đừng nghỉ blog nhá ! TỚ ủng hộ ẤY hết mình -"-
  • Chào bạn,

    Nghe mọi người nói về bạn đã lâu, hôm nay mới ghé thăm được.  lại đọc thấy cái Entry cuối cùng này, mình vô duyên mất rồi.

    Đừng bỏ blog nghe bạn!

    Báo cáo

    Noa17:38 04-08-2008

    Cảm ơn bạn quan tâm. Mình chưa từng nói là sẽ bỏ blog mà .
  • Báo cáo

    Hatrang2007 21:51 30-07-2008

    Noa này ! Bài viết của Noa hay wá, mình mới tập tành tạo blog nên rất thích, có gì Noa chỉ cho mình với nhé !
    Báo cáo

    Noa00:22 31-07-2008

    Rất hân hạnh! Chỉ sợ khả năng có hạn ko giúp đc gì thôi .
  • Noa dc nhieu nguoi yeu thich nhi?
    Báo cáo

    Noa00:19 31-07-2008

    Nói chung là... "đủ dùng" .
  • thank noa nhiu nha, mjnh lam duoc chut ruj do

    hj` nhung van con xau lem

    Báo cáo

    Noa00:19 31-07-2008

    Cứ làm nhiều rồi sẽ quen thôi
  • Báo cáo

    co0l.l0ve 20:09 29-07-2008

    Noa ơi,cái Flash khi cố định cái Width ở IE có tác dụng nhưng ở FF lại vô tác dụng nhờ :( ?
    Báo cáo

    Noa22:25 29-07-2008

    Cái này liên quan đến mức độ ưu tiên các đối tượng của từng trình duyệt, nhiều khi ko kiểm soát hết đc, chỉ còn cách là cố gắng tránh những vụ như thế thôi. Nhưng vụ điều chỉnh width FF vẫn đc chứ nhỉ ?
  • Báo cáo

    co0l.l0ve 20:06 29-07-2008

    hô hô,Noa phải đeo kinh à?;)).Nghe đâu bảo lại xoá cái file CSS gây lỗi rồi,nên một số lỗi đã được khắc phục,hehe,riêng về phần code thì chỉ có chờ Noa lên tiếng.
    -Lại định làm chuyến du lich xuyên Việt nữa à mà bỏ bê Blog thế?
    Báo cáo

    Noa22:20 29-07-2008

    Em đeo kính cũng đc gần 12 năm rồi còn gì . Có điều hồi trước chỉ là bị cận, giờ lòi thêm cái chứng "loạn" thôi .

    Làm gì có tiền mà làm tour xiên Vịt nữa hở bác .
  • add blog mần wen nha pác....................njce entry
    Báo cáo

    Noa19:22 29-07-2008

  • Báo cáo

    [W].Dephia 14:01 29-07-2008

    Đâu có vô giá trị, phần này dùng cho trình bày bài viết rất hay nè :

    .mod-alist-full .main-bd div, .mod-alist-full .main-bd div *, .mod-alist-full .main-bd table, .mod-alist-full .main-bd table div, td, th {font-size:100%;}

  • Báo cáo

    [W].Dephia 13:14 29-07-2008

    Tình hình là vừa fát hiện các tùy chỉnh cho chữ và line-height vừa mất là đọc thấy bài này :-| Heehe bữa h wen với cái line-height cao 1 chút rồi, tự dưng hôm nay mất thấy sao sao  =))
    Báo cáo

    Noa13:25 29-07-2008

    Vnteam chơi cùn, cắt bỏ nguyên cả file CSS, làm bây giờ mấy đoạn code vá lỗi coi như vô giá trị =)). Nhưng dù sao tạm thời thế này vẫn tốt hơn ;)).

    Chuẩn bị tinh thần làm entry vá lỗi mới cho lần chỉnh sửa tiếp theo đê .
  • Báo cáo

    Noa 12:42 29-07-2008

    Tình hình là có lẽ bà con cô bác kêu gào nhiều quá , làm các bác vnteam sợ rồi, cho nên file CSS blog_property-1.08.css đã bị gỡ bỏ khỏi phần stylesheet của plus . Ko biết là bỏ hẳn hay lại xào nấu gì thêm đây .
  • Báo cáo

    RikG 09:29 29-07-2008

    Phải công nhận là Noa viết bài hay quá. Nếu Noa mà nghỉ blog thì quá uổng cho cộng đồng Plus thật !
    Báo cáo

    Noa12:51 29-07-2008

    Hohhoh,... cảm ơn. Nhưng tình hình là có khi bạn nghỉ thật đấy .
  • Báo cáo

    Vũ Nguyễn 08:26 29-07-2008

    bác Plus dạo này nhiều thay đổi chán phèo, kekekeke ui mắt thế nào thế
    Báo cáo

    Noa12:50 29-07-2008

    Hóa ra lâu nay bác bận đi làm cố vấn CSS cho vụ hướng dẫn CSS Workshop hở ?
    Mắt em thì ko sao cả, dần dần rồi quen thôi, lúc mới thay kính bao giờ chả thế .

Bài viết về bạn hoặc có tag tên bạn:

  • Chưa có bài nào có liên quan.

Người đăng ký yêu thích blog này cũng đồng thời thích:

  • Chưa có blog yêu thích nào có liên quan.

Xem thêm

Thư mục

Xem ngày tháng

S M T W T F S
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30