கிரிட் உருப்படிகளின் காட்சி வரிசையை அமைத்தல்
CSS order பண்பு கிரிட் உருப்படிகளின் காட்சி வரிசையை வரையறுக்கப் பயன்படுத்தப்படுகிறது.
HTML மூலக் குறியீட்டில் உள்ள முதல் கிரிட் உருப்படி கிரிட் கொண்டெய்னரில் முதல் உருப்படியாக தோன்ற வேண்டியதில்லை.
HTML மூல வரிசை
- Item 1 (order: 3)
- Item 2 (order: 6)
- Item 3 (order: 1)
- Item 4 (order: 2)
- Item 5 (order: 4)
- Item 6 (order: 5)
காட்சி வரிசை (order பயன்படுத்திய பின்)
- Item 3 (order: 1)
- Item 4 (order: 2)
- Item 1 (order: 3)
- Item 5 (order: 4)
- Item 6 (order: 5)
- Item 2 (order: 6)
எடுத்துக்காட்டு
கிரிட் உருப்படிகளின் காட்சி வரிசையை அமைத்தல்:
.item1 {order: 3;}
.item2 {order: 6;}
.item3 {order: 1;}
.item4 {order: 2;}
.item5 {order: 4;}
.item6 {order: 5;}முடிவு:
கவனிக்க:
HTML மூல வரிசை: 1, 2, 3, 4, 5, 6
காட்சி வரிசை (order பயன்படுத்திய பின்): 3, 4, 1, 5, 6, 2
குறைந்த order மதிப்பு உள்ள உருப்படிகள் முதலில் வரும் (order: 1 முதலில் வரும்)
அணுகல் குறிப்பு:
order பண்பு காட்சி மறுசீரமைப்பை வழங்குகிறது, ஆனால் இது DOM இல் உள்ள உறுப்புகளின் தருக்க வரிசையை மாற்றாது.
இது திரை வாசிப்பிகள் போன்ற உதவி தொழில்நுட்பங்களைப் பயன்படுத்தி தளத்தில் செல்லும் பயனர்களைப் பாதிக்கும், ஏனெனில் உள்ளடக்கம் காட்சியாக வழங்கப்படும் வரிசையை விட வேறு வரிசையில் வாசிக்கப்படும்.
பரிந்துரை: முக்கியமான உள்ளடக்க வரிசையை மாற்ற order பண்பைப் பயன்படுத்துவதைத் தவிர்க்கவும். இது பார்வையற்ற பயனர்களுக்கு குழப்பத்தை ஏற்படுத்தும்.
Order பண்பு எவ்வாறு செயல்படுகிறது
இயல்புநிலை நடத்தை
- அனைத்து கிரிட் உருப்படிகளும் order: 0 மதிப்பைக் கொண்டுள்ளன
- HTML மூல வரிசையின் அடிப்படையில் வரிசைப்படுத்தப்படுகின்றன
- சம order மதிப்பு உள்ள உருப்படிகள் HTML வரிசையில் தோன்றும்
Order பண்பைப் பயன்படுத்தும் போது
- கிரிட் உருப்படிகள் அவற்றின் order மதிப்பின் அடிப்படையில் வரிசைப்படுத்தப்படுகின்றன
- குறைந்த order மதிப்பு முதலில் வரும்
- எதிர்மறை order மதிப்புகள் அனுமதிக்கப்படுகின்றன
- சம order மதிப்பு உள்ள உருப்படிகள் HTML வரிசையில் தோன்றும்
order பண்பு மதிப்புகள்:
- இயல்புநிலை: 0
- எதிர்மறை மதிப்புகள்: அனுமதிக்கப்படுகின்றன (-1, -2, போன்றவை)
- நேர்மறை மதிப்புகள்: அனுமதிக்கப்படுகின்றன (1, 2, 3, போன்றவை)
- சம order: HTML மூல வரிசையைப் பின்பற்றும்
நடைமுறை பயன்பாட்டு நிகழ்வுகள்
சரியான பயன்பாடு
- மொபைல் லேஅவுட்டுகளில் உள்ளடக்கத்தை மறுசீரமைத்தல்
- விளம்பரங்களை அடிப்படை உள்ளடக்கத்திற்குப் பிறகு வைத்தல்
- சிறிய காட்சி மாற்றங்கள்
- தொடு அல்லாத காட்சி விளைவுகள்
தவறான பயன்பாடு
- முக்கிய உள்ளடக்க வரிசையை மாற்றுதல்
- அணுகல் சிக்கல்களை ஏற்படுத்துதல்
- SEO பிரச்சினைகள்
- தேடல் எஞ்சின் குழப்பம்
சிறந்த நடைமுறை:
Order பண்பைப் பயன்படுத்தும் போது:
- முக்கிய உள்ளடக்க வரிசையை மாற்றாதீர்கள்
- அணுகலை சோதிக்கவும் (திரை வாசிப்பிகள்)
- சிறிய, காட்சி மாற்றங்களுக்கு மட்டுமே பயன்படுத்தவும்
- எப்போதும் HTML இல் அர்த்தமுள்ள வரிசையை வைத்திருங்கள்
CSS கிரிட் ஆர்டர் பயிற்சி
கிரிட் உருப்படிகளின் order பண்பு பற்றிய உங்கள் அறிவை இந்தப் பயிற்சி சோதிக்கும்: