หากคุณกำลังพัฒนาเอกสาร html อย่างเคร่งครัดโดยใช้แนวปฏิบัติที่ดีที่สุดในปัจจุบันในการป้องกันการจัดแต่งทรงผมออกจากมาร์กอัปคุณจะสื่อสารขนาดภาพได้อย่างไร?
วิธีปฏิบัติที่ดีที่สุดในอดีตต้องการความสูงและความกว้างของรูปภาพด้วยรูปภาพซึ่งจะทำให้เร็วกว่าเบราว์เซอร์ที่รอให้รูปภาพดาวน์โหลดเพื่อให้ได้ขนาด แต่การทำเช่นนี้ดูเหมือนจะเป็นการแยกสไตล์ออกจากเอกสาร
เพิ่มแอตทริบิวต์ id ให้กับภาพแต่ละภาพแล้วใส่ความสูง / ความกว้างใน css? สิ่งนี้เป็นการยกเลิกโบนัสการแสดงผลของความสูงและความกว้างของภาพในบรรทัดหรือไม่
คำตอบ:
การมีความกว้างและความสูงในองค์ประกอบ IMG นั้นไม่ได้ถูกคัดค้านและเป็นวิธีที่ดีที่สุดในการบอกความกว้างและความสูงของภาพในเบราว์เซอร์ การออกนอกเส้นทางของคุณเพื่อทำสิ่งอื่นนั้นซ้ำซ้อนและไม่จำเป็น (และอาจโง่) อย่าทำงานที่ไม่จำเป็นสำหรับตัวคุณเองหรือเบราว์เซอร์ ยึดติดกับพื้นฐานที่ใช้งานได้
!importantใน css นั้นอนุญาตให้คุณแทนที่คุณลักษณะความกว้างและความสูงดังนั้นในตอนแรกการใช้ความกว้าง / ความสูงก็ใช้งานได้ดี ตอนนี้ฉันติดอยู่ในตำแหน่งลงคะแนนว่า หากคุณรู้สึกอยากแก้ไขคำตอบฉันจะเปลี่ยนมัน ยักไหล่ ไม่ใช่ว่ามันสำคัญเกินไป
คำตอบของ John Conde นั้นตรงประเด็น ภาพที่มีความกว้างและความสูง - มันเป็นส่วนหนึ่งของเนื้อหาไม่ได้ของพวกเขาสไตล์ ดังนั้นไม่จำเป็นต้องทำ "การแยก" ที่นี่
อย่างไรก็ตามข้อยกเว้นประการหนึ่ง: CSS สำหรับขนาดภาพมีประโยชน์หากคุณมีภาพจำนวนมากในขนาดเดียวกัน (เช่นภาพขนาดย่อ) ที่นี่จะดีกว่ามากเมื่อใช้คลาส CSS เพื่อลด HTML และพัฒนาอย่างรวดเร็ว
สำหรับการออกแบบเว็บไซต์รวมถึงปุ่มและไอคอนทางออกที่ดีที่สุดของคุณคือ CSS sprite
ALTแท็กด้วยเช่นกันแม้ว่าตัวตรวจสอบความว่างเปล่าหรือตัวตรวจสอบการปฏิบัติตามจะบ่น