என்ன !முக்கியம் #10: HTML-in-Canvas, Hex Maps, E-ink Optimization மற்றும் பல | CSS-தந்திரங்கள்

டெவலப்பர்கள் HTML-in-Canvas, ஒரு அறுகோண உலக வரைபடத்தை பாகுபடுத்தும் அம்சம், மின் மை சாதனங்களுக்கான இணைய அடிப்படையிலான இயக்க முறைமையை மாற்றியமைத்தனர். img srcகள் பயன்படுத்துகின்றன contentமற்றும் பலர். இதுதான் என்ன !முக்கியம் #10.

HTML-in-Canvas சோதனைகள்

HTML-in-Canvas, உண்மையான சொற்பொருள் HTML ஐ வழங்க அனுமதிக்கும் புதிய API விஷுவல் எஃபெக்ட்ஸ், அதுதான் இப்போதெல்லாம் பேசுது, அதனால ஓட்டுப்போடலாம். HTML-in-Canvas API எவ்வாறு செயல்படுகிறது என்பதை அமித் ஷீன் எங்களுக்குக் காட்டினார், மேலும் HiC ஷோரூமில் சில டெமோக்களையும் உருவாக்கினார், இது போன்ற (Chrome 146 தேவை chrome://flags/#canvas-draw-element கொடி இயக்கப்பட்டது):

CodePen Embed Fallback

ஹெக்ஸ் உலக வரைபடத்தை பாகுபடுத்தும் செயல்பாட்டை உருவாக்குதல்

பென் ஸ்வார்ஸ் (அற்புதமான பெயர், ஆனால் எந்த தொடர்பும் இல்லை) ஹெக்ஸ் செயல்பாட்டை உலக வரைபடத்தை பாகுபடுத்துவது பற்றி பேசினார். டெவலப்பர் ஷோகேஸை விட இது ஒரு பின்னோக்கிப் பார்க்கும் போது, அது ஒரு உண்மையில் பகுப்பாய்வு, வடிவமைப்பு கட்டுப்பாடுகள், உத்வேகம், பொறியியல் மற்றும் நிச்சயமாக SVG மற்றும் CSS பற்றிய சுவாரஸ்யமான வாசிப்புகள்.

என்ன !முக்கியம் #10: HTML-in-Canvas, Hex Maps, E-ink Optimization மற்றும் பல | CSS-தந்திரங்கள் — ஆதாரம்: காலிபர்.

Rekindle — இ-மை சாதனங்களுக்கான இணைய இயக்க முறைமை

Rekindle என்பது அடிப்படையில் மின்-மை சாதனங்களான Kindle, Kobo மற்றும் Boox போன்றவற்றுக்கான இணைய அடிப்படையிலான இயக்க முறைமையாகும், இவை பெரும்பாலும் குறைந்த ஆற்றல் கொண்டவை மற்றும் அம்சங்கள் நிறைந்தவை. Rekindle ஆனது எண்ணற்ற அம்சங்கள் மற்றும் பயன்பாடுகளை தொகுக்கிறது மற்றும் கருப்பு மற்றும் வெள்ளை நிறத்தில் வடிவமைக்கப்பட்டுள்ளது, எந்த அனிமேஷன்களும் இல்லாமல், மேலும் பல மின்-மை மேம்படுத்தல்களும் இல்லை.

Rekindle க்கான கருப்பு மற்றும் வெள்ளை பயனர் இடைமுகம் முதன்மையாக ஆப்ஸ் ஐகான்களின் கட்டத்தைக் காட்டுகிறது.

பாராட்டு என்பது ஒரு டுடோரியல் (துரதிர்ஷ்டவசமாக) அல்லது ஒரு வர்ணனை அல்ல (மேலே உள்ள உலக வரைபடத்தின் பின்னோக்கியைப் போல), எங்களிடம் பல ஊடக வினவல்கள் உள்ளன, அவை மின் மை சாதனங்களுக்கு மிகவும் பயனுள்ளதாக இருக்கும். மீடியா வினவல்கள் நிலை 5 ஆனது மவுஸ்-ஓவர் திறன், சுட்டிக்காட்டி துல்லியம், காட்சி புதுப்பிப்பு விகிதம், வண்ண ஆழம், ஒரே வண்ணமுடைய பிட் ஆழம், வண்ண குறியீட்டு அளவு, டைனமிக் வரம்பு மற்றும் பலவற்றை வினவலாம்.

எண்ணங்கள்? வரவிருக்கும் ஆண்டுகளில் மின் மை மேம்படுத்தல் வருமா அல்லது இந்த மீடியா வினவல்களுக்கான குறைந்த தேவை ஏன் Rekindle போன்ற அர்ப்பணிப்பு சேவை இருக்க வேண்டும்? உலாவிகள் மற்றும் பல ஊடக வினவல்கள் செயலில் வளர்ச்சியில் உள்ளன, எனவே எனக்குத் தெரியாது என்பது குறிப்பிடத்தக்கது. இந்த இடத்தைப் பார்க்கலாமா?

எப்படியிருந்தாலும், Rekindle இல் ஒரு டெவலப்பர் டீப் டைவ் பார்க்க விரும்புகிறேன்!

பதிலாக `img` `src`கள் பயன்படுத்துகின்றன `content`

இது போன்ற பட ஆதாரங்களை மாற்றுவதற்கு CSS ஐப் பயன்படுத்தலாம் என்பதை ஜான் கண்டுபிடித்தார்:

img {
  content: url(new-image.png) / "New alt text";
}

TIL! #HTML இன் “src” ஐ மாற்றலாம் என்று யாருக்குத் தெரியும் #CSS ஐப் பயன்படுத்துகிறது: img {content: url(whatever.png)} PSEUDOS இல்லை!

இது தற்போதைய அனைத்து உலாவிகளிலும் வேலை செய்வதாகத் தெரிகிறது. இதை நான் எப்படி தவறவிட்டேன்?

— ஜான் (@scrwd.mastodon.social.ap.brid.gy) ஏப்ரல் 20, 2026 மதியம் 1:09 மணிக்கு

இதைப் பற்றி அறிந்து கொள்வது மிகவும் சுவாரஸ்யமானது content சொத்து, இப்போது 11 வருடங்களாக அளவுகோலாக உள்ளது. நான் இன்னும் கொஞ்சம் பரிசோதனை செய்து, இந்த தந்திரமும் வேலை செய்வதைக் கண்டேன் image-set() செயல்பாடு:

img {
  content: image-set(
    url("https://css-tricks.com/whats-important-10/image.png") 1x,
    url("image-2x.png") 2x
  );
}

எனவே நீங்கள் பதிலளிக்காத இணையதளத்தில் பணிபுரிகிறீர்கள் என்றால் கள் மற்றும் மார்க்அப்பை மாற்ற வழி இல்லை, CSS இல் தர்க்கத்தை எழுதவும்.

உடன் பதிலளிக்கக்கூடிய படங்களை செயல்படுத்துதல் `sizes=auto`

சொல்லப்பட்டால், நீங்கள் செய்ய உங்களுக்கு HTML அணுகல் உள்ளது, நீங்கள் பதிலளிக்கக்கூடிய படங்களைப் பயன்படுத்தி வழங்க வேண்டும் srcset மற்றும் sizes HTML பண்புக்கூறுகள். மாட் மார்க்விஸ் இது எப்படி புதியது என்பதை நிரூபித்தார் sizes=auto பண்புக்கூறு-மதிப்பு சேர்க்கையானது, சோம்பேறியாக ஏற்றப்பட்ட படங்களுக்கான பதிலளிக்கக்கூடிய முறிவுப் புள்ளிகளை மேலெழுதுகிறது.

நீங்கள் ஆர்வமாக இருந்தால், அமித் ஷீன் பிரேக் பாயிண்ட் இல்லாமல் லேஅவுட்களை (படங்கள் அவசியமில்லை) உருவாக்குவது பற்றியும் பேசினார்.

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

கூடுதல் உள்ளடக்கத்திற்காக நீங்கள் பசியாக இருந்தால், Syntax.fm இன் வெஸ் பாஸ் மற்றும் ஸ்காட் டோலின்ஸ்கி 10 புதிய CSS மற்றும் HTML APIகளைப் பற்றி விவாதிக்கிறார்கள்: