බහු CSS තේරීම්කරුවන් සමූහගත කිරීම

බර වේගයේ වැඩිදියුණු කිරීම සඳහා සමූහයේ බහු CSS තේරීම්කරුවන්

සාර්ථක වෙබ් අඩවියක කාර්යක්ෂමතාවයක් වැදගත් වේ. අන්තර්ජාලය ඔස්සේ රූප භාවිතා කරන ආකාරය එම වෙබ් අඩවිය කාර්යක්ෂම විය යුතුය. මෙම වෙබ් අඩවියට අමුත්තන් හොඳින් තම උපාංගයන් මත ඉක්මනින් ප්රවේශ වීමට වෙබ් අඩවියක් බවට වගබලා ගැනීම සහතික කරනු ඇත. කාර්යක්ෂමතාවය ඔබේ සමස්ත ක්රියාවලියේ කොටසක් විය යුතු අතර, වෙබ් අඩවියේ ප්රගතිය කාලය හා අයවැය මත ප්රගතිය පවත්වා ගැනීමට ඔබට උපකාරී වනු ඇත.

අවසානයේදී වෙබ් අඩවිය නිර්මාණය සහ දිගුකාලීන සාර්ථකත්වයේ සියලු අංශවල කාර්යක්ෂමතාවය කාර්යක්ෂම වේ. මෙම වෙබ් අඩවි වල CSS පත්ර සඳහා ලියා ඇති විලාසයන් ඇතුලුව. පිරිසිදු CSS ලිපිගොනු නිර්මාණය කිරීමට හැකි වීමෙන් ඔබට මෙය කළ හැකි එක් ක්රමයක් වන්නේ, CSS තේරීම්කරුවන් එකට එකතු කිරීමෙනි.

කණ්ඩායම් තේරීම්

ඔබ CSS තේරීම්කරුවන් කාණ්ඩගත කරන විට , ඔබ ඔබේ ශෛලියෙහි ඇති ශෛලීන් නැවත නැවත නොපෙන්වීමකින් තොරව විවිධ අංගයන් සඳහා එකම ශෛලයන් යෙදිය හැකිය. දෙක හෝ තුනක් හෝ ඊට වැඩි CSS රීති තිබීම වෙනුවට, සෑම දෙයක්ම එකම දේ කරයි (නිදසුනක්, රතු පැහැයෙන් දැක්වෙන වර්ණය තෝරන්න), ඔබේ පිටුව සඳහා ඉටු කරන තනි CSS රීතියක් තිබේ.

මෙම "තේරීම් කමිටුව" පිටුවකට ප්රතිලාභ ලැබීමට හේතු කිහිපයක් තිබේ. පළමු ඕෆ්ට්, ඔබේ ශෛලිය පත්රිකාව කුඩා වන අතර ඉක්මනින් ප්රවේශ වේ. මන්ද යත්, සෙවුම් අඩවි ප්රමාද වැඩිවීමේ අඩවි වලට පැමිණෙන විට ප්රධාන පෙළේ අපරාධකරුවෝ එක් නොවේ. CSS ගොනු යනු පෙළ ගොනුවක් වන අතර, ඉතා කෙටි දිගු CSS පත්ර සාමාන්යයෙන් කුඩා, ගොනු-ප්රමාණාත්මක වේ. එහෙත්, සෑම කුඩා ටිකක්ම ගණන් ගනී. තවද ඔබේ CSS වල යම් ප්රමාණයක රැවුල බෑමට හා වඩා වේගවත් පිටු පැටවීමට හැක, එය සැමවිටම හොඳ දෙයක්.

සාමාන්යයෙන්, අඩවි සඳහා සාමාන්ය බර පටිපාටි තත්පර 3 ට වඩා අඩුය; තත්පර 3 සිට 7 දක්වා සාමාන්යය වේ. තත්පර 7 කට වඩා වැඩි වේගය ඉතා මන්දගාමී වේ. මෙම අඩු සංඛ්යා අදහස් වනුයේ, ඔබේ වෙබ් අඩවිය සමඟ ඔවුන් සපුරා ගැනීම සඳහා, ඔබට හැකි සෑම දෙයක්ම කළ යුතුය! සංයුක්ත CSS තේරීම්කරුවන් භාවිතා කිරීමෙන් ඔබේ වෙබ් අඩවිය වේගවත් කර ගැනීමට ඔබට උපකාර කළ හැකි වන්නේ එබැවිනි.

කණ්ඩායම් CSS තේරීම්කරුවන් සඳහා කෙසේද

ඔබේ CSS කාණ්ඩ තේරීම සඳහා ඔබේ CSS කාණ්ඩ තේරීම සඳහා, ඔබ විසින් ශෛලිය තුළ කාණ්ඩගත කර ඇති තේරීම්කරුවන් කිහිපයක් වෙන් කිරීම සඳහා කොමා භාවිතා කරන්න . පහත උදාහරණයේ දී, ශෛලිය p සහ div අංග වලට බලපායි:

div, p {වර්ණ: # f00; }}

කොමාව මූලික වශයෙන් "සහ" යන්නයි. එබැවින් මෙම තේරීම සියලු ඡේදයේ සියලු අංග හා සියලුම බෙදීම් අංග වලට අදාල වේ. කොමාව අතුරුදහන් වූවා නම්, ඒ වෙනුවට කොට්ඨාශයේ දරුවා වන සියලුම ඡේදවල මූලිකාංග වනු ඇත. එය බොහෝ සෙයින් වෙනස් තේරීම්කාරකයකි, එබැවින් මෙම කොමාව ඇත්ත වශයෙන්ම තේරුම තේරුම වෙනස් කරයි!

ඕනෑම ආකාරයක තේරීම්කරුවකු වෙනත් ඕනෑම තේරීම්කරුවකු සමඟ කාණ්ඩගත කළ හැක. මෙම උදාහරණයේදී, පරාස selector එක ID තේරීමේ තේරීමෙන් කාණ්ඩගත කර ඇත:

p.red, #sub {වර්ණ: # f00; }}

එබැවින් මෙම ස්වරූපය "රතු" ප්රවර්ගයේ ආකෘතියේ කිසියම් ඡේදයකට අදාළ වේ, සහ ඕනෑම මූලද්රව්යයක් ("කුමන වර්ගයක්" යන්නෙන් අපට නියම කර නැත).

තනි වචන සහ තේරීම් තේරීම්කරුවන් වැනි තෝරාගත් කථිකයන් ඇතුලුව ඕනෑම තේරීම් තේරීම් කණ්ඩායමක් කණ්ඩායම්ගත කළ හැකිය. මෙම උදාහරණයට විවිධ තේරීම්කරුවන් හතරක් ඇත:

p, .red, #sub, div a: link {වර්ණය: # f00; }}

එබැවින් මෙම CSS නියමය පහත සඳහන් පරිදි වේ:

• යම් ඡේදයක මූලද්රව්යයක්
• "රතු" පන්තියට අයත් ඕනෑම මූලද්රව්යයක්
• "Sub" හි හැඳුනුම්පතක් සහිත ඕනෑම මූලද්රව්යයක්
• කොට්ඨාශයේ දිරාපත් වූ නැංගුරම් මූලද්රව්යවල "සම්බන්ධ" ව්යාජ පංතිය.

අවසාන තේරීම්කාරකය සංයුක්ත තේරීම්කාරකය. මෙම CSS නියමය තුළ අනෙකුත් තේරීම්කරුවන් සමඟ පහසුවෙන් එය ඒකාබද්ධ කළ හැකිය. එම රීතිය සමඟ, අපි මෙම 4 තේරීම් වලදී # f00 (රතු) වන අතර, එම ප්රතිඵලය සපුරා ගැනීම සඳහා වෙනම තේරීම් තේරීම්කරුවන් 4 ක් ලිවීමට වඩාත් යෝග්ය වේ.

තේරීම් කණ්ඩායම්කරුවන්ගේ තවත් ප්රතිලාභයක් වන්නේ, ඔබ වෙනස් කිරීමක් අවශ්ය නම්, ඔබට තනි තනි CSS රීතියක් වෙනස් කළ හැකිය. මෙයින් අදහස් කරන්නේ මෙම වෙබ් අඩවියේ අනාගත වෙබ් අඩවිය පවත්වා ගෙන යාම සඳහා පිටු බර හා කාලයයි.

ඕනෑම තේරීම්කරුවකු කණ්ඩායම්ගත කළ හැක

ඉහත උදාහරණවලින් ඔබට පෙනෙන පරිදි, ඕනෑම වලංගු තේරීමක් සමූහයකට තැබිය හැකි අතර, සමූහගත වූ මූලද්රව්යවලට ගැලපෙන සියළු මූලද්රව්ය එම ශෛලිය මත පදනම්ව එකම ආකාරයේම ඇත.

සමහරු විසින් යතුරු ලියනය කරන ලද මූලද්රව්යයන් කේතය තුළ කියවීම සඳහා වෙනම රේඛා ඔස්සේ ලැයිස්තුගත කිරීමට කැමැත්තක් දක්වයි. වෙබ් අඩවියේ හා බර පැටවීමේ පෙනුම සමාන වේ. උදාහරණයක් ලෙස, කොමා එක් ශෛලීය ගුණයක් එක් කෝඩ් එකකින් වෙන් කර ඇති ශෛලීන් ඒකාබද්ධ කළ හැකිය:

th, td, p.red, div # firstred {වර්ණය: රතු; }}

හෝ පැහැදිලි කිරීම් සඳහා තනි රේඛාවල ඇති විලාසයන් ලැයිස්තුගත කළ හැකිය:

වන,
td,
ප.ව.
div # පළමු
{
වර්ණය: රතු;
}}

CSS තේරීම්කරුවන් සමූහය සඳහා ඔබ භාවිතා කරන ක්රමයක් ඔබේ වෙබ් අඩවිය වේගවත් කර දිගු කාලීන විලාසයන් කළමණාකරණය කිරීමට පහසු වේ.

ජෙනිෆර් ක්රිනින්ගේ මුල් ලිපියක්. 5/8/17 ජෙරමි ගිරාඩ් විසින් සංස්කරණය කරන ලදි.