ทำไมเราไม่ใช้ CSS (สร้างฝั่งเซิร์ฟเวอร์) แบบไดนามิก?

เนื่องจาก HTML ที่สร้างโดยฝั่งเซิร์ฟเวอร์นั้นเป็นเรื่องเล็กน้อย (และเป็นวิธีเดียวที่จะสร้างเว็บเพจแบบไดนามิกก่อน AJAX) CSS ที่สร้างขึ้นฝั่งเซิร์ฟเวอร์จึงไม่ใช่ จริงๆแล้วฉันไม่เคยเห็นเลย มีคอมไพเลอร์ CSS แต่สร้างไฟล์ CSS ซึ่งสามารถใช้เป็นแบบคงที่ได้

ในทางเทคนิคแล้วมันไม่จำเป็นต้องมีไลบรารีพิเศษแท็กสไตล์ HTML ควรอ้างอิงถึงสคริปต์ templater PHP (/ ASP / อะไรก็ตาม) แทนไฟล์ CSS แบบคงที่และสคริปต์ควรส่งส่วนหัวชนิดเนื้อหา CSS - นั่นคือทั้งหมด

มันมีปัญหาแคชหรือไม่? ฉันไม่คิดอย่างนั้น สคริปต์ควรส่งส่วนหัวที่ไม่มีแคชฯลฯ มันเป็นปัญหาสำหรับนักออกแบบหรือไม่? ไม่พวกเขาควรแก้ไขเทมเพลต CSS (เนื่องจากพวกเขาแก้ไขเทมเพลต HTML)

ทำไมเราไม่ใช้ตัวสร้าง CSS แบบไดนามิก? หรือถ้ามีโปรดแจ้งให้เราทราบ

สาเหตุใหญ่ที่ css ถูกสร้างขึ้นแบบไดนามิกไม่ค่อยมี (นี่ก็เป็นจริงสำหรับ javascript) เพราะมันเป็นตัวเลือกที่ดีสำหรับการแคช CSS เป็นวิธีที่ยืดหยุ่นมากในการจัดรูปแบบหน้าของคุณด้วยการผสมผสานที่ถูกต้องของคลาสคุณจะได้รับส่วนต่าง ๆ ทั้งหมดของหน้าเว็บที่แตกต่างกันทั้งหมดของคุณตามสไตล์ของตัวชี้นำทั้งหมดโดยไม่ต้องกำหนดเงื่อนไขใด ๆ ใน CSS ตัวเองกับสิ่งที่เกิดขึ้นจริงจะปรากฏในการดูหน้านี้

เพียงเพราะ CSS ไม่จำเป็นต้องแตกต่างกันในแต่ละหน้านำไปสู่แนวทางปฏิบัติทั่วไปของการเพิ่มประสิทธิภาพต้นทุนในการดาวน์โหลด ไซต์ส่วนใหญ่อัด css ทั้งหมดสำหรับทั้งไซต์เป็นการดาวน์โหลดเพียงครั้งเดียวดังนั้นส่วนที่จะนำไปใช้กับการดูหน้าเว็บที่แตกต่างกันนั้นมีอยู่ในไฟล์ที่ดาวน์โหลดเพียงไฟล์เดียว ด้วยการแคชลูกค้าของคุณไม่ต้องรอเพื่อดาวน์โหลดเป็นครั้งที่สอง ที่สำคัญกว่านั้นคือคุณในฐานะผู้ให้บริการเนื้อหาไม่ต้องจ่ายค่าใช้จ่ายในการอัปโหลดเนื้อหามากกว่าหนึ่งครั้ง และคุณยังสามารถวาง css แบบคงที่บนเซิร์ฟเวอร์ที่เหมาะกับการให้บริการเนื้อหาแบบคงที่ซึ่งจะช่วยให้ทรัพยากรสำหรับเนื้อหาแบบไดนามิกที่เกิดขึ้นจริงบนแอพพลิเคชันเซิร์ฟเวอร์ของคุณ

การปฏิบัตินี้เป็นเรื่องธรรมดามากที่เบราว์เซอร์จำนวนมากคิดว่า css เป็นแบบคงที่ และมากลังเลที่จะดาวน์โหลด CSS ที่พวกเขามีอยู่แล้ว แม้ว่าผู้ใช้จะโหลดหน้าซ้ำ การรักษาพิเศษนี้ใช้เฉพาะกับ CSS เท่านั้น ประเภทเนื้อหาอื่น ๆ จะได้รับการโหลดซ้ำตามที่คาดไว้

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

อย่างไรก็ตามกรณีการใช้งานที่การดึง CSS พิเศษโดย ajax จะช่วยแก้ปัญหาได้ค่อนข้างยากนี่อาจเป็นเหตุผลว่าทำไมคุณไม่เคยเจอสิ่งนี้: โดยปกติแล้วมันจะง่ายกว่าที่จะรักษาชุดของสไตล์ชีทที่ประมวลผลล่วงหน้า เช่นหน้าถัดไปจะสามารถใช้สไตล์ชีทที่แคชไว้ก่อนหน้านี้ได้อีกครั้งดังนั้นเวลาเริ่มต้นจะสั้นลง)

จริงๆแล้วมีกรณีการใช้งานสำหรับ CSS แบบไดนามิก ฉันทำงานกับสามประเภทที่แตกต่างกัน:

1. Less - Less CSS นั้นเป็นส่วนขยายภาษา CSS ที่เพิ่ม "พฤติกรรมแบบไดนามิกเช่นตัวแปรมิกซ์อินการดำเนินงานและฟังก์ชั่น" นอกจากนี้ยังช่วยให้ "กฎที่ซ้อนกัน" ซึ่งสะดวกมาก ฉันใช้ Less เป็นหลักเพื่อทำให้การเขียน CSS น้อยลงอย่างมากโดยกำจัดการซ้ำซ้อนบางอย่าง

2. การเขียน URL ใหม่ - เพื่อพิสูจน์ว่าคุณไม่มีปัญหาแคชฉันใช้ PHP เพื่อให้บริการสคริปต์เป็นไฟล์ CSS ที่มีส่วนหัวแคชที่ถูกต้องเป็นเวลานาน ฉันส่วนใหญ่ทำเพื่อให้บริการไฟล์ CSS จากไลบรารีที่ไม่ได้อยู่ในเว็บรูท

3. รายงานแบบไดนามิก - ในโครงการหนึ่งที่ฉันทำงานเรามีตัวสร้างรายงานสำหรับข้อมูลทุกประเภทในระบบ เราแสดงผล (ภายในstyleแท็กตามที่คุณพูดถึง) กฎสไตล์แบบไดนามิกส่วนใหญ่สำหรับสีที่ผู้ใช้เลือกไว้ในตัวสร้างรายงาน

^{หมายเหตุ:เมื่อส่งออก CSS ไปยัง URL โดยตรง (เช่นใน1หรือ2 ) และไม่ฝังลงในหน้าเว็บที่สคริปต์สร้างขึ้นมาแล้วคุณจะเพิ่มการโหลดจำนวนมากให้กับเซิร์ฟเวอร์ผ่านการให้บริการเนื้อหาคงที่ ดังนั้นหากคุณมีทราฟฟิกจำนวนมากแม้ว่าคุณสามารถทำแบบไดนามิกได้ทุกครั้งที่คุณต้องการแคชเป็นไฟล์สแตติกถ้ากรณีการใช้งานของคุณอนุญาต}

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

การเปลี่ยนแปลงสไตล์แบบไดนามิกส่วนใหญ่สามารถสร้างได้โดยอ้างถึงเอกสาร CSS แบบคงที่ต่างๆ

ดังนั้นจึงเป็นไปได้อย่างที่คุณคิด แต่มีเหตุผลไม่มากที่จะทำ

มีสองด้านที่แยกต่างหากในการโหลด CSS แบบไดนามิก ...

1. การสร้างไฟล์ CSS แบบไดนามิกบนเซิร์ฟเวอร์

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

2. การโหลดไฟล์ CSS ตามต้องการผ่านตัวโหลดสคริปต์ JS

   สิ่งนี้มีประโยชน์ถ้าคุณสร้างส่วนใหญ่ของ DOM แบบไดนามิกแล้วโหลดสไตล์ที่ต้องการ แต่ ในฐานะผู้เขียน LABjs พูดว่า ...

   การกำหนดว่าไฟล์ CSS ที่โหลดแบบไดนามิกโหลดเสร็จแล้วจริง ๆ แล้วค่อนข้างซับซ้อนและท้าทายในการข้ามเบราว์เซอร์ เหตุการณ์ "โหลด" จะไม่เริ่มต้นตามที่ต้องการ / คาดหวัง ดังนั้นการเพิ่มการสนับสนุนดังกล่าวจะเพิ่มขนาดที่ไม่สำคัญให้กับ LABjs

1. เราทำสิ่งนี้ ตลอดเวลา. โดยเฉพาะอย่างยิ่งสำหรับสิ่งต่าง ๆ เช่นการสร้างแบรนด์เฉพาะลูกค้าในแอปพลิเคชัน SaaS ซึ่งสีและอื่น ๆ มาจากฐานข้อมูล
2. มันเร็วกว่ามาก (จากมุมมองของผู้ใช้) เพื่อสร้าง CSS ล่วงหน้าก่อนหรือระหว่างการปรับใช้หรือระหว่างการบูตแอปพลิเคชันหากแอปพลิเคชันมีเฟสการบู๊ต โดยทั่วไปเราต้องการสร้างไฟล์ CSS แบบคงที่ล่วงหน้าทุกครั้งที่ทำได้
3. เพื่อความเร็วสูงสุด (จากมุมมองของผู้ใช้) วิธีที่ดีที่สุดคือการส่งไฟล์ CSS แบบคงที่ไปยัง CDN และให้เบราว์เซอร์รับไฟล์จาก CDN ไม่ใช่จากแอปพลิเคชันเซิร์ฟเวอร์ของคุณ สิ่งนี้เป็นไปได้โดยทั่วไปเฉพาะเมื่อไฟล์ CSS สามารถสร้างขึ้นล่วงหน้าก่อนหรือระหว่างการปรับใช้และที่ส่วนหนึ่งของการปรับใช้กำลังส่งไฟล์ CSS สแตติกที่สร้างไว้ล่วงหน้าไปยัง CDN ตอนนี้ CDNs นั้นราคาถูกและใช้งานง่าย - ตรวจสอบไฟล์ CloudFront ของ Amazon และ Cloudspace ของ Amazon

มันมีปัญหาแคชหรือไม่? ฉันไม่คิดอย่างนั้น สคริปต์ควรส่งแคชที่ไม่มีเป็นต้น

ดีมาก แต่นั่นเป็นข้อมูลทั่วไปที่สำคัญที่คุณขอให้ผู้ใช้ดาวน์โหลดทุกครั้งที่โหลดหน้าเว็บ ดังนั้นคุณควรมีเหตุผลที่ดีกว่า

ทีนี้เหตุผลนั้นอาจเป็นเช่นไร?

หากคุณต้องการเปลี่ยนสไตล์ตามพารามิเตอร์ต่างๆคุณสามารถทำได้โดยมีสไตล์ชีตหลายอันและสร้าง HTML เพื่อดาวน์โหลดสไตล์ที่ถูกต้อง

Dynamic CSS ค่อนข้างไม่สำคัญนักและแม้ว่าแอพพลิเคชั่นจะมี จำกัด มากขึ้น (ดูว่า HTML ที่สร้างขึ้นแบบไดนามิกกับสไตล์ชีทคงที่สามารถแก้ไขความต้องการในแต่ละวันได้อย่างไรและ CSS เองก็รวมกลไกบางอย่างเพื่อให้ได้กึ่งไดนามิก) ฉันเคยเห็นมันใช้มาหลายครั้งและฉันใช้มันทุกครั้งที่ต้องการ

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

บางทีคุณอาจเห็นพวกเขาอยู่ในป่าโดยที่ไม่จำพวกเขา เซิร์ฟเวอร์ที่ส่งสคริปต์แบบไดนามิกมักจะใช้การเขียน URL ใหม่เพื่อให้ URL นั้นแยกไม่ออกจากเนื้อหาที่ให้บริการแบบคงที่ สิ่งนี้จำเป็นเนื่องจากเบราว์เซอร์บางตัว (IE ที่สะดุดตาที่สุด) ใช้ส่วนขยายสำหรับการตรวจจับประเภท MIME ที่ถูกต้องในบางสถานการณ์โดยไม่สนใจ (หรือละทิ้ง) ส่วนหัวเนื้อหาประเภทใด ๆ ที่คุณอาจส่งไป

เกี่ยวกับการแคช: สไตล์ชีตจะถูกดึงเข้ามาพร้อมกับคำขอ GET และการทำให้แคชเป็นสิ่งสำคัญอย่างยิ่งสำหรับประสบการณ์การใช้งานที่ดี คุณไม่ต้องการดูหน้า reflow เนื่องจากมันจะดาวน์โหลดสไตล์ชีทอีกครั้งในทุกคำขอ คุณควรใส่พารามิเตอร์ทั้งหมดที่เปลี่ยนผลลัพธ์ของการประมวลผลสไตล์ชีตของคุณลงในสตริงการสืบค้น สตริงข้อความค้นหาที่แตกต่างกันให้ URL ที่แตกต่างกันซึ่งทำให้แคชคิดถึงดังนั้นเมื่อใดก็ตามที่พารามิเตอร์มีการเปลี่ยนแปลงสไตล์ชีทจะถูกดาวน์โหลดอีกครั้งแม้ว่าไคลเอนต์จะแคชทุกอย่าง หากคุณต้องการ CSS ที่อาจแตกต่างกันไปสำหรับแต่ละคำขอและขึ้นอยู่กับผลข้างเคียงให้ลองวางส่วนที่ไม่ใช่แบบไดนามิกลงในสไตล์ชีทที่ให้บริการแบบคงที่และให้บริการสิ่งเหล่านั้นแบบไดนามิกที่จำเป็นต้องเป็นแบบไดนามิก

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

อีกวิธีหนึ่งในการดูที่นี้คือ "มีคนอื่นกำลังทำคู่มือที่เจ็บปวดทั้งหมดไม่ใช่ปัญหาของฉัน