முக்கியமான #18: தொடரியல் :: highlight()ing, name-feature() and Other | CSS-தந்திரங்கள்

சரி, அது ஒரு மடக்கு. இல்லை, இல்லை flex-wrapஆனால் இன்று ஒரு புதிய நாள், வாரம், மாதம், பருவம், aaaand புதிய பதிப்பு முக்கியமானது என்ன (#18)கடந்த இரண்டு வாரங்களில் CSS டெவலப்பர்கள் உருவாக்கிய சிறந்த உள்ளடக்கத்தை உங்களுக்குக் கொண்டு வருகிறது.

டூல்டிப்களை ஏன் உடனடியாக தாமதப்படுத்த வேண்டும் என்பதை அபிஷேக் ஜாகர் விளக்கினார் (முக்கியமாக நாம் தற்செயலாக அவற்றை இயக்காமல் இருக்க வேண்டும், பின்னர் அவை இனி நமக்கு தேவையில்லாத போது உடனடியாக மறைந்துவிடும்). அதையெல்லாம் எப்படி செய்வது என்று அபிஷேக் எங்களுக்குக் காட்டினார். நான் கவனிக்க விரும்பும் ஒரு விஷயம் என்னவென்றால், வைக்கப்படும் பகுதி மிகவும் சிறியதாக இருந்தால், டூல்டிப் தற்செயலாக அணைக்கப்படலாம், எனவே நான் அதை தாமதப்படுத்துகிறேன். என்று வழக்கு

இரண்டு முக்கிய CSS பண்புகளுடன் வரும் ஃபோகஸ் இணைப்புகளைப் பயன்படுத்தும் நவீன செயலாக்கத்துடன் கிறிஸ் கோயர் பதிலளித்தார்: interest-delay-start மற்றும் interest-delay-end. தற்போது குரோம் மட்டுமே கவனத்தை அழைப்பவர்களை ஆதரிக்கிறது, ஆனால் இது ஒரு முற்போக்கான முன்னேற்றம், இல்லையா?

இன்று அதை எவ்வாறு பயன்படுத்துவது

முற்போக்கான மேம்பாடுகளைப் பற்றி பேசுகையில், அனைத்து வெளிப்புற வன்பொருள் (GPS செயற்கைக்கோள்கள், Wi-Fi நெட்வொர்க்குகள், செல் கோபுரங்கள் போன்றவை) மற்றும் அனுமதி நிலையை பின்னர் மாற்றுவது எவ்வளவு ஏமாற்றமளிக்கிறது என்பதாலும் புவிஇருப்பிடம் API எப்போதும் சவாலாகவே இருந்து வருகிறது. நிறைய விஷயங்களை சரி செய்கிறது ஆனால் சில புதிய விஷயங்களை அறிமுகப்படுத்துகிறது. உதாரணமாக, சில…அலங்கார கட்டுப்பாடுகள்.

மேலும் குரோம் மட்டுமே இதை ஆதரிக்கும் என்பதால், அதை எப்படி பயன்படுத்துவது என்று விளக்கினேன் தற்போதைய புவிஇருப்பிட API உடன், நீங்கள் இன்று அதைப் பயன்படுத்தலாம்.

மைக்ரோலைட்டர்: ஏ ::highlight()– தொடரியல் ஹைலைட்டர்

டேவ் ரூபர்ட் புதிய தனிப்பயன் ஹைலைட் API ஐப் பயன்படுத்தி மைக்ரோலைட்டர் என்ற சிறிய தொடரியல் ஹைலைட்டரை உருவாக்கினார். மைக்ரோலைட்டரை எவ்வாறு பயன்படுத்துவது என்பதையும் அவர் எங்களுக்குக் காட்டினார், மேலும் ஜெஃப் அதைப் பற்றியும் கொஞ்சம் பேசினார்.

CSS கிரிட் தகவலை CSS மாறிகளில் பெறுவது எப்படி

CSS கிரிட் தரவை தனிப்பயன் CSS பண்புகளில் எவ்வாறு பெறுவது என்பதை Afif இன் தீம் காட்டுகிறது. குறிப்பாக, வரிசைகள் மற்றும் நெடுவரிசைகளின் எண்ணிக்கையையும், ஒவ்வொரு கலத்தின் ஆயத்தொலைவுகளையும் (x/y குறியீடுகள்) எவ்வாறு பெறுவது. ஒரே தேவை என்னவென்றால், நெடுவரிசைகள் சம அகலத்தில் இருக்க வேண்டும், ஆனால் CSS சமீபத்தில் உருவாகி வரும் விதத்தில், இது நிச்சயமாக மாறலாம்.

ஹோவர் அருகாமையைத் தீர்மானிக்க இதை எவ்வாறு பயன்படுத்தலாம் என்பதையும் டெமானி எங்களுக்குக் காட்டினார் மிகவும் குளிர்:

இருண்ட நிலை: இரண்டு-நிலை அல்லது மூன்று-நிலை?

லியா வெரு இரண்டு மாநிலங்கள் என்கிறார், ஆனால் பிராம்ஸ் மூன்று நிலைகள் என்கிறார் – நீங்கள் என்ன சொல்கிறீர்கள்? தனிப்பட்ட முறையில், Vale.Rocks விவரித்த இரண்டு நிகழ்வுகளையும் செயல்தவிர்ப்பதற்கான தானியங்கி அணுகுமுறையை நான் விரும்புகிறேன்:

வகுப்பு முன்னொட்டைத் தேர்ந்தெடுப்பதற்கான அறிமுகம்

பிராம்ஸ் ஒரு கிளாஸ் முன்னொட்டுத் தேர்வியையும் அறிமுகப்படுத்தினார், இது இன்னும் எங்கும் ஆதரிக்கப்படவில்லை என்றாலும், மிகவும் எளிமையானது மற்றும் மிகவும் பயனுள்ளது (நீங்கள் கீழே காணலாம்), எனவே இதில் விரைவான மாற்றத்தை எதிர்பார்க்கிறேன்.

.something-* {
  /* ... */
}

பண்புக்கூறு தேர்வாளர்களை விட இது தூய்மையானது மற்றும் திறமையானது:

[class^="something-"] {
  /* Matches class="something-xxx" */
}

[class*=" something-"] {
  /* Matches class="xxx something-xxx" */
}

[class*="something-"] {
  /* Matches class="my-something-xxx" */
}

வகுப்பு முன்னொட்டுத் தேர்வாளரைப் பற்றி ஜெஃப் கூறியது இங்கே.

…மற்றும் named-feature() செயல்பாடு

பிராம்ஸ் (உண்மையாகச் சொல்வதானால், இங்கே ஒரு ரோலில் இருப்பவர்), மேலும் தோன்றினார் @supports named-feature() செயல்பாடு இருப்பினும், இது Chrome ஆல் ஆதரிக்கப்படுகிறது, மேலும் உறுப்புகளை நிலைநிறுத்தும்போது உலாவி மாற்றங்களை மதிக்கிறதா என்பது போன்ற மிகவும் குறிப்பிட்ட விஷயங்களுக்கு ஆதரவைக் கேட்கிறது. @supports முற்றிலும் அதிக திறன் கொண்டது.

வரிசைகள் அல்லது நெடுவரிசைகளில் மூடப்பட்ட பொருட்களை எவ்வாறு சமநிலைப்படுத்துவது

Chromeக்கு என்ன புதியது என்பது இங்கே flex-wrap: balanceஎன்று அடிப்படையில் text-wrap: balance ஆனால் நெகிழ்வான பொருட்களுக்கு. அஹ்மத் ஷாதித் என்ன விளக்கினார் flex-wrap: balance அது என்ன செய்கிறது மற்றும் அதை நாம் எதற்காகப் பயன்படுத்தலாம்.

புதிய இணைய தளத்தின் அம்சங்கள் மற்றும் புதுப்பிப்புகள்

இலையுதிர் காலம்/இலையுதிர் காலம், இதோ வந்தோம்!