އަޅުގަނޑު ސީއެސްއެސްގެ އީވޮލޫޝަންތައް ކެޓަގަރީތަކަށް ބަހާލައިފިނަމަ، އަޅުގަނޑުމެން މިވަނީ ކުރިއަށް އޮތްތަނުގައި އުޅެމުންދާ ކަމުގެ އިހުސާސް ކުރެވޭތޯ ހަމައެކަނި ބޯޑަރ-ރޭޑިއަސް އަށް އެދުނު ދުވަސްވަރަށްވުރެ މާ ދުރަށް ގޮސްފައެވެ. އަޅުގަނޑުމެން މިވަގުތު މި އުޅެނީ ހަމައެކަނި ވިޝުއަލް ލޭޔަރ ޓްވީކް ނުކޮށް، އަޅުގަނޑުމެން އިންޓަރފޭސްތައް އާކިޓެކްޓް ކުރާ ގޮތް އަސާސީ ގޮތުން އަލުން މާނަކުރާ ޓޫލްތަކެއް ޕްލެޓްފޯމުން އަޅުގަނޑުމެންނާ ހަވާލުކުރަމުންދާ ވަގުތެއްގައެވެ. އަހަރެން ހީކުރީ 2024 ވަނަ އަހަރު އިއުލާންކުރި ފީޗާތަކުގެ އަދަދު ޓޮޕް ނުކުރެވޭނެ ކަމަށެވެ. އަހަރެން ދުވަހަކުވެސް އެހާ އުފަލުން ގޯސްކޮށްފައެއް ނުވެއެވެ.
ކްރޯމް ޓީމުގެ “ސީއެސްއެސް ރެޕްޑް 2025” އަކީ ހަމައެކަނި ފީޗާތަކުގެ ލިސްޓެއް ނޫނެވެ؛ އެއީ ޑައިނަމިކް، ނެޓިވް ވެބެއްގެ މެނިފެސްޓޯއެކެވެ. މި އީވޮލޫޝަންތައް ޑޮކިއުމެންޓް ކުރުމަށް ދެތިން އަހަރު ހޭދަކުރި މީހެއްގެ ގޮތުގައި — “ސީއެސްއެސް5” ޒަމާންތައް ކަނޑައެޅުމުން ފެށިގެން ޒަމާނީ ލޭއައުޓް ޔުޓިލިޓީސްގެ އުނދަގޫތަކާ ހަމައަށް — އަހަރެން މިއަހަރުގެ ރެޕްއަޕް އަށް ބަލަނީ ވަރަށް ބޮޑު ފޯރިއަކާއެކުގައެވެ. އަޅުގަނޑުމެންނަށް ފެންނަނީ ކޯޑާ ހަނގުރާމަކުރުން ހުއްޓާލައި، އިންޓަފޭސްތައް ގުދުރަތީ ހާލަތުގައި ސްކަލްޕްޓް ކުރަން ފެށުމުގެ ފުރުސަތު ލިބޭ “އޮޕްޓިމައިޒްޑް އެރގޮނޮމިކްސް” އާއި “ނެކްސްޓް-ޖެން އިންޓަރެކްޝަންސް” އަށް ބަދަލުވުމެވެ.
މި ލިޔުމުގައި ކްރޯމްގެ ރިޕޯޓުން ސްޓޭންޑައުޓް ފީޗާސްތަކަށް ފުރިހަމަ ނަޒަރެއް ލިބިވަޑައިގަންނަވާނެ ކަމަށާއި، މިއީ އަޅުގަނޑު ފަހުގެ ތަޖުރިބާތަކާއި ޕްލެޓްފޯމްގެ މުސްތަގުބަލަށް ކުރާ އުންމީދުތަކުގެ ލެންސް އިން ބަލާފައެވެ.
ދަ ކޮމްޕޮނެންޓް ރިވޮލިއުޝަން: އެންމެ ފަހުން، އެ ނެޓިވް ކަސްޓަމައިޒޭބަލް ސެލެކްޓް
އަހަރުތަކެއް ވަންދެން އަޅުގަނޑުމެން ސްޓައިލް ޑްރޮޕްޑައުންސް އަށް ބަރޯސާވެފައިވަނީ ބޮޑެތި ޖާވާސްކްރިޕްޓް ލައިބްރަރީތަކަށް ކަމަށާއި، މިއީ އެންމެ ފަހުން މި ޕްލެޓްފޯމުން ހައްލުކޮށްފައިވާ “ދިހަވަރަކަށް އަހަރު ދުވަހުގެ މައްސަލައެއް” ކަމަށެވެ. ކަސްޓަމައިޒޭބަލް ސެލެކްޓް (އަދި ގުޅުންހުރި ލިޔުންތަކުގެ) ތާރީޚަށް އަޅުގަނޑުގެ ފުން ޑައިވްގައި ތަފްސީލުކޮށްފައިވާ ފަދައިން، މިއީ އޯޕަން ޔޫއައި،
ތަސްވީރު ނުވަތަ ދިދަ ފަދަ މުއްސަނދި ކޮންޓެންޓް އެތެރޭގެ އޮޕްޝަންތަކަށް ހުއްދަ ދިނުމަށް ފޭސްޓިކް އިތުރުވުމަކީ ވަރަށް މަޖާ ކަމެކެވެ. އަޅުގަނޑުމެންނަށް މިޒަމާނުގައި ހުރިހާ ވައްތަރެއްގެ ސެލެކްޓްތަކެއް އުފެއްދިދާނެ:
ޑެމޯ: އަހަރެން އުފެއްދީ އާ
ޕެން ބަލާ ކަސްޓަމައިޒް ކުރެވޭ ސެލެކްޓެއް އޮޕްޝަންތަކުގެ ތެރޭގައި ހުންނަ ތަސްވީރުތަކާއި ސެލެކްޓްޑްކޮންޓެންޓް [ފޯކްޑް] ޔުޓިލިޓީބެންޑް އިން.
ޑެމޯ: ހަމައެކަނި ސޫޑޯ އެލިމެންޓްތަކާއެކު ސެލެކްޓް ސްޓައިލް ކުރުމަށް ފުރިހަމަ ނަޒަރެކެވެ.
ޕެން ބައްލަވާ ޔުޓިލިޓީބެންޑް އިން ހަމައެކަނި ސޫޑޯ-އެލިމެންޓްސް [ފޯކްޑް] އާއި އެކު ކަސްޓަމައިޒް ކުރެވޭ ސެލެކްޓެކެވެ.
ޑެމޯ: ނުވަތަ އޮޕްޓްގްރޫޕްސް ބޭނުންކޮށްގެން މި މެނޫ ސެލެކްޝަން ޑެމޯ އިން އެއް ދަރަޖަ މައްޗަށް ކިކް ކުރެވިދާނެއެވެ.
ޕެން ބައްލަވާ ޔުޓިލިޓީބެންޑް އިން އޮޕްޓްގްރޫޕްސް [ފޯކްޑް] އާއި އެކު ޙަޤީޤީ ސެލެކްޓް މެނޫއެކެވެ. މި ފީޗާއަކީ އެކަނިވެސް އަޅުގަނޑުމެން ފޯމްތައް ބިނާކުރާނެ ގޮތާއި، ޑިޕެންޑެންސީތަކާއި ޓެކްނިކަލް ދަރަނި މަދުކުރާނެ ގޮތަށް ބޮޑު ބަދަލެއް އައުމުގެ އިޝާރާތެކެވެ. ސްކްރޯލް މާކެރސް އެންޑް ދަ ޑެތު އޮފް ދަ ޖާވާސްކްރިޕްޓް ކެރޮސެލް ކެރޮސެލް އުފެއްދުމަކީ ތާރީހީ ގޮތުން ޑިވެލޮޕަރުންނާއި ކްލައިންޓުންނާ ދެމެދު އުފެދޭ ފިރިކްޝަން ޕޮއިންޓެކެވެ. ކްލައިންޓުން އެމީހުންދެކެ ލޯބިވާއިރު، ޑިވެލޮޕަރުން ބިރުގަންނަނީ އެމީހުން އެކްސެސިބަލް އަދި ޕާފޯމަންސް ކޮށްދިނުމަށް ބޭނުންވާ ޖާވާސްކްރިޕްޓާ މެދުގައެވެ. ::scroll-marker އަދި ::scroll-button() ސޫޑޯ-އެލިމެންޓްތައް އައުމުން މި ޑައިނަމިކް މުޅިން ބަދަލުވެއެވެ. މި ފީޗާތަކުގެ ސަބަބުން ސްކްރޯލް ކޮންޓެއިނަރާއި ނެޓިވްކޮށް ލިންކްކޮށްފައިވާ ޚުދު ސީއެސްއެސް އިން ނެވިގޭޝަން ޑޮޓްތަކާއި ސްކްރޯލް ބަޓަންތައް އުފެއްދުމުގެ ފުރުސަތު ލިބެއެވެ. އަޅުގަނޑުގެ ބްލޮގުގައި ލިޔެފައިވާ ފަދައިން މިއީ ފުރަތަމަ ސްލައިޑްގައި ލޯބި ލިބުނެވެ. ޖާވާސްކްރިޕްޓްގެ އެންމެ ލައިނެއް ނެތި ފުރިހަމައަށް މަސައްކަތް ކުރެވޭ، އެކްސެސިބަލް ސްލައިޑަރެއް އުފެއްދުމުގެ ޤާބިލުކަމަކީ ހަމައެކަނި ފަސޭހަ ކަމެއް ނޫނެވެ؛ އެއީ ޕާފޯމަންސަށް ލިބުނު ކާމިޔާބީއެކެވެ. މި ފީޗާގެ ވަށައިގެން އެކްސެސިބިލިޓީގެ ބައެއް ކަންބޮޑުވުންތައް ހުރިއިރު، މިއީ ސައްހަ ކަންތައްތަކެއް ނަމަވެސް، އަޅުގަނޑުމެން ޑިވެލޮޕަރުންނަށް މިކަން ކުރެވޭނެ ގޮތެއް އޮވެދާނެ އެވެ. ރަނގަޅު ކަމަކީ، މި ހުރިހާ ޔޫއައި ބަދަލުތަކެއްގެ ސަބަބުން ކަސްޓަމް ޑީއޯއެމް މެނިޕިއުލޭޝަން އާއި އެރިއާ ޓެގްތައް ވަށައިގެން ދަމާލުމަށް ވުރެ މާ ފަސޭހަ ވެގެންދާ ނަމަވެސް އަހަރެން ޑިގްރެސް... މިހާރު އަޅުގަނޑުމެންނަށް ސްކްރޯލް-މާކެރ-ގްރޫޕް ބޭނުންކޮށްގެން އޮޓޮމެޓިކުން މާކެރ ގްރޫޕްކޮށް، އެންކަރ ޕޮޒިޝަނިންގ ބޭނުންކޮށްގެން ބަޓަންތައް ސްޓައިލްކޮށް، އަޅުގަނޑުމެން ބޭނުންވާ ތަނުގައި ބަހައްޓާލެވޭނެއެވެ.
.ކެރޮސެލް { . އޯވަރފްލޯ-އެކްސް: އޮޓޯ؛ ސްކްރޯލް-މާކެރ-ގްރޫޕް: ފަހުން؛ /* ޑޮޓްތަކަށް ކޮންޓެއިނަރ އުފައްދަނީ */
/* ބަޓަންތައް އުފެއްދުން */ &::ސްކްރޯލް-ބަޓަން(އިންލައިން-އެންޑް)،&::ސްކްރޯލް-ބަޓަން(އިންލައިން-ސްޓާޓް) { ކޮންޓެންޓް: " "; މަޤާމު: މުޅިން މުޅިން؛ /* އެމީހުން ސެންޓަރ ކުރުމަށް އެންކަރ ޕޮޒިޝަނިންގ ބޭނުންކުރުން */ ޕޮޒިޝަން-އެންކަރ: --ކެރޮސެލް؛ މަތީގައި: އެންކަރ(ސެންޓަރ)؛ }
/* ކުދިންގެ މައްޗަށް މާކެރެއް އުފެއްދުން */ div { &::ސްކްރޯލް-މާކެރ { ކޮންޓެންޓް: " "; ފުޅާމިން: 24px؛ ބޯޑަރ-ރޭޑިއަސް: 50%؛ ކަރސަރ: ޕޮއިންޓަރ؛ } /* އެކްޓިވް މާކެރ ހައިލައިޓް ކުރާށެވެ */ &::ސްކްރޯލް-މާކެރ:ޓާގެޓް-ކަރަންޓް { ފަހަތުގައި: ހުދު؛ } } }
ޑެމޯ: އަހަރެންގެ ތަޖުރިބާ ޚުދު އެޗްޓީއެމްއެލް އާއި ސީއެސްއެސް އިން ކެރޮސެލް އެއް އުފެއްދުމާއި، އެންކަރ ޕޮޒިޝަނިންގ ބޭނުންކޮށްގެން ބަޓަންތައް ބެހެއްޓުމެވެ.
ޕެން ކެރޮސެލް ޕިއުރ އެޗްޓީއެމްއެލް އަދި ސީއެސްއެސް [ފޯކްޑް] އިން ޔުޓިލިޓީބެންޑް ބައްލަވާށެވެ.
ޑެމޯ: ބެކްގްރައުންޑް އިމޭޖްތައް ޑައިނަމިކް ގޮތެއްގައި މާކެރުގެ ތެރެއަށް ދަމައިގަތުމަށް attr() ބޭނުންކޮށްގެން ވެބްޝޮޕް ސްލިކް ސްލައިޑަރ ރީމޭކެއް.
ޔުޓިލިޓީބެންޑް އިން ސީއެސްއެސް [ފޯކްޑް] ގައި ޕެން ވެބްޝޮޕް ސްލިކް ސްލައިޑަރ ރީމޭކް ބައްލަވާށެވެ. ދައުލަތުގެ ސުވާލުތައް: ސްޓިކީ ތިންގް ސްޓަކް؟ ސްނެޕީ ތިންގް ސްނެޕްޑް؟ ގިނަ ދުވަސްތަކެއް ވަންދެން އިންޓަސެކްޝަންއޮބްޒަރވަރ ހެކްސް އަށް ބަރޯސާ ނުވެ “ސްޓިކީ އެއްޗެއް ތާށިވެފައިވޭތޯ” ނުވަތަ “ސްނެޕީ އައިޓަމެއް ސްނެޕް ވެއްޖެތޯ” އެނގުމުގެ ގާބިލްކަން އަޅުގަނޑުމެންނަށް ނެތެވެ. ކްރޯމް 133 އިން ސްކްރޯލް-ސްޓޭޓް ކިއުއަރީސް ތައާރަފް ކުރިއިރު، މި ސްޓޭޓްތައް ޑިކްލެރެޓިވްކޮށް ކިއުއަރީ ކުރެވޭނެ އެވެ. ކޮންޓެއިނަރ-ޓައިޕް: ސްކްރޯލް-ސްޓޭޓް ސެޓްކޮށްގެން، މިހާރު އަޅުގަނޑުމެންނަށް ކުދިން ސްޓައިލް ކުރެވޭނީ އެ ކުދިން ތާށިވެފައި ހުރިތޯ، ސްނެޕް ވެފައި ހުރިތޯ ނުވަތަ އޯވަރފްލޯ ވެފައި ހުރިތޯ ބަލައިގެންނެވެ. މިއީ ސީއެސްއެސް ޑޭ 2023 އިން ފެށިގެން އަޅުގަނޑު ކެތްތެރިކަމާއެކު އިންތިޒާރު ކުރަމުން އައި ބޮޑު “ކޮލިޓީ އޮފް ލައިފް” އިމްޕްރޫވްމަންޓެއް. ސާދާ މިސާލަކަށް: އެންމެ ފަހުން ހެޑަރަކަށް ހިޔަނި އެޕްލައި ކުރެވޭނީ އެއީ ހަގީގަތުގައި ވިއުޕޯޓްގެ މަތީގައި ތާށިވެފައި ހުންނަ ވަގުތުތަކުގައެވެ: .ހެޑަރ-ކޮންޓެއިނަރ { . ކޮންޓެއިނަރ-ޓައިޕް: ސްކްރޯލް-ސްޓޭޓް؛ މަގާމު: ތަތްވެފައި ހުންނަ؛ މަތީގައި: 0؛
ހެޑަރ { ޓްރާންސިޝަން: ބޮކްސް-ޝެޑޯ 0.5s އީޒް-އައުޓް؛ /* ކިއުއަރީ އިން ކޮންޓެއިނަރުގެ ހާލަތު ޗެކްކުރެއެވެ */ @ކޮންޓެއިނަރ ސްކްރޯލް-ސްޓޭޓް(ސްޓަކް: މަތީގައި) { ބޮކްސް-ޝެޑޯ: rgba(0، 0، 0، 0.6) 0px 12px 28px 0px؛ } } }
ޑެމޯ: ހަގީގަތުގައި ހިޔަނި ޖަހާފައި ހުންނައިރު އެކަނި ހިޔަނި ޖަހާ ސްޓިކީ ހެޑަރެކެވެ.
ސްކްރޯލް-ސްޓޭޓް ކިއުއަރީ އާއި އެކު ޕެން ސްޓިކީ ހެޑަރސް ބައްލަވާ، ސްޓިކީ އެލިމެންޓް ޔުޓިލިޓީބެންޑް އިން ސްޓަކް [ފޯކް] ކޮށްފައިވޭތޯ ބަލާށެވެ.
ޑެމޯ: މިހާރު ސްނެޕް ކުރެވިފައިވާ ކެރެކްޓަރުގެ މައްޗަށް ފްރޭމެއް ގެންދިއުމަށްޓަކައި އެންކަރ ޕޮޒިޝަނިންގ އާއި ގުޅިގެން ސްކްރޯލް-ސްޓޭޓް ކިއުއަރީތައް ބޭނުންކުރާ ޕޮކެމޯން ތީމް ލިސްޓެކެވެ.
ސީއެސްއެސް، ޕޮކެމޯން ވަރޝަން [ފޯކްޑް] އިން ޔުޓިލިޓީބެންޑް އިން ސްނެޕް ކުރެވެނީ ކޮން އެއްޗެއްތޯ ބެލުމަށް ޕެން ސްކްރޯލް-ސްޓޭޓް ކިއުއަރީ ބައްލަވާށެވެ. އޮޕްޓިމައިޒްޑް އެރގޮނޮމިކްސް: ލޮޖިކް އިން ސީއެސްއެސް ސީއެސްއެސް ރެޕްޑްގެ “އޮޕްޓިމައިޒްޑް އެރގޮނޮމިކްސް” ބައިގައި އަޅުގަނޑުމެންގެ ވޯކްފްލޯތައް އިތުރަށް ފަސޭހަކޮށްދޭ ފީޗާސްތައް ފާހަގަކޮށްފައިވެއެވެ. އަޅުގަނޑުމެން ލޮޖިކް ލިޔާ ގޮތަށް ޓްރާންސްފޯމަޓިވްގެ ގޮތުގައި ތިން ސިފައެއް ފާހަގަކޮށްލެވެއެވެ:
if() Statementsއަޅުގަނޑުމެންނަށް އެންމެ ފަހުން ސީއެސްއެސްގައި ކޮންޑިޝަނަލްސް ލިބެމުން އެބަދެއެވެ. if() ފަންކްޝަން ސްޓައިލްޝީޓްތަކަށް ޓާނަރީ އޮޕަރޭޓަރެއް ފަދައިން ހަރަކާތްތެރިވެ، މީޑިއާ، ސަޕޯޓް ނުވަތަ ސްޓައިލް ކިއުއަރީތަކަށް އިންލައިންގައި ވެލިއުތައް އެޕްލައި ކުރުމުގެ ފުރުސަތު ލިބިގެންދެއެވެ. މިއީ އެއް ޕްރޮޕަޓީއަށް ބަދަލު ގެނައުމަށް ވާރބޯސް @media ބްލޮކް ބޭނުންވުން ކުޑަކޮށްދޭ ކަމެކެވެ. @function functionsއަހަރެމެންނަށް އެންމެ ފަހުން ބައެއް ލޮޖިކް ތަފާތު ތަނަކަށް ބަދަލުކުރެވިދާނެ، އޭގެ ނަތީޖާއެއްގެ ގޮތުން ބައެއް ސާފު ފައިލްތައް، ހަގީގީ ކޮލިޓީ އޮފް ލައިފް ފީޗާއެއް ލިބިގެންދެއެވެ. sibling-index() އަދި sibling-count()މި ގަސް ގުނާ ފަންކްޝަންތަކުން ލިސްޓް ސައިޒަށް ބަލައިގެން އެނިމޭޝަންތައް ސްޓޭގަރިންގ ނުވަތަ ތަކެތި ސްޓައިލް ކުރުމުގެ މައްސަލަ ހައްލުކުރެއެވެ. އަޅުގަނޑު ސީއެސްއެސް އާއި އެކު އެއްބަނޑު އެއްބަފާ ކުދިން ސްޓައިލް ކުރުމަކީ ދުވަހަކުވެސް ފަސޭހަ ކަމެއް ނޫން، މިއީ އަޅުގަނޑުމެންގެ އެޗްޓީއެމްއެލްގައި ކަސްޓަމް ޕްރޮޕަޓީސް ( --index: 1 ފަދަ) ހާޑް-ކޯޑް ކުރުމުގެ ބޭނުން ނައްތާލާ ކަމެކެވެ.
މިސާލު: ލޭއައުޓްތައް ހިސާބުކުރުން އަޅުގަނޑުމެންނަށް މިހާރު ޚުލާޞާ ހިސާބުގެ ފޯމިއުލާތައް ލިޔެވިދާނެއެވެ. މިސާލަކަށް ސްކްރީނަށް ވަންނަ ކާޑުތަކަށް އެނިމޭޝަނެއް ސްޓޭގަރ ކުރުމަކީ ކުޑަ ކަމެއް ކަމުގައި ވެގެންދެއެވެ: .ކާޑް-ކޮންޓެއިނަރ > * { އެނިމޭޝަން: 0.6s ގެ އީޒް-އައުޓް ފޯވާޑްސް ހާމަކުރުން؛ /* އިތުރަށް މެނުއަލް --އިންޑެކްސް ވެރިއޭބަލްސް ނެތް! */ އެނިމޭޝަން-ޑިލޭ: calc(އެއްބަނޑު އެއްބަފާ-އިންޑެކްސް () * 0.1s); }
އެއްވެސް ޖާވާސްކްރިޕްޓެއް ނެތި ފުރިހަމަ ވަށައިގަނޑެއްގައި ތަކެތި ބެހެއްޓުމަށް ޓްރިގޮނޮމެޓްރީ އާއި އެކު މި ފަންކްޝަންތައް ބޭނުން ކުރުމުގެ ތަޖުރިބާ ވެސް ކުރިން.
ޑެމޯ: ޑައިނަމިކް ގޮތެއްގައި ކާޑު އެނިމޭޝަންތައް ސްޓޭގަރިންގ.
ޔުޓިލިޓީބެންޑް އިން ސިބްލިންގ-އިންޑެކްސް() [ފޯރކްޑް] ބޭނުންކޮށްގެން ޕެން ސްޓޭގަރ ކާޑުތައް ބައްލަވާށެވެ.
ޑެމޯ: ސިބްލިންގ-އިންޑެކްސް، ސިބްލިންގ-ކައުންޓް، އަދި އާ ސީއެސްއެސް @function ފީޗާ ބޭނުންކޮށްގެން ފުރިހަމަ ވަށައިގަނޑެއްގައި ތަކެތި ބެހެއްޓުން.
ގަލަން ބަލާ އެއްބަނޑު އެއްބަފާ-އިންޑެކްސް، އެއްބަނޑު އެއްބަފާ-ކައުންޓް އަދި ޔުޓިލިޓީބެންޑް އިން [ފޯކްޑް] ފަންކްޝަންތައް ބޭނުންކޮށްގެން ކުރާ ވަށައިގަނޑެވެ. އަހަރެންގެ ސީއެސްއެސް ޓޫ-ޑޫ ލިސްޓް: ފީޗާސް އައި ކެން’ޓް ވެއިޓް ޓު ޓްރައި އަހަރެން ސެލެކްޓްސް އާއި ޓްރާންސިޝަންސް ސްކަލްޕްޓް ކުރުމުގައި އަވަދިނެތި އުޅުނުއިރު، “ސީއެސްއެސް ރެޕްޑް 2025” ރިޕޯޓް ފުރިފައިވަނީ ކޯޑްޕެންގައި އަދި ފަޔަރ އަޕް ކުރުމުގެ ފުރުސަތު ނުލިބޭ އެހެން ގުޑީސްތަކުންނެވެ. މިއީ އަޅުގަނޑުގެ ދެން ކުރާ ތަޖުރިބާތަކަށް އަޅުގަނޑުގެ ލިސްޓުގައި މަތީގައިވާ ކަންކަމެވެ: އެންކަރޑް ކޮންޓެއިނަރ ކިއުއަރީސް އަހަރެންގެ ކެރޮސެލް ޑެމޯގައި ހުރި ބަޓަންތަކަށް ސީއެސްއެސް އެންކަރ ޕޮޒިޝަނިންގ ބޭނުންކުރި ނަމަވެސް “ސީއެސްއެސް ރެޕްޑް” އިން އަން...މިކަމުގެ އީވޮލޫޝަން: އެންކަރޑް ކޮންޓެއިނަރ ކިއުއަރީސް. މިއީ އަޅުގަނޑުމެން އެންމެންނަށް ޓޫލްޓިޕްސް އާއި ގުޅޭގޮތުން ދިމާވެފައިވާ މައްސަލައެއް ހައްލުކޮށްދޭ ކަމެކެވެ: ޖާގަ މަދުވުމުގެ ސަބަބުން ބްރައުޒާއިން ޓޫލްޓިޕް މަތިން ތިރިއަށް އުފުލާލައިފިނަމަ، “ތިރި” ގިނަ ފަހަރަށް ހުންނަނީ ގޯސް މަގަށް އިޝާރާތްކޮށްގެންނެވެ. އެންކަރޑް ކޮންޓެއިނަރ ކިއުއަރީސް (@container anchored(fallback: flip-block)) އާއެކު، އަޅުގަނޑުމެންނަށް އެލިމެންޓް ސްޓައިލް ކުރެވޭނީ ބްރައުޒާއިން ހަގީގަތުގައި ހޮވި ފޯލްބެކް ޕޮޒިޝަނަށް ބަލައިގެންނެވެ. ނެސްޓްޑް ވިއު ޓްރާންސިޝަން ގްރޫޕްސް ވިއު ޓްރާންސިޝަންސް އަކީ އިންގިލާބެއް ނަމަވެސް އެއީ ވަކި ޓްރޭޑް އޮފްއަކާ އެކު އައީ: އެއީ އެލިމެންޓް ޓްރީ ފްލެޓްކޮށް، ގިނަ ފަހަރަށް 3ޑީ ޓްރާންސްފޯމްސް ނުވަތަ އޯވަރފްލޯ: ކްލިޕް ފަޅާލާ އެއްޗެކެވެ. އަހަރެންނަށް އަބަދުވެސް ހީވަނީ އެއީ ކޮންމެވެސް އެއްޗެއް ގެއްލިފައިވާ ކަމެއް ކަމާއި، މިއީ ހަމައެކަނި ޖަވާބަކަށް ވެދާނެ ކަމަށެވެ. ވިއު-ޓްރާންސިޝަން-ގްރޫޕް: އެންމެ ކައިރީގައި ބޭނުންކޮށްގެން، އެންމެ ފަހުން އަޅުގަނޑުމެންނަށް ޓްރާންސިޝަން ގްރޫޕްތައް އެކަކު އަނެކެއްގެ ތެރޭގައި ނެސްޓް ކުރެވޭނެއެވެ. މިއީ ޓްރާންސިޝަނެއްގެ ތެރޭގައި ކްލިޕިންގ އިފެކްޓްސް ނުވަތަ 3ޑީ ރޮޓޭޝަންސް ބެލެހެއްޓޭނެ ގޮތެކެވެ — މިއީ ކުރިން ނުކުރެވޭނެ ކަމެއް ކަމުގައި ވާނީ އެ އުފެއްދުންތައް މަތީ ފެންވަރަށް އުފުލާފައި ހުރުމުންނެވެ. .ކާޑް img { . ވިއު-ޓްރާންސިޝަން-ނަން: ފޮޓޯ؛ view-transition-group: އެންމެ ކައިރީގައި ހުންނަ؛ /* ވަޅުލާފައި ބެހެއްޓުން! */ }
ޓައިޕޮގްރަފީ އާއި ބައްޓަންތައް އެންމެ ފަހުން އަހަރެންގެ ތެރޭގައިވާ އެރގޮނޮމިސްޓް ޓެކްސްޓް ބޮކްސް ޓްރިމް ޓްރައި ކުރަން ހީވާގިވަމުންދާއިރު، އެންމެ ފަހުން ފުރިހަމަ ވަރުގަދަ އެލައިންމަންޓެއް ހޯދުމަށްޓަކައި ޓެކްސްޓް ކޮންޓެންޓްގެ މަތީގައި އަދި ތިރީގައި އެ އުނދަގޫ އިތުރު ވައިޓްސްޕޭސް (ލީޑިންގ) ނައްތާލާނެ ކަމަށް ވައުދުވެއެވެ. އަދި ކްރިއޭޓިވް ސައިޑަށް ބަލާއިރު، ކޯނަރ-ޝޭޕް އަދި ޝޭޕް() ފަންކްޝަން އިން ނޮން ރެކްޓަންގްލަރ ލޭއައުޓްތައް ހުޅުވިގެންދާއިރު، ސީއެސްއެސް ވެރިއޭބަލްތަކަށް ޖަވާބުދާރީވާ “ސްކުއަރިކަލްސް” އާއި ކޮމްޕްލެކްސް މަގުތައް ލިބިގެންދެއެވެ. އެހެން ބުނާއިރު، އަހަރެންނަށް ކެތެއް ނުކުރެވޭ ސްކިރކަލްސް އިން ފުރިފައިވާ ޑިޒައިންއެއް ލިބޭނެ ކަމަކަށް! އުއްމީދީ މުސްތަގުބަލެކެވެ އަޅުގަނޑުމެންނަށް މި ފެންނަނީ ކުރިން ޖާވާސްކްރިޕްޓަށް ނިސްބަތްވާ ލޮޖިކް، ސްޓޭޓް، އަދި ކޮމްޕްލެކްސް އިންޓަރެކްޝަންތައް ހެންޑްލް ކުރުމުގެ ގާބިލްކަން ސީއެސްއެސް އަށް ވެގެންދާ ދުނިޔެއެކެވެ. moveBefoor (iframes/videos އަށް DOM ސްޓޭޓް ރައްކާތެރިކުރުން) އަދި attr() (ކުލަތަކާއި ގްރިޑްތަކަށް ސްޓްރިންގްސް އިން ބޭރުގެ ވައްތަރުތައް ބޭނުންކުރުން) ފަދަ ފީޗާސްތަކުން މި ހަގީގަތް އިތުރަށް ސިމެންތިކޮށްދެއެވެ. މި ފީޗާތަކުގެ ތެރެއިން ބައެއް ފީޗާސްތަކަކީ މިވަގުތު އެކްސްޕެރިމެންޓަލް ނުވަތަ ކްރޯމްއަށް ހާއްސަ ފީޗާސްތަކެއް ނަމަވެސް، މި މޮމެންޓަމް އިންކާރު ނުކުރެވޭނެ އެވެ. މި ޤާބިލުކަންތައްތައް ބޭސްލައިން އަކަށް ހެދުމަށްޓަކައި އިންޓަރޮޕް ފަދަ އިސްނެގުމެއް މެދުވެރިކޮށް ހުރިހާ ބްރައުޒާތަކެއްގައި ވެސް ކުރިއަށް އޮތް ސަޕޯޓް ލިބޭނެ ކަމަށް އަޅުގަނޑުމެން އުންމީދު ކުރަން ޖެހެއެވެ. އެހެން ބުނާއިރު، ބްރައުޒާ އިންޖީނުތައް ހުރުމަކީ “ކްރޯމް ފަސްޓް” ގައި މި ހުރިހާ މޮޅު ފީޗާސްތަކެއް ހުރުމާ އެއްވަރަށް މުހިންމު ކަމެކެވެ. މި އާ ފީޗާސްތަކާ ބެހޭ ގޮތުން ދުވަހަކުވެސް ބްރައުޒާތަކަށް ލޭންޑް ކުރުމުގެ ކުރިން މަޝްވަރާކޮށް، ޓިންކަރކޮށް، ޓެސްޓް ކުރަން ޖެހެ އެވެ. އެއީ ސީއެސްއެސް އަށް ވަނުމަށް ލިބޭ ފެންޓަސްޓިކް މޮމެންޓެކެވެ. އަޅުގަނޑުމެން މިހާރު މިތިބީ ހަމައެކަނި ސްޓައިލިންގ ޑޮކިއުމަންޓްތަކެއް ނޫން؛ އަޅުގަނޑުމެން މި ކްރާފްޓް ކުރަމުން މިދަނީ ކުރިއަށްވުރެ ވަރުގަދަ ނެޓިވް ޓޫލްކިޓަކާއެކު ޑައިނަމިކް، އެރގޮނޮމިކް، އަދި ރޮބަސްޓް އެޕްލިކޭޝަންތަކެވެ. މި އާ ޒަމާނާ އެކު ކުރިއަށް ގޮސް ވާހަކަ ފަތުރަމާ ހިނގާށެވެ. މިއީ ސީއެސްއެސް ރެޕްޑް!
