สร้างพอร์ตโฟลิโอด้วยการเปลี่ยน CSS3

เนื้อหา

• 01. พื้นฐานของการเปลี่ยน CSS
• 02. ทำไมต้องใช้การเปลี่ยน?
• 03. มาเริ่มกันเลย
• 04. เคล็ดลับที่เห็นได้ชัด แต่มักถูกมองข้าม…
• 05. การขัดเงา
• 06. ตอนนี้สำหรับเบราว์เซอร์รุ่นเก่า
• 07. บทสรุป
• ชอบสิ่งนี้ไหม อ่านสิ่งเหล่านี้!

• ความรู้ที่จำเป็น: CSS พื้นฐานและ jQuery ประสบการณ์กับ jQuery animate () ฟังก์ชั่นเป็นโบนัส
• ต้องใช้: jQuery, Modernizr, เบราว์เซอร์และตัวแก้ไข / IDE ที่คุณต้องการ
• เวลาโครงการ: 1.5 - 3 ชั่วโมง
• ไฟล์สนับสนุน

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

ง่ายอย่างที่คิดความหมายในโลกแห่งความเป็นจริงก็คือการใช้การเปลี่ยน CSS เป็นวิธีที่ยอดเยี่ยมในการเพิ่มการโต้ตอบให้กับเว็บไซต์สมัยใหม่ แม้ว่าจะไม่ได้รับการสนับสนุนในทุกเบราว์เซอร์ แต่การสนับสนุนกำลังได้รับการปรับปรุงและด้วยการใช้เพื่อนเก่าเช่น Modernizr และ Feature Detection เราสามารถใช้ jQuery ทางเลือกเพื่อไม่ให้เบราว์เซอร์รุ่นเก่าที่รองรับน้อยกว่า

ที่นี่เราจะสร้างหน้าพอร์ตโฟลิโอแบบโต้ตอบที่ทันสมัยโดยใช้การเปลี่ยน CSS3 เพื่อแทนที่ภาพเคลื่อนไหว jQuery และมาร์กอัป HTML5 เราจะตรวจสอบปัญหาคำนำหน้าผู้ขายและเพิ่มทางเลือกสำหรับเบราว์เซอร์ที่รองรับน้อยลง

01. พื้นฐานของการเปลี่ยน CSS

หากคุณไม่เคยได้ยินเกี่ยวกับการเปลี่ยน CSS มาก่อนให้คิดว่ามันเป็นฟังก์ชันดั้งเดิมสำหรับเอฟเฟกต์ที่ก่อนหน้านี้ทำได้ใน JavaScript หรือ jQuery เท่านั้น หากคุณสามารถทำได้ด้วย jQuery's ภาพเคลื่อนไหว () คุณสามารถบรรลุเอฟเฟกต์เดียวกันกับการเปลี่ยน CSS - เช่นตัวเลื่อนเช่นไลท์บ็อกซ์และอื่น ๆ

ทั้งการเปลี่ยน CSS และ jQuery ภาพเคลื่อนไหว () โดยพื้นฐานแล้วจะทำสิ่งเดียวกันนั่นคือการเปลี่ยนจากสไตล์หนึ่งไปเป็นอีกสไตล์หนึ่งในช่วงเวลาที่กำหนด ไวยากรณ์สำหรับการเปลี่ยนแปลงคือ:

คุณสมบัติการเปลี่ยนแปลง: ความสูง;
ระยะเวลาการเปลี่ยนแปลง: 3 วินาที;
ความล่าช้าในการเปลี่ยนแปลง: 2 วินาที;
การเปลี่ยนเวลาฟังก์ชั่น: เชิงเส้น;

หรือสำหรับผู้ที่ชื่นชอบ CSS ชวเลข:

การเปลี่ยนแปลง: {ทรานซิชั่น - พร็อพเพอร์ตี้} {การเปลี่ยนแปลงระยะเวลา} {การเปลี่ยนแปลงล่าช้า} {การเปลี่ยนเวลา - ฟังก์ชัน}

นอกจากนี้เรายังสามารถจัดกลุ่มช่วงการเปลี่ยนภาพหลายรายการเข้าด้วยกันได้หากแยกด้วยอัฒภาค ตัวอย่างเช่น:

การเปลี่ยนแปลง: ความสูง 200ms 50ms เชิงเส้น;
ความกว้าง 400ms 500ms เข้า - ออกได้ง่าย
สี 600ms 0ms เข้า - ออกได้ง่าย

โปรดทราบว่าคุณสามารถใส่ค่าหลายค่าให้กับคุณสมบัติระยะยาวได้ ตอนนี้เรารู้ไวยากรณ์แล้วเรามาดูตัวอย่างง่ายๆเช่นเอฟเฟกต์โฮเวอร์บนไฟล์ ปุ่ม / ทริกเกอร์ ธาตุ. นี่คือ HTML บางส่วน:

div>
วางเมาส์เหนือฉัน
/ div>

และ CSS บางส่วน:

div.button {
ช่องว่างภายใน: 2px 20px;
ความสูง: 30px;
ความกว้าง: 100px;
บรรทัดความสูง: 30px;
จัดข้อความ: ศูนย์;
เส้นขอบ: 2px ทึบ # 878787;
สีพื้นหลัง: # c0c0c0;
เส้นขอบรัศมี: 10px;
ระยะขอบ: 20px;
เคอร์เซอร์: ตัวชี้;
}

ตอนนี้สมมติว่าเราต้องการให้มันดูแตกต่างกันในการวางเมาส์เราจึงเพิ่ม CSS เพิ่มเติมในโฮเวอร์:

div.button: hover {
สีพื้นหลัง: # ff0000;
ช่องว่างภายใน: 40px;
ขอบกว้าง: 4px;
ขอบสี: สีเขียว;
สี: #ffffff;
}

วางเมาส์เหนือ ปุ่ม องค์ประกอบและสไตล์จะเปลี่ยนทันที แม้ว่าจะดี แต่ก็ยังดีกว่านี้ หากต้องการดำเนินการในระดับหนึ่งให้เพิ่มการเปลี่ยนแปลงไปยังไฟล์ โฮเวอร์ ชั้น:

การเปลี่ยนแปลง: padding 2000ms 0ms เชิงเส้น;

ว้าว! ตอนนี้เมื่อเราวางเมาส์ไว้ช่องว่างภายในจะเปลี่ยนไปอย่างช้าๆเช่นเดียวกับเอฟเฟกต์ภาพเคลื่อนไหว jQuery แต่สไตล์อื่น ๆ จะเปลี่ยนไปทันที นั่นเป็นเพราะเฉพาะสไตล์ที่มีการเปลี่ยนแปลงเท่านั้นที่มีผล อย่างอื่นได้ทันที คุณจะสังเกตเห็นว่าการเปลี่ยนแปลงจะเกิดขึ้นทันทีอีกครั้งเมื่อคุณปิดไฟล์ ปุ่ม ธาตุ.

เปลี่ยน CSS ลบการเปลี่ยนแปลงจากไฟล์ โฮเวอร์ คลาสและกฎ CSS ทั้งสองเพิ่ม:

การเปลี่ยนแปลง: เชิงเส้น 2000ms 0ms ทั้งหมด

ทั้งหมด แสดงว่าเราต้องการให้คุณสมบัติทั้งหมดมีผลการเปลี่ยนแปลง ตอนนี้ลองดู คุณจะสังเกตเห็นได้ทันทีว่ามันดูดีมากและไม่มีการใช้ฟังก์ชั่นภาพเคลื่อนไหว jQuery ที่จุดใด ๆ ในกระบวนการ

02. ทำไมต้องใช้การเปลี่ยน?

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

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

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

$ ('# องค์ประกอบ'). mouseenter (ฟังก์ชัน () {
$ (นี้) .animate ({
’style’: ’value’,
’style’: ’value’,
’style’: ’value’} 600, ’easy-in-out’
);
}). mouseleave (ฟังก์ชัน () {
$ (นี้) .animate ({
’style’: ’value’,
’style’: ’value’,
‘style’: ’value’} 600, ’easy-in-out’
);
});

แม้ว่านี่จะไม่ใช่โค้ดจำนวนมาก แต่การมีเอฟเฟกต์ที่คล้ายกันหลายอย่างจะเพิ่มน้ำหนักให้กับไฟล์ JS - บวกกับน้ำหนักที่เพิ่มขึ้นของไลบรารี jQuery ในตอนแรก สามารถทำได้ด้วยการเปลี่ยน CSS เพียงแค่ป้อนข้อมูล:

ธาตุ{
’สไตล์’: ’ค่า’;
'สไตล์': 'ค่า';
'สไตล์': 'ค่า';
การเปลี่ยน: {values ​​here}
}
element: hover {
'สไตล์': 'ค่า';
'สไตล์': 'ค่า';
’สไตล์’: ’ค่า’;
การเปลี่ยน: {values ​​here}
}

การเปลี่ยน CSS ยังสามารถได้รับประโยชน์จากการเร่งความเร็วของฮาร์ดแวร์เมื่อใช้ในเบราว์เซอร์บางตัวที่เปิดใช้งานสิ่งนี้ สิ่งนี้ให้ประโยชน์ด้านประสิทธิภาพที่มากกว่าการใช้ jQuery's ภาพเคลื่อนไหว (). นอกจากนี้ยังควรพิจารณาอุปกรณ์เคลื่อนที่ด้วย ด้วย JavaScript ที่น้อยลงเอฟเฟกต์ดั้งเดิมและการเร่งฮาร์ดแวร์ในการทำงานผลประโยชน์ด้านประสิทธิภาพจะเพิ่มขึ้นอย่างแท้จริง

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

03. มาเริ่มกันเลย

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

บทความ>
img src = "http://placekitten.com/278/150">
p> ipsum บางส่วนที่นี่ p>
/ article>

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

คุณสามารถค้นหามาร์กอัปสำหรับหน้าเต็มได้ในไฟล์ที่สนับสนุนสำหรับบทช่วยสอนนี้: เพียงแค่ดูแหล่งที่มาของ demo.html.

อย่างที่คุณเห็นฉันใช้ภาพตัวยึดบางส่วนจาก www.placekitten.com และ ipsum บางส่วนเพื่อเพิ่มข้อความ แต่อย่าลังเลที่จะเพิ่มอะไรก็ได้ที่คุณต้องการ ตรวจสอบให้แน่ใจว่าคุณได้ปรับความสูงใน CSS แล้ว

04. เคล็ดลับที่เห็นได้ชัด แต่มักถูกมองข้าม…

ฉันเห็นไซต์จำนวนมากที่นักพัฒนาใช้รูปแบบการทำให้ปกติ / รีเซ็ต CSS แม้ว่าในตัวมันเองก็ไม่ใช่เรื่องเลวร้าย แต่พวกเขามักจะวาง CSS ในที่ที่มีรูปแบบมากมายสำหรับแท็ก / มาร์กอัปที่ไม่ได้อยู่ในไซต์

การลบ CSS ที่ไม่จำเป็นออกทำให้ไฟล์ CSS มีขนาดเล็กลงและหน้าโหลดเร็วขึ้น ลองใช้ helium.js เป็นไฟล์ JavaScript ขนาดเล็กที่สแกนไซต์ของคุณและไฮไลต์ CSS ที่ไซต์ของคุณไม่ได้ใช้ คุณจะประหลาดใจว่าคุณสามารถลบออกได้อย่างปลอดภัยมากแค่ไหน นี่คือ CSS การตั้งค่าที่สมบูรณ์:

/*
* * HTML CSS shiv / fix [ที่นี่ฉันใช้เฉพาะองค์ประกอบที่จำเป็นเท่านั้น]
*/
บทความส่วนหัวส่วน {display: block;}
/*
* * [บางรูปแบบเพื่อเพิ่มสีสันและบริบทให้กับการสาธิต]
*/
html {font-size: 100%; text-size-adjustment: 100%; background-color: # f0f0f0; fontfamily:
Tahoma; แบบอักษร: ตัวเอียง; สี: # 878787;}
ร่างกาย {margin: 0; padding: 0; height: 700px;}
ส่วนหัว {height: 80px; background-color: #fbfbfb; border-bottom: 2px solid
#878787;}
ส่วนหัว h1 {width: 960px; margin: 0 auto; font-weight: normal; padding-top:
10px;}
/*
* * [บางสไตล์ที่ใช้ในการสร้างเอฟเฟกต์การเปลี่ยน CSS]
*/
ส่วน {width: 960px; margin: 0 auto; position: relative;}
ส่วน div {float: left; width: 318px;}

ดังนั้นเราจึงตั้งค่า CSS สำหรับบทความให้มี ความทึบ: 0เมื่อเราเพิ่มคลาสแบบสดมันจะทำให้เกิดการซีดจางที่ดี CSS สำหรับ มีชีวิต ชั้นเรียนคือ:

article.live {ความทึบ: 1; ความกว้าง: 278px; ความสูง: 150px;}

จากนั้นเราต้องการไฟล์ : เลื่อน สถานะซึ่งจะแสดงคำอธิบายสั้น ๆ เมื่อเมาส์อยู่เหนือแต่ละรายการ CSS คือ:

article.live:hover{height:270px;}

ตอนนี้ตั้งค่า CSS แล้วเราต้องเพิ่มรูปแบบการเปลี่ยน CSS ที่สำคัญทั้งหมด โค้ด CSS ที่สมบูรณ์พร้อมการเปลี่ยนคือ:

article.live {opacity: 1; width: 278px; height: 150px; transition: all 2s;}
article.live:hover{height:270px;transition:all 1s;}

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

$ (ฟังก์ชัน () {
$ ("บทความ") addClass ("สด");
});

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

article.full {z-index: 1; left: 0; width: 915px; opacity: 1; height: 350px; transition:

ทั้ง 4s;}
article.gone {opacity: 0; transition: all 1s;}

และ jQuery ที่จะเพิ่มคือ:

$ ("article") คลิก (function () {
$ ('ส่วน div'). toggleClass ('ซ่อน');
$ ("article"). not ($ element) .toggleClass ("gone");
$ ("article"). not ($ element) .toggleClass ("live");
$ element.toggleClass ("เต็ม");
$ (this) .toggleClass ("สด");
});

เราใช้ jQuery เพื่อเพิ่มคลาส CSS ให้กับองค์ประกอบ แต่หลีกเลี่ยงการเรียกใช้ฟังก์ชัน jQuery animate และได้รับประโยชน์จากการเรียกใช้ฟังก์ชัน JS น้อยลง คุณยังสามารถไปเพิ่มเติมและใช้ JavaScript บริสุทธิ์เพื่อเพิ่มเหตุการณ์การคลิกและการสลับคลาสเพื่อเพิ่มประสิทธิภาพเพจให้มากยิ่งขึ้นและทำให้เบาบางลง

สิ่งสำคัญคือต้องสังเกตว่าการเปลี่ยน CSS หมายความว่าเราสามารถใช้สคริปต์น้อยลงเพื่อสร้างเอฟเฟกต์ที่ยอดเยี่ยมได้ แต่จนกว่าเราจะได้ CSS

เราจะต้องใช้บางส่วน

05. การขัดเงา

ดังนั้นงานพื้นฐานจึงเสร็จสิ้นและมันก็ดูดีมากถ้าอาจจะธรรมดาไปหน่อย ตอนนี้เรามาเพิ่ม CSS และ JavaScript พิเศษเล็กน้อยเพื่อเพิ่มสีสันให้กับสิ่งต่างๆ

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

ฟังก์ชัน addDelay (องค์ประกอบ) {
var timeArray = อาร์เรย์ใหม่ (200, 600, 1000, 1400, 1800, 2200, 2600);
สำหรับ (var count = 0; count elements.length; count ++) {
setTimeout (’$ ("บทความ"). eq (’ + count + ’). addClass ("live)’, timeArray [parseInt (Math.random () * 6)]);
}
}

จากนั้นเรียกมันด้วยคอลเลกชันรายการของเรา:

addDelay ($ ('บทความ'));

จากนั้น CSS เพิ่มเติมเล็กน้อยเพื่อเพิ่มความฉลาดให้กับรูปลักษณ์ CSS แบบเต็มคือ:

บทความ {height: 150px; z-index: 0; position: relative; overflow: hidden; opacity: 0;
margin: 10px; padding: 10px; float: left; border-radius: 10px; backgroundcolor: #
fbfbfb; border: 1px solid # 878787; การเปลี่ยนแปลง: ความสูง 1s;}
article.live {opacity: 1; width: 278px; height: 150px; transition: all 2s;}
article.live:hover{height:270px;transition:all 1s;}
article.full {z-index: 1; left: 0; width: 915px; opacity: 1; height: 350px; transition:

ทั้ง 4s;}
article.gone {opacity: 0; transition: all 1s;}
บทความ img {box-shadow: 0 1px 2px # 000; cursor: pointer;}

06. ตอนนี้สำหรับเบราว์เซอร์รุ่นเก่า

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

สิ่งที่ยอดเยี่ยมเกี่ยวกับเรื่องนี้คือคุณจะไม่สูญเสียฟังก์ชันใด ๆ อันเป็นผลมาจากเบราว์เซอร์ที่ไม่รองรับ ปัญหาเดียวคือมันจะดูไม่เนียนเหมือนใน Chrome รุ่นล่าสุดและเบราว์เซอร์ใหม่อื่น ๆ ทั้งหมด

คุณสามารถโต้แย้งกับการรบกวนที่จะใส่ในทางเลือกเมื่อฟังก์ชันการทำงานยังคงเหมือนเดิม อย่างไรก็ตามสามารถเพิ่มได้อย่างง่ายดายโดยใช้ jQuery และสามารถเป็นจุดเชื่อมต่อกับลูกค้าที่ต้องการประสบการณ์การใช้งานที่สอดคล้องกัน เบราว์เซอร์ที่ไม่รองรับหลัก ๆ ที่คุณน่าจะเจอ ได้แก่ Firefox 3.5 หรือต่ำกว่ารวมถึง Internet Explorer 9 และต่ำกว่า

เราจะใช้ Modernizr conditional เพื่อตรวจสอบการรองรับการเปลี่ยนแปลงโดยเพิ่มตัวจัดการเหตุการณ์ jQuery หากไม่รองรับ

นี่คือรหัสสำรอง:

function fullySupported () {
/ * เราย้าย JavaScript ที่ใช้งานได้ทั้งหมดที่นี่สำหรับเบราว์เซอร์ที่รองรับ * /
}
function nonSupportive () {
/ * นี่คือที่ที่คุณจะกลับไป * /
/ * พับ IE และเบราว์เซอร์ Firefox 3.5 รุ่นก่อนหน้า * /
}
ถ้า (! Modernizr.CSStransitions) {
ไม่สนับสนุน ();
}
อื่น{
รองรับอย่างเต็มที่ ();
}

จากนั้นเราต้องเพิ่ม JavaScript สำหรับเบราว์เซอร์ที่ไม่รองรับ:

$ ("article") คลิก (function () {
// แคชรายการที่คลิก
var $ element = $ (นี้);
if (! $ element.hasClass ("เต็ม")) {
$ ("article"). not ($ element) .animate ({'opacity': 0}, 1000);
$ element.animate ({
"width": "915px",
"ความสูง": "350px",
'opacity': 1}, 4000, function () {
$ (this) .addClass ("เต็ม");
});
}อื่น{
$ ("article"). not ($ element) .animate ({'opacity': 1}, 1000);
$ element.animate ({
"width": "278px",
"ความสูง": "150px",
'opacity': 1}, 4000, function () {
$ element.removeClass ("เต็ม");
$ element.addClass ("สด");
});
}
});

07. บทสรุป

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

ออกไปและใช้การเปลี่ยน CSS อย่างที่ฉันได้กล่าวไปแล้วถ้าคุณสามารถทำได้ด้วย jQuery ภาพเคลื่อนไหว ()คุณสามารถทำได้ด้วยการเปลี่ยน - ในความเป็นจริงมากกว่านั้นเนื่องจากคุณต้องมีปลั๊กอิน ภาพเคลื่อนไหว () สี

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

บทความนี้ปรากฏครั้งแรกในฉบับที่ 233 ของนิตยสาร. net ซึ่งเป็นนิตยสารที่ขายดีที่สุดในโลกสำหรับนักออกแบบและพัฒนาเว็บไซต์
ขอขอบคุณ Chris Mills สำหรับการทบทวนบทช่วยสอนนี้โดยเพื่อนของเขา

Andrew เป็นผู้พัฒนาอาวุโสของ Turn Key ซึ่งเป็นหน่วยงานการตลาดแบบบูรณาการ: www.atmd.co.uk

ชอบสิ่งนี้ไหม อ่านสิ่งเหล่านี้!

• ซอฟต์แวร์ออกแบบกราฟิกฟรีสำหรับคุณตอนนี้!
• ค้นพบสิ่งต่อไปสำหรับ Augmented Reality
• ดาวน์โหลดพื้นผิวฟรี: ความละเอียดสูงและพร้อมใช้งานทันที