CSS2 සහ CSS3 අතර වෙනස

CSS3 වෙත ප්රධාන වෙනස්කම් හඳුනා ගැනීම

CSS2 සහ CSS3 අතර ඇති විශාලතම වෙනස වන්නේ CSS3 මොඩියුල ලෙස හැඳින්වෙන විවිධ කොටස්වලට බෙදී ඇති බවයි. මෙම එක් එක් මොඩියුල නිර්දේශය ක්රියාවලියේ විවිධ අවස්ථා වල W3C හරහා ගමන් කරයි. මෙම ක්රියාවලිය විවිධ නිෂ්පාදකයන් විසින් බ්රවුසරයේ විවිධ CSS3 කොටස් පිළිගැනීමට සහ ක්රියාත්මක කිරීමට පහසු කර ඇත.

CSS2 සමඟ සිදු වූ දේ වලට ඔබ මෙම ක්රියාවලිය සන්සන්දනය කර ඇත්නම්, එය ඇතුලත සියලු කැස්කැඩින් ස්ටයිල් පත්රය තොරතුරු එක් එක් ලියවිල්ලක් ලෙස ඉදිරිපත් කරන ලද අතර, එම නිර්දේශය කුඩා පරිමාණ තනි තනි කොටස් බවට පත්කිරීමේ වාසි දැකීමට පටන් ගනියි. එක් එක් මොඩියුල තනි තනිව වැඩ කරමින් සිටින නිසා, CSS3 මොඩියුල සඳහා බ්රවුසරය සඳහා පුළුල් පරාසයක බ්රෝඩ් කරන්න.

ඕනෑම නව සහ වෙනස්වන පිරිවිතරයන්ට අනුව, ඔබේ බ්රවුසර හා මෙහෙයුම් පද්ධති මෙන් ඔබේ CSS3 පිටු පරික්ෂා කිරීමට වග බලා ගන්න. ඉලක්කය වන්නේ සෑම බ්රවුසරයකම හරියටම සමාන වූ වෙබ් පිටු නිර්මාණය කිරීම නොව, ඔබ භාවිතා කරන ඕනෑම විලාසිතාවන්, CSS3 ශෛලීය ඇතුළුව, ඒවාට සහයෝගය දක්වන බ්රවුසර වල සහ ඒවා පැරණි බ්රව්සර සඳහා ආකර්ෂණීය ලෙස ප්රතිෂ්ඨාපනය කිරීමයි. එපා.

නව CSS3 තේරීම්කරුවන්

CSS3 මඟින් නව CSS තේරීම්කරුවන් සමඟ CSS රීති ලිවිය හැකිය, නව combinator සහ නව ව්යාජ මූලද්රව්ය කිහිපයක් ලිවිය හැකිය.

නව ආරක තේරීම් තුනක්:

• ආරම්භයේ ඇති ගුණාංග මුලුමනින් ගැලපෙන මූලද්රව්යය [foo ^ = "බාර්"] මෙම මූලද්රව්යය "බාර්" සමඟ ආරම්භ වන foo ලෙස හැඳින්වේ.
• Атрибут අවසානයෙහි හරියටම මූලද්රව්යය [foo $ = "බාර්"] අංගය අවසානයේ foo ලෙස හැඳින්වේ.
• Атрибут සතර මූලද්රව්යය අඩංගු වේ [foo * = "බාර්"] මෙම මූලද්රව්යය "බාර්" යන්න අඩංගු වන foo යනුවෙන් හැඳින්වේ.

නව ව්යාජ පංති 16:

• : root
  • ලේඛනයේ මූල මූලය. මෙය HTML වේ.
• : nth-දරුවා (n)
  • නිවැරැදි ගැළපීම සඳහා නිශ්චිත ළමා කොටස් වලට ගැලපෙන ලෙස හෝ විචල්යයන් භාවිතා කිරීමට මෙය භාවිතා කරන්න.
• : nth-last-child (n)
  • අන්තිම එකෙන් ගණනය කර ඇති නිශ්චිත දරු අංග සම්පූර්ණ කිරීම.
• : nth-of-type (n)
  • ලේඛන ගස තුළ එය එකම නම සහිත සහෝදර සහෝදරියන්ට ගැලපේ.
• : nth-last-of-type (n)
  • පසෙකින් ගණනය කරන එකම නම සහිත සහෝදර සහෝදරියන්ට ගැලපේ.
• : අන්තිම දරුවා
  • දෙමව්පියන්ගේ අවසාන දරුවාගේ අංගයට ගැලපෙන්න.
• : පළමු-වර්ගය
  • එම වර්ගයේ පළමු සහෝදර සහෝදරයා සමත්වන්න.
• : අවසන්-වර්ගය
  • එම වර්ගයේ අවසන් සහෝදර සහෝදරයා සමඟ සැසඳීම.
• :එකම දරුවා
  • තම දෙමව්පියන්ගේ එකම දරුවා වන මූලද්රව්යය ගැලපීම.
• : එකම-වර්ගය
  • එහි වර්ගයේ එකම මූලද්රව්යය ගැලපීම.
• : හිස්
  • දරුවන් නොමැති මූලද්රව්යය (පෙළ නෝඩද ඇතුලත්ව) ගැලපීම.
• :ඉලක්කය
  • යොමු URI එකෙහි ඉලක්කය වන මූලද්රව්යයක් ගැලපීම.
• : සක්රිය කර ඇත
  • සක්රිය විට එය මූලද්රව්යයට ගැලපීම.
• : ආබාධිත
  • ආබාධිත වූ විට මූලද්රව්යය ගැලපීම.
• : පරීක්ෂා කරන්න
  • එය පරීක්ෂා කර ඇති විට මූලද්රව්යයට ගැලපීම (රේඩියෝ බොත්තම හෝ කොටුව).

• : නැත
  • සරල තේරීම්කරුට ගැලපෙන විට මූලද්රව්යය නොගැලපේ.

එක් නව combinator එකක්:

• මූලද්රව්යය
  • ElementB පසුව කොතැනකවත් elementB අනුගමනය කරන විට Match එක, අනිවාර්යයෙන්ම අවශ්ය නොවේ.

නව දේපල

CSS3 නව CSS ගුණාංග ද හඳුන්වා දුන්නේය. මෙම ගුණාංග බොහොමයක් Photoshop වැනි ග්රැෆික් වැඩසටහන් සමඟ වැඩි දුරටත් ඇසුරු කළ හැකි දෘශ්ය විලාසයන් නිර්මාණය කිරීම විය. මායිම්-අරය හෝ කොටු-සෙවනැල්ල වැනි සමහරක් ඒවා CSS3 නම් හැඳින්වීමෙන් පටන් ගෙන තිබේ. අනෙකුත්, CSS3 එකතු කිරීම් ලෙස බොහෝ විට CSS3 එකතු කිරීම් ලෙස හැඩගැස්වීම හෝ CSS Grid වැනි තවත් නව විලාසිතා වේ.

CSS3 හි, කොටුවේ ආකෘතිය වෙනස් වී නොමැත. එහෙත් ඔබේ පෙට්ටිවල පසුබිම් සහ දේශසීමා සකස් කිරීමට ඔබට උපකාර වන නව විලාසිතා ගුණාංගයක් තිබේ.

මා සිතන බොහෝ පසුබිම්

පසුබිම් රූප, පසුබිම් ස්ථානය සහ පසුබිම් පුනරුත්ථාපන ආකෘති භාවිතා කරමින් ඔබට පසුබිම් රූප එක් එක් කොටසේ එකිනෙකට ඉහලින්ම සකස් කළ හැක. පළමු රූපය වන්නේ පරිශීලකයාට සමීපතම ස්ථරයයි. පහත දැක්වෙන ඒවා පිටුපසින් වර්ණ ගැන්වේ. පසුබිම් පාටක් තිබේ නම් එය සියලුම පින්තූර තට්ටුව යටින් පින්තාරු කරයි.

නව පසුබිම් ශෛලීත්ව ගුණාංග

CSS3 හි නව පසුබිම් ගුණාංග ද ඇත.

• පසුබිම් clip
  • පසුබිම් රූපය කපා හැරිය යුතු ආකාරය මෙම ගුණාංගය අර්ථ දක්වයි. ප්රකෘතිය යනු මායිම් පෙට්ටියයි, නමුත් එය පැඩ්කිරීමේ පෙට්ටිය හෝ අන්තර්ගත කොටුව වෙනස් කළ හැකිය.
• පසුබිමක් ඇත
  • පසුබිම මත වැටවල් පෙට්ටිය, මායිම් කොටුව හෝ අන්තර්ගත කොටුව විය හැකිද යන්න මෙම ගුණාංගය මගින් තීරණය වේ.
• පසුබිම් ප්රමාණය
  • මෙම ගුණාංගය ඔබට පසුබිම් රූපයේ ප්රමාණය පෙන්විය හැක. මෙම පිටුවට ගැලපෙන කුඩා පින්තූර දිගු කිරීමට ඉඩ සලසයි.

පවත්නා පසුබිම් විලාසිතා දේපල වෙනස් කිරීම

පවත්නා පසුබිම් ආකාරයේ ගුණාංග කිහිපයක්ද ඇත:

• පසුබිම නැවත නැවතත්
  • මෙම දේපල සඳහා නව අගයන් දෙකක් ඇත: අවකාශය සහ වටය. අවහිර නොකොට පෙට්ටියේ ඇතුළත ටයිල් රූපය සමාන්තරව අවකාශය අවකාශය. කවුළුව පසුබිම් රූපය නැවත සකසනු ලබන අතර එමඟින් එය සම්පූර්ණ වාර ගණනක උළු ටයිල් කර ඇත.
• පසුබිම් බැඳීමක්
  • නව අගයක් "දේශීය" එකතු කරනු ලැබේ. එම පසුබිම් ස්ලිටි තීරුවේ ඇති විට පසුබිමෙහි මූලද්රව්යයේ අන්තර්ගතය අනුචලනය වනු ඇත.
• පසුබිම
  • පසුබිම් ශේෂය අනුව එහි විශාලත්වය සහ මූලාරම්භයේ ගුණාංගයන් එකතු වේ.

CSS3 දේශ සීමාවන්

CSS3 දේශසීමා තුළ අප භාවිතා කරන විලාසයන් (ඝන, ද්විත්ව, ඉරිතලා ආදිය) හෝ රූපයක් විය හැකිය. Plus, CSS3 වටකුරු කොන නිර්මාණය කිරීමට ඇති හැකියාව. ඔබ දේශසීමා හතරක ප්රතිරූපයක් නිර්මාණය කරන අතර, එම රූපය ඔබේ දේශසීමාවට අදාළ වන්නේ කෙසේ දැ යි CSS ට කියන්න.

නව දේශ සීමාවන්ගේ ගුණාංග

CSS3 හි නව මායිම් ගුණාංග කිහිපයක් ඇත:

• දේශසීමා අරය
  • දේශසීමා-ඉහළ-දකුණු-අරය , මායිම්-පහළ-දකුණු-අරය , මායිම්-පහළ-වම්-රේන්ද , දේශසීමා-ඉහළ-වම්-අරය
  • මෙම ගුණාංග ඔබට ඔබේ දේශසීමා වටා කොන්ක්රීට් නිර්මාණය කිරීමට ඉඩ සලසයි.
• දේශසීමා-රූප-මූලාශ්රය
  • දැනටමත් නිර්වචනය කළ මායිම් ශෛලීන් වෙනුවට භාවිතා කරන රූප මූලාශ්ර ගොනුව නියම කරයි.
• දේශසීමා-රූප-පෙත්තක්
  • මායිම් ප්රතිරූපය දාරවල සිට අභ්යන්තර ආවරණ නියෝජනය කරයි
• දේශසීමා-රූප-පළල
  • ඔබේ මායිම් ප්රතිරූපය සඳහා පළල වටිනාකම.
• දේශසීමා-රූප-ආරම්භය
  • මායිම් නිරූපකය ප්රදේශයේ මායිම් කොටුව ඉක්මවා ඇති ප්රමාණය නියම කරයි.
• දේශසීමා-රූප-ස්තරය
  • මායිම් පිළිබිඹුවෙහි පැති සහ මැද කොටස ටයිල් කළ හෝ පරිමාණය කළ යුතු ආකාරය අර්ථ දක්වයි.
• දේශසීමා-රූපය
  • සියලු මායිම් ප්රතිරූපය සඳහා වූ ශෛලමය දේපල.

අතිරේක CSS3 දේශසීමා හා පසුබිම් වලට අදාළ දේපළ

පේළියක බිඳීම සඳහා තීරු බිඳීම (පේළි මූලද්රව්ය සඳහා) තීරයක් කැඩී යාමෙන් පසු කොටුව-සැරසීම-බිඳුමේ දේපල නව මායිම් මායිම සහ පැකිලීමකින් ඔතා ඇති ආකාරය නිර්වචනය කරයි. පසුබිම මෙම ගුණාංගය භාවිතයෙන් බහු බිඳුණු පෙට්ටි අතර බෙදා වෙන් කර ගත හැකිය.

සෙවුම් අංග වලට සෙවනැලි එකතු කිරීමට භාවිතා කළ හැකි කොටුව-සෙවනමය දේපල ද තිබේ.

CSS3 සමඟ, ඔබට දැන් පහසුවෙන් වගු හෝ සංකීර්ණ div ටැග් ආකෘති නොමැතිව වෙබ් අඩවි බහු පේළියකින් සැකසිය හැකිය. ඔබ සරල අංගයක් තිබිය යුත්තේ කෙතරම් මූලද්රව්ය හා කොපමණ පුළුල් විය යුතුද යන්නයි. ප්ලස් ඔබට තීරුවේ උසට විහිදී ඇති පාටින් (රීති), පසුබිම් වර්ණ එකතු කළ හැකි අතර, ඔබේ පෙළ ස්වයංක්රීයව සියලු තීරු හරහා ගමන් කරයි.

CSS3 තීරු - තීරු සංඛ්යාව හා පළල නිර්ණය කිරීම

ඔබේ තීරු සංඛ්යාව සහ පළල අර්ථ දැක්වීමට ඉඩ දෙන නව දේපල තුනක් තිබේ:

• තීරු-පළල
  • ඔබේ තීරු යුතු විය යුතුය. බ්රවුසරය පුළුල් ලෙස තීරු සහිත අවකාශය පිරවීම සඳහා පෙළ ගලා යයි.
• තීරු-ගණන
  • පිටුවෙහි තීරු සංඛ්යාව අර්ථ දක්වයි. එවිට බ්රව්සරයේ අවකාශයට ගැලපෙන පරිදි ප්රමාණවත් තරම් තීරු සෑදී ඇත, නමුත් ඔබ ලබාදෙන අංකය පමණි.
• තීරු
  • ඔබට පළල හෝ අංකය (හෝ දෙදෙනාම අර්ථ දැක්විය හැකි ස්ථානයේ දී අර්ථකථනය කරන ලද ලඝු දේපළ).

CSS3 තීරු පටුන සහ රීති

එම බහුමාධ්ය අනුවාදයේ තීරු අතර පරතරය සහ නීති රීති ඇත. පරතරය තීරු බෙදනු ඇත, නමුත් රීති අභ්යවකාශයට නොගනු ඇත. තීරු රීතිය එහි පරතරය වඩා පුළුල් වේ නම්, එය එකිනෙකට ආසන්න තීරු මත රඳා පවතී. තීරු නීති සහ අඩුපාඩු සඳහා නව දේපල පහක් තිබේ:

• තීරු-පරතරය
  • තීරු අතර පරතරය පළල අර්ථ දක්වයි.
• තීරුව-නීතිය-වර්ණය
  • රීතියේ වර්ණය අර්ථ දක්වයි.
• තීරු-නීතිය-විලාසය
  • රීතියේ ශෛලිය (ඝන, තිත්, ද්විත්ව, ආදිය) අර්ථ දක්වයි.
• තීරු-නීතිය-පළල
  • රීතියේ පළල අර්ථ දක්වයි.
• තීරු-නීතිය
  • එක් එක් තීරු පාලන ගුණාංගයන් එකවර නිර්වචනය කරන ලද ශේෂ පත්රයක්.

CSS3 Column Breaks, පිරිවිතර තීරු සහ පිරවුම් තීරු

තීරු බිඳීම් පේජිත අන්තර්ගතයේ බිඳීම් අර්ථදැක්වීමට භාවිතා කරන එකම CSS2 විකල්ප භාවිතා කරයි, නමුත් නව ගුණාංග තුනකින්: break-before , break-after , සහ break-inside .

වගු වල මෙන්, ඔබට තීරු-span ගුණාංග සහිත තීරු සවි කිරීමට ඔබට අංගයන් සැකසිය හැකිය. මෙය පුවත්පත් වැනි බොහෝ තීරු රැසකින් සිරස්තල සෑදීමට ඉඩ සලසයි.

තීරු පිරවුම් තීරු එක් එක් තීරුවෙහි අන්තර්ගතය තීරණය කරනු ලබයි. සමබර තීරු තීරු එක් එක් තීරුවෙහි අන්තර්ගතය එකම ප්රමාණය යොදනු වස්, තීරුව පිරී ඇති තෙක් ස්වයංක්රීයව ප්රවාහය ප්රවාහනය කරයි. ඉන්පසුව ඊලඟ එකට යන්න.

CSS3 හි ඇති තවත් විශේෂාංග CSS2 හි ඇතුලත් කර ඇත

CSS2 හි නොමැති CSS3 හි අතිරේක අංග ගණනාවක් ඇත:

• CSS ටෙම්ප්ලේටය මොඩියුලය සහ CSS3 ග්රිඩ් ස්ථානගත කිරීමේ මොඩියුලය : CSS සමඟ ජාලයන් නිර්මාණය කිරීම.
• CSS3 ටෙක්ස්ට් මොඩියුලය : රචනා පෙළ සහ CSS සමග drop-සෙවන සෑදිය හැක.
• CSS3 වර්ණ මොඩියුලය : දැන් විනිවිදභාවය සහිතව.
• කොටුව ආකෘතියට වෙනස් කිරීම : IE ටැග් වැනි ක්රියා කරන මූර්ති දේපල ඇතුළත් කිරීම.
• CSS3 පරිශීලක අතුරුමුහුණත් මොඩියුලය : ඔබට නව කර්සරයන් ලබා දීම, ක්රියාකාරකම් සඳහා ප්රතිචාර, අවශ්ය ක්ෂේත්ර සහ ඒවායේ ප්රමාණය වෙනස් කිරීම පවා සිදු කරයි .
• මාධ්ය විමසුම් : මුද්රණ ශිල්පීන් යොදාගන්නා ආකාරය ආකාරය නිර්ණය කිරීම සඳහා මාධ්ය විමසුම් මගින් ඔබට වඩාත් නම්යශීලී වේ. නිදසුනක් ලෙස, ඔබ විසින් 20em ට වඩා විශාල දර්ශන පරාසයක් සහිත අත්බෑරි උපකරණ සඳහා පමණක් වන ශෛලියක් නිර්ණය කළ හැකිය.
• CSS3 Ruby මොඩියුලය : ලියකියවිලි සටහන් කිරීම සඳහා පෙළ රවුසු භාවිතා කරන භාෂා සඳහා සහාය සපයයි.
• CSS3 Paged Media මොඩියුලය : පැසිෆික් මාධ්ය සඳහා වැඩි සහාය (කඩදාසි, විනිවිද පෙනෙන ආදිය) සඳහා.
• උත්පාදනය කරන ලද අන්තර්ගත : L paged headers සහ footers, footnotes, සහ paged media විශේෂයෙන් උත්පාදනය කරන ලද වෙනත් අන්තර්ගතයන්.
• CSS3 කථන මොඩියුලය : ශ්රව්ය CSS වෙනස් කිරීම.