การทำความเข้าใจ CSS สำหรับการกำหนดสไตล์ของผู้ใช้ในเบราว์เซอร์

13

ฉันต้องการเปลี่ยนแปลงลักษณะเฉพาะของไซต์เฉพาะในเว็บเบราว์เซอร์ของฉัน ไซต์นี้ใช้ CSS ดังนั้นฉันคิดว่าสิ่งที่ฉันควรทำคือเขียนการแทนที่ CSS ของผู้ใช้ (โปรดแก้ไขให้ฉันถ้านี่ผิด)

เบราว์เซอร์ของฉันคือ Firefox (ซึ่งฉันคิดว่าฉันควรจะเขียนบางสิ่งchrome/userContent.css) และ Chrome ( User\ StyleSheets/Custom.css)

การเปลี่ยนแปลงเฉพาะที่ฉันต้องการจะทำคือการลบรูปแบบพื้นหลัง (จุดมืด) ในทุกหน้าของ/unix// แต่โดยทั่วไปมากขึ้นโปรดสอนฉันเกี่ยวกับวิธีการตกปลา: ฉันจะหาพารามิเตอร์ที่จะเปลี่ยนแปลงได้อย่างไรและฉันจะเขียนการเปลี่ยนแปลงนี้ใน css ผู้ใช้ได้อย่างไร

— Gilles 'หยุดความชั่วร้าย'
แหล่งที่มา

15

ฉันสามารถพูดด้วยความคุ้นเคยกับ Firefox เท่านั้นเพราะนั่นคือเบราว์เซอร์หลักของฉัน ฉันจะพยายามรักษาสิ่งต่าง ๆ ที่นี่เพื่อตอบสนองคำขอ 'สอนฉันไปหาปลา' ด้วยเหตุนี้ฉันจะรวม 2 ตัวอย่างของคุณและอีกอันที่มีบทเรียนในโลกแห่งความเป็นจริงมากขึ้น อันดับแรกเราจะได้เครื่องมือที่จะทำให้การสร้าง CSS ของผู้ใช้ง่ายขึ้น

อัปเดตเป็น Firefox รุ่นล่าสุด เวอร์ชันล่าสุดบางเวอร์ชันมีการขยายเครื่องมือตรวจสอบเว็บไซต์ดังนั้นคุณจึงต้องการ
ทางเลือก: ติดตั้งส่วนขยาย Firebugซึ่งให้เครื่องมือตรวจสอบไซต์ที่มีประสิทธิภาพมากขึ้น (ส่วนตัวฉันไม่ได้ใช้ Firebug สำหรับการสร้างผู้ใช้ CSS แต่ฉันรวมถึงการกล่าวถึงที่นี่เพื่อประโยชน์สมบูรณ์)
ติดตั้งส่วนขยายที่ทันสมัย นี่เป็นส่วนขยาย CSS-centric ของผู้ใช้ที่ทำให้การสร้าง CSS ของผู้ใช้ง่ายขึ้นมาก

ตอนนี้เพื่อเขียนสิ่งที่จริง คุณควรมีความคุ้นเคยพื้นฐานกับ HTML และ CSS ก่อนดำเนินการต่อ W3Schools มีบทเรียนที่ดีพร้อมที่จะทำความคุ้นเคยกับโครงสร้างพื้นฐานและไวยากรณ์ของHTMLและCSS เพื่อประโยชน์ของคำตอบนี้ฉันจะรวมข้อมูลมากพอที่จะช่วยให้มือใหม่พร้อมมากพอที่จะทำตัวอย่างให้สำเร็จ

นำทางไปยังหน้า (ในกรณีของคุณ/unix// )
คลิกขวาที่องค์ประกอบที่คุณต้องการจัดการ (แทบทุกที่ในหน้านี้สำหรับกรณีนี้เนื่องจากพื้นหลังมีผลต่อทั้งหน้า)
เลือก 'ตรวจสอบองค์ประกอบ' จากเมนูป๊อปอัป สิ่งนี้ใช้เครื่องมือการตรวจสอบแบบรวมของ Firefox ฉันจะไม่ใช้ Firebug ที่นี่ แต่มีบานหน้าต่างและคุณสมบัติที่คล้ายคลึงกัน
นี่เป็นการเปิดพาเนลที่ด้านล่างและด้านข้างของหน้าต่าง Firefox ที่ด้านล่างคุณเห็น HTML ด้านขวาคุณจะเห็นกฎ CSS สำหรับองค์ประกอบของหน้าที่เลือก (ซึ่งจะเป็นสิ่งที่คุณคลิกขวา) ที่ด้านล่างให้คลิกองค์ประกอบต่างๆเพื่อนำทางไปรอบ ๆ หน้าถูกจัดเป็นแผนผังขององค์ประกอบและคุณสามารถยุบหรือขยายแต่ละโหนดในทรี เมื่อคุณคลิกที่องค์ประกอบองค์ประกอบที่เลือกจะถูกเน้นในหน้านั้น
โดยทั่วไป ณ จุดนี้คุณจะต้องตรวจสอบองค์ประกอบที่คุณต้องการจัดการพร้อมกับองค์ประกอบหลัก (รายการที่มีองค์ประกอบนั้นในต้นไม้) ระบุองค์ประกอบที่คุณต้องใช้งานจริง ตัวอย่างเช่นหากคุณล้อเล่นกับคำตอบในหน้านี้คุณจะเริ่มต้นด้วยองค์ประกอบ <p> ที่มีข้อความของคำตอบ แต่คุณต้องการที่จะรวมทุกสิ่งรอบข้อความเช่นขึ้น / ลูกศรโหวตลง, ข้อมูลของโปสเตอร์, ลิงค์แบ่งปัน / แก้ไข / ตั้งค่าสถานะ ฯลฯ ดังนั้นคุณสามารถเลื่อนดูสองระดับไปยังแท็ก <div> ที่มีid ของ "answer - ####" และคลาสของ "ตอบ"เนื่องจากเป็นองค์ประกอบที่มีองค์ประกอบตกแต่งหน้าต่างทั้งหมดของคำตอบ คลิกที่มันแล้วคุณจะเห็นส่วนหนึ่งของหน้าเว็บถูกเน้น (ในกรณีนี้พื้นหลังของหน้าจะอยู่ใกล้ด้านบนสุดภายในแท็ก <body>เลื่อนขึ้นไปด้านบนสุดของ HTML แล้วคลิกแท็ก <body>)
ถัดไปคุณต้องระบุคุณสมบัติ CSS ขององค์ประกอบนี้ที่คุณต้องการจัดการ ดู CSS ทางด้านขวาและค้นหาคุณสมบัติที่คุณต้องการแก้ไข โดยส่วนตัวแล้วฉันค่อนข้างใหม่กับ CSS ดังนั้น ณ จุดนี้ฉันมักจะ google 'css' + ชื่อคุณสมบัติเพื่อเรียนรู้เพิ่มเติมเกี่ยวกับคุณสมบัติและวิธีการทำงานของมัน ทำตามตัวอย่างของฉันต่อไปซึ่งเรากำลังดูคำตอบ SE สมมติว่าเราต้องการเปลี่ยนระยะขอบรอบคำตอบ ไฟล์ all.css มีคุณสมบัติตั้งค่าระยะขอบเป็น 0px แต่ชัดเจนว่ามีส่วนต่างล้อมรอบองค์ประกอบเหล่านี้ googling บางคนสอนให้ฉันมองหาช่องว่างภายในเนื่องจากอาจส่งผลกระทบต่อระยะขอบของสิ่งของ แน่นอนว่ามีสองคุณสมบัติที่เกี่ยวข้องกับการขยายที่ตั้งอยู่บนคำตอบ, การเติมด้านล่างและการเติมด้านบน. (สำหรับปัญหาเฉพาะของคุณคุณกำลังมองหาภาพพื้นหลังดังนั้นมองหา 'พื้นหลัง' ในคุณสมบัติ CSS คุณจะเห็นคุณสมบัติ 'พื้นหลัง'ใกล้ด้านบนซึ่งใช้กับองค์ประกอบร่างกายของหน้านั้น Googling " คุณสมบัติพื้นหลัง css "เพื่อเรียนรู้วิธีการทำงานของทรัพย์สินแสดงให้คุณเห็นว่ามันสามารถมีสีหรือ URL ไปยังภาพพร้อมกับตัวดัดแปลงต่าง ๆ หลังจากนำทางบิตเพื่อขุดลงไปถึงวิธีการทำงานของคุณสมบัติภาพพื้นหลังเราเห็น ข้อมูลที่เป็นประโยชน์ค่าเริ่มต้นของ 'ไม่มี'เราต้องการเปลี่ยนภาพพื้นหลังให้กลับเป็นค่าเริ่มต้นดังนั้นเราจึงต้องการข้อมูลนั้น)
ตอนนี้เราใช้ Stylish ทางเลือกที่ไม่มีสไตล์คือการแก้ไขไฟล์ที่คุณโพสต์ไว้ในคำตอบของคุณ มีสไตล์ทำให้เราสามารถจัดการ CSS ผู้ใช้ของหลาย ๆ ไซต์ได้อย่างง่ายดาย มีสไตล์เพิ่มไอคอนเล็ก ๆ น้อย ๆ ให้กับหน้าต่าง Firefox ของคุณคลิกที่มันจากนั้นไปที่ "เขียนสไตล์ใหม่" -> "สำหรับ" (ไซต์นี้) .com "ให้ชื่อสไตล์และแท็กบางแท็กจากนั้นคุณจะสามารถ เพื่อแยกสไตล์นี้ว่าเป็นสไตล์ที่ใช้กับ Superuser.com หรือ Stackexchange.com เป็นต้นหน้าต่างนี้จะให้แม่แบบที่ให้เราเปลี่ยน CSS สำหรับโดเมนนี้หากคุณต้องการเปลี่ยน CSS สำหรับ URL เฉพาะคุณ สามารถทำสิ่งนั้นได้หรือคุณจะได้รับสไตล์เปล่าถ้าคุณต้องการเขียน CSS ที่ใช้กับเว็บไซต์ทั้งหมดเพียงแค่เลือกรายการที่เหมาะสมจากเมนู Stylish สำหรับตัวอย่างการแก้ไขคำตอบของฉันคุณ
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("superuser.com") {

}
```
อะไรใส่ลงไปในบล็อก @ -moz เอกสารจะใช้เฉพาะกับโดเมนที่มีในวงเล็บ ดูรายการตัวหนาด้านบน หากต้องการเปลี่ยนช่องว่างภายในสำหรับคำตอบคุณต้องอัปเดตกล่องข้อความให้เป็นดังนี้:
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("superuser.com") {
    .answer {
        padding-bottom:0px;
        padding-top:0px;
    }
}
```
ที่จะทำลายลงนี้สำหรับคนที่ไม่ทราบว่า CSS, เรากำลังเลือกแรกในชั้นเรียน (เพราะฉะนั้นเป็น "" ไปที่จุดเริ่มต้น. ถ้าเราได้รับเลือกโดยใช้ ID ที่เราต้องการใส่ '#' มี.) คำตอบ (ดังนั้น 'ตอบ') จากนั้นเราเปิดบล็อกที่มีเครื่องหมายปีกกาเพื่อแสดงรายการคุณสมบัติของรายการที่เลือกที่เราจะทำการเปลี่ยนแปลง ครั้งแรกที่เราจะได้รับการแก้ไขช่องว่างด้านล่างและตั้งค่าให้เป็น0 พิกเซล จากนั้นเราก็ทำเช่นเดียวกันสำหรับpadding ด้านบน แต่ละคุณสมบัติและค่าจะสิ้นสุดด้วยเซมิโคลอน จากนั้นเราปิดบล็อกด้วยการดัดผมหยิก (ในตัวอย่างยูนิกซ์ของคุณคุณจะทำสิ่งนี้:
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none;
    }
}
```
ที่นี่คุณกำลังทำงานบนโดเมน unix.stackexchange.com เรากำลังเลือกองค์ประกอบ "ร่างกาย" (เมื่อเลือกองค์ประกอบ HTML เป็นตัวเลือก CSS โดยไม่จำเป็นต้องใช้ #s หรือ. s ที่นี่) เรากำลังตั้งค่าพื้นหลังเป็นไม่มี)
ฉันดึงดูดความสนใจของคุณไปที่ปุ่มที่ด้านล่างของหน้าต่างแก้ไขสไตล์อย่างมีสไตล์ "ดูตัวอย่าง" จะออกกฎหมายการเปลี่ยนแปลงที่คุณพิมพ์ไว้เพื่อให้คุณเห็นการทำงานของมัน "บันทึก" จะบันทึกการเปลี่ยนแปลง "ยกเลิก" ค่อนข้างชัดเจน สำหรับการเปลี่ยนแปลง CSS ของผู้ใช้ที่คุณทำอยู่คุณจะต้องคลิกดูตัวอย่างเพื่อดูว่าการเปลี่ยนแปลงนั้นเป็นไปตามที่คุณต้องการหรือไม่ ในตัวอย่างทั้งสองคุณจะเห็นว่ามันใช้งานไม่ได้ มีเหตุผลสำคัญสำหรับเรื่องนี้ซึ่งตอนนี้ฉันอยู่
CSS มีลำดับชั้นของลำดับความสำคัญที่เฉพาะเจาะจงสำหรับการกำหนดวิธีจัดการกับผู้ใช้ CSS กับผู้เขียน CSS กับเบราว์เซอร์ CSS โดยปกติเรามี CSS สำหรับหน้าเว็บที่เขียนโดยผู้สร้างหน้าและจะมีกฎสำหรับองค์ประกอบหลายอย่างในหน้านั้น เมื่อผู้เขียนไม่ได้กำหนดกฎ แต่อยู่ใน CSS ผู้ใช้ของคุณเบราว์เซอร์ของคุณจะใช้สิ่งนั้น หากไม่มีการกำหนด CSS สำหรับองค์ประกอบนั้นเบราว์เซอร์จะใช้กฎ CSS เริ่มต้นของตนเองในองค์ประกอบนั้น มีลำดับชั้นของน้ำหนักที่นี่ผู้แต่ง> ผู้ใช้> เบราว์เซอร์ หากมีการกำหนดบางสิ่งในทั้งสาม CSS ที่มีน้ำหนักมากกว่าจะชนะและมีผลกับ CSS มีวิธีรับ CSS ที่มีน้ำหนักต่ำเพื่อแทนที่ CSS ที่มีน้ำหนักสูงกว่าและนั่นคือการกำหนดให้สำคัญ คุณทำได้โดยการรวม "! สำคัญ"
```
@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("unix.stackexchange.com") {
    body {
        background:none !important;
    }
}
```
ตอนนี้คลิกตัวอย่างอีกครั้งและคุณจะเห็นว่า CSS ผู้ใช้ของคุณทำงานได้ คลิกบันทึกและเพลิดเพลิน

หากคุณใช้ Chrome ผู้ตรวจสอบภายในจะดีมาก นอกจากนี้ยังมีการขยายอย่างมีสไตล์ คุณป้อนการแก้ไข CSS แตกต่างกันเล็กน้อย: เลือก“ จัดการสไตล์ที่ติดตั้ง” จากนั้นคลิก“ เขียนสไตล์ใหม่” ป้อนไซต์หรือรูปแบบ URL เพื่อใช้การโพสต์ด้านล่างกล่องรหัสและป้อน CSS เฉพาะโดเมนใน " รหัส” กล่องเช่น

body {
  background:none !important;
}

— Keen
แหล่งที่มา

2

ติดตั้งfirebugเพื่อระบุคุณสมบัติ CSS ที่เกี่ยวข้องจากนั้นเขียนสคริปต์greasemonkeyเพื่อแทนที่

— Benjamin Bannier
แหล่งที่มา

2

การใช้ greasemonkey เพื่อลุ้นคุณสมบัติ css เปรียบเสมือนการใช้ค้อนขับในสกรู มันใช้งานได้ แต่มันไม่ได้สวยงามและคุณมีแนวโน้มที่จะทำลายบางสิ่งไปพร้อมกัน

— Caleb

2

คุณทำสิ่งที่คุณจะทำถ้าคุณใส่เว็บไซต์

foo.bar { background-pattern:none; }

จากนั้นเพิ่ม

!important

}ก่อนที่จะ นี่คือรายละเอียดเล็ก ๆ น้อย ๆเกี่ยวกับการใช้งานที่ไม่ใช่ของผู้ใช้ที่ยังคงอธิบายสำหรับการใช้งานของคุณ

— tobylane
แหล่งที่มา