บล็อกในซีรีย์ "มาเพิ่มเนื้อที่แสดงผลบนหน้าจอกันเถอะ"

• ตอนที่ 1: เพิ่มเนื้อที่แสดงผลของ GNOME ด้วยการรวม panel ให้เหลืออันเดียว
• ตอนที่ 2: เพิ่มเนื้อที่แสดงผลของ Firefox ด้วยการเอา title bar และเมนูออกไป

ตอนที่ 3 นี้ว่ากันด้วย Google Reader โปรแกรมสำหรับอ่าน feed ที่ใช้เนื้อที่หน้าจอเปลืองมาก

เราจะเอา element ที่ไม่สำคัญออกไป (ใครเคยใช้ช่อง search ใน Google Reader กันบ้าง?) ผ่านฟีเจอร์ที่เรียกว่า userContent.css ซึ่งอนุญาตให้เราเพิ่ม (หรือ override) CSS ของเว็บไซต์ที่ต้องการลงไปเองได้ เราใช้เทคนิคนี้เอา element บางอันออกไปจากการแสดงผล โดยการสั่ง display:none

โค้ดของ userContent.css สำหรับ Google Reader มีดังนี้

@-moz-document url-prefix("http://www.google.com/reader/view/") {
 
a#logo-container,
.loaded div#search {
  display:none;
  visibility: hidden;
}
 
#gbar,
#logo,
#global-info,
.message-area,
#lhn-add-subscription-section,
#chrome-header,
#viewer-footer {
  display: none;
}
 
#main {
  top: 0px!important;
}
 
}

เอาไฟล์ userContent.css ไปใส่ไว้ใน ~/.mozilla/firefox/profile/chrome/ แล้วเริ่ม Firefox ใหม่หนึ่งที จะเห็นผล

ได้พื้นที่แนวตั้งเพิ่มมาอีก 127 พิกเซล ไม่น้อยเลย โดยเฉพาะอย่างยิ่งเมื่อเทียบกับหน้าจอในปัจจุบันที่ออกไปทางกว้างเสียหมด