CSS ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್ ಲೆವೆಲ್ 2 ನೊಂದಿಗೆ ವೆಬ್ ಲೇಔಟ್‌ನ ಭವಿಷ್ಯವನ್ನು ಅನ್ವೇಷಿಸಿ. ಈ ಮಾರ್ಗದರ್ಶಿ ಹೊಸ ಪ್ರಾಪರ್ಟೀಸ್, ಉದಾಹರಣೆಗಳು, ಮತ್ತು ನಿಜವಾದ ಜಾಗತಿಕ, ರೈಟಿಂಗ್-ಮೋಡ್-ಅವೇರ್ ವೆಬ್‌ಸೈಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವ ಬಗ್ಗೆ ತಿಳಿಸುತ್ತದೆ.
CSS ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್ ಲೆವೆಲ್ 2: ವರ್ಧಿತ ರೈಟಿಂಗ್ ಮೋಡ್ ಬೆಂಬಲದೊಂದಿಗೆ ನಿಜವಾದ ಜಾಗತಿಕ ವೆಬ್ ನಿರ್ಮಾಣ
ದಶಕಗಳಿಂದ, ವೆಬ್ ಡೆವಲಪರ್‌ಗಳು ಭೌತಿಕ ಜಗತ್ತಿನಲ್ಲಿ ಬೇರೂರಿರುವ ಶಬ್ದಕೋಶವನ್ನು ಬಳಸಿಕೊಂಡು ಲೇಔಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಿದ್ದಾರೆ: ಟಾಪ್, ಬಾಟಮ್, ಲೆಫ್ಟ್, ಮತ್ತು ರೈಟ್. ನಾವು margin-left, padding-top, ಮತ್ತು border-right ಅನ್ನು ಸೆಟ್ ಮಾಡಿದ್ದೇವೆ. ಈ ಮಾನಸಿಕ ಮಾದರಿಯು ವೆಬ್ ಪ್ರಧಾನವಾಗಿ ಎಡದಿಂದ-ಬಲಕ್ಕೆ, ಮೇಲಿನಿಂದ-ಕೆಳಕ್ಕೆ ಮಾಧ್ಯಮವಾಗಿದ್ದಾಗ ನಮಗೆ ಚೆನ್ನಾಗಿ ಸೇವೆ ಸಲ್ಲಿಸಿತು. ಆದಾಗ್ಯೂ, ವೆಬ್ ಜಾಗತಿಕವಾಗಿದೆ. ಇದು ಎಲ್ಲಾ ಭಾಷೆಗಳು ಮತ್ತು ಸಂಸ್ಕೃತಿಗಳಿಗೆ ಒಂದು ವೇದಿಕೆಯಾಗಿದೆ, ಅವುಗಳಲ್ಲಿ ಹಲವು ಈ ಸರಳ ದಿಕ್ಕಿನ ಹರಿವನ್ನು ಅನುಸರಿಸುವುದಿಲ್ಲ.
ಅರೇಬಿಕ್ ಮತ್ತು ಹೀಬ್ರೂ ನಂತಹ ಭಾಷೆಗಳನ್ನು ಬಲದಿಂದ-ಎಡಕ್ಕೆ ಬರೆಯಲಾಗುತ್ತದೆ. ಸಾಂಪ್ರದಾಯಿಕ ಜಪಾನೀಸ್ ಮತ್ತು ಚೈನೀಸ್ ಅನ್ನು ಲಂಬವಾಗಿ, ಮೇಲಿನಿಂದ-ಕೆಳಕ್ಕೆ ಮತ್ತು ಬಲದಿಂದ-ಎಡಕ್ಕೆ ಬರೆಯಬಹುದು. ಈ ಬರವಣಿಗೆಯ ವ್ಯವಸ್ಥೆಗಳ ಮೇಲೆ ಭೌತಿಕ, ಎಡದಿಂದ-ಬಲಕ್ಕೆ CSS ಮಾದರಿಯನ್ನು ಹೇರುವುದು ಮುರಿದ ಲೇಔಟ್‌ಗಳು, ನಿರಾಶಾದಾಯಕ ಬಳಕೆದಾರ ಅನುಭವ ಮತ್ತು ಕೋಡ್ ಓವರ್‌ರೈಡ್‌ಗಳ ಪರ್ವತಕ್ಕೆ ಕಾರಣವಾಗುತ್ತದೆ. ಇಲ್ಲಿಯೇ CSS ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್ ಮತ್ತು ವ್ಯಾಲ್ಯೂಸ್ ಬರುತ್ತವೆ, ಇದು ಭೌತಿಕ ದಿಕ್ಕುಗಳಿಂದ ಫ್ಲೋ-ರಿಲೇಟಿವ್, ಲಾಜಿಕಲ್ ದಿಕ್ಕುಗಳಿಗೆ ಒಂದು ಮೂಲಭೂತ ಮಾದರಿ ಬದಲಾವಣೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ. ಲೆವೆಲ್ 1 ಅಡಿಪಾಯ ಹಾಕಿದರೆ, CSS ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್ ಲೆವೆಲ್ 2 ಚಿತ್ರವನ್ನು ಪೂರ್ಣಗೊಳಿಸುತ್ತದೆ, ನಿಜವಾದ ಸಾರ್ವತ್ರಿಕ, ರೈಟಿಂಗ್-ಮೋಡ್-ಅವೇರ್ ಯೂಸರ್ ಇಂಟರ್ಫೇಸ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ನಮಗೆ ಬೇಕಾದ ಪರಿಕರಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.
ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯು ಲೆವೆಲ್ 2 ರಿಂದ ತರಲಾದ ವರ್ಧನೆಗಳ ಬಗ್ಗೆ ಆಳವಾದ ನೋಟವನ್ನು ನೀಡುತ್ತದೆ. ನಾವು ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳ ಪುನರಾವಲೋಕನದೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸುತ್ತೇವೆ, ನಂತರ ಅಂತರವನ್ನು ತುಂಬುವ ಹೊಸ ಪ್ರಾಪರ್ಟೀಸ್ ಮತ್ತು ವ್ಯಾಲ್ಯೂಸ್‌ಗಳನ್ನು ಅನ್ವೇಷಿಸುತ್ತೇವೆ, ಮತ್ತು ಅಂತಿಮವಾಗಿ, ಯಾವುದೇ ರೈಟಿಂಗ್ ಮೋಡ್‌ಗೆ ಮನಬಂದಂತೆ ಹೊಂದಿಕೊಳ್ಳುವ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ನಿರ್ಮಿಸುವ ಮೂಲಕ ಎಲ್ಲವನ್ನೂ ಆಚರಣೆಗೆ ತರುತ್ತೇವೆ. CSS ಲೇಔಟ್ ಬಗ್ಗೆ ನೀವು ಯೋಚಿಸುವ ವಿಧಾನವನ್ನು ಶಾಶ್ವತವಾಗಿ ಬದಲಾಯಿಸಲು ಸಿದ್ಧರಾಗಿ.
ತ್ವರಿತ ಪುನರಾವಲೋಕನ: ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ನ ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳು (ಲೆವೆಲ್ 1)
ಲೆವೆಲ್ 2 ರಲ್ಲಿನ ಸೇರ್ಪಡೆಗಳನ್ನು ನಾವು ಶ್ಲಾಘಿಸುವ ಮೊದಲು, ಲೆವೆಲ್ 1 ರಿಂದ ಹಾಕಲಾದ ಅಡಿಪಾಯದ ಬಗ್ಗೆ ನಮಗೆ ದೃಢವಾದ ತಿಳುವಳಿಕೆ ಇರಬೇಕು. ಸಂಪೂರ್ಣ ವ್ಯವಸ್ಥೆಯು ಎರಡು ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳ ಮೇಲೆ ನಿರ್ಮಿಸಲ್ಪಟ್ಟಿದೆ: ರೈಟಿಂಗ್ ಮೋಡ್ (writing mode) ಮತ್ತು ಅದರ ಪರಿಣಾಮವಾಗಿ ಬರುವ ಬ್ಲಾಕ್ ಮತ್ತು ಇನ್‌ಲೈನ್ ಆಕ್ಸಿಸ್‌ಗಳು (block and inline axes).
ನಾಲ್ಕು ರೈಟಿಂಗ್ ಮೋಡ್‌ಗಳು
writing-mode CSS ಪ್ರಾಪರ್ಟಿಯು ಪಠ್ಯವನ್ನು ಯಾವ ದಿಕ್ಕಿನಲ್ಲಿ ಜೋಡಿಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ನಾವು ಡೀಫಾಲ್ಟ್ ಅನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಪರಿಗಣಿಸಿದರೂ, ಪುಟದಲ್ಲಿ ಕಂಟೆಂಟ್ ಹೇಗೆ ಹರಿಯುತ್ತದೆ ಎಂಬುದನ್ನು ಮೂಲಭೂತವಾಗಿ ಬದಲಾಯಿಸುವ ಹಲವಾರು ಮೌಲ್ಯಗಳಿವೆ:
- horizontal-tb: ಇದು ಹೆಚ್ಚಿನ ಪಾಶ್ಚಿಮಾತ್ಯ ಭಾಷೆಗಳಿಗೆ ಡೀಫಾಲ್ಟ್ ಆಗಿದೆ. ಪಠ್ಯವು ಎಡದಿಂದ-ಬಲಕ್ಕೆ (ಅಥವಾ ದಿಕ್ಕನ್ನು ಆಧರಿಸಿ ಬಲದಿಂದ-ಎಡಕ್ಕೆ) ಅಡ್ಡಲಾಗಿ (ಇನ್‌ಲೈನ್ ಆಕ್ಸಿಸ್) ಹರಿಯುತ್ತದೆ, ಮತ್ತು ಸಾಲುಗಳು ಮೇಲಿನಿಂದ-ಕೆಳಕ್ಕೆ (ಬ್ಲಾಕ್ ಆಕ್ಸಿಸ್) ಜೋಡಿಸಲ್ಪಡುತ್ತವೆ.
- vertical-rl: ಸಾಂಪ್ರದಾಯಿಕ ಪೂರ್ವ ಏಷ್ಯಾದ ಮುದ್ರಣಕಲೆಗೆ (ಉದಾ., ಜಪಾನೀಸ್, ಚೈನೀಸ್) ಬಳಸಲಾಗುತ್ತದೆ. ಪಠ್ಯವು ಮೇಲಿನಿಂದ-ಕೆಳಕ್ಕೆ ಲಂಬವಾಗಿ (ಇನ್‌ಲೈನ್ ಆಕ್ಸಿಸ್) ಹರಿಯುತ್ತದೆ, ಮತ್ತು ಸಾಲುಗಳು ಬಲದಿಂದ-ಎಡಕ್ಕೆ (ಬ್ಲಾಕ್ ಆಕ್ಸಿಸ್) ಜೋಡಿಸಲ್ಪಡುತ್ತವೆ.
- vertical-lr: ಮೇಲಿನದಕ್ಕೆ ಹೋಲುತ್ತದೆ, ಆದರೆ ಸಾಲುಗಳು ಎಡದಿಂದ-ಬಲಕ್ಕೆ (ಬ್ಲಾಕ್ ಆಕ್ಸಿಸ್) ಜೋಡಿಸಲ್ಪಡುತ್ತವೆ. ಕಡಿಮೆ ಸಾಮಾನ್ಯವಾಗಿದೆ, ಆದರೆ ಮಂಗೋಲಿಯನ್ ಲಿಪಿಯಂತಹ ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ ಬಳಸಲಾಗುತ್ತದೆ.
- sidelong-rl / sidelong-lr: ಇವುಗಳು ನೀವು ಗ್ಲಿಫ್‌ಗಳನ್ನು ಅವುಗಳ ಬದಿಯಲ್ಲಿ ಇರಿಸಲು ಬಯಸುವ ನಿರ್ದಿಷ್ಟ ಬಳಕೆಯ ಸಂದರ್ಭಗಳಿಗಾಗಿವೆ. ಸಾಮಾನ್ಯ ವೆಬ್ ಕಂಟೆಂಟ್‌ನಲ್ಲಿ ಇವು ಕಡಿಮೆ ಸಾಮಾನ್ಯವಾಗಿದೆ.
ನಿರ್ಣಾಯಕ ಪರಿಕಲ್ಪನೆ: ಬ್ಲಾಕ್ vs. ಇನ್‌ಲೈನ್ ಆಕ್ಸಿಸ್
ಇದು ಗ್ರಹಿಸಲು ಅತ್ಯಂತ ಪ್ರಮುಖವಾದ ಪರಿಕಲ್ಪನೆಯಾಗಿದೆ. ಒಂದು ಲಾಜಿಕಲ್ ಜಗತ್ತಿನಲ್ಲಿ, ನಾವು "ಲಂಬ" ಮತ್ತು "ಅಡ್ಡ" ಎಂದು ಯೋಚಿಸುವುದನ್ನು ನಿಲ್ಲಿಸಿ ಬ್ಲಾಕ್ ಮತ್ತು ಇನ್‌ಲೈನ್ ಆಕ್ಸಿಸ್‌ಗಳ ಪರಿಭಾಷೆಯಲ್ಲಿ ಯೋಚಿಸಲು ಪ್ರಾರಂಭಿಸುತ್ತೇವೆ. ಅವುಗಳ ದೃಷ್ಟಿಕೋನವು ಸಂಪೂರ್ಣವಾಗಿ writing-mode ಅನ್ನು ಅವಲಂಬಿಸಿರುತ್ತದೆ.
- ಇನ್‌ಲೈನ್ ಆಕ್ಸಿಸ್ (Inline Axis) ಎಂದರೆ ಒಂದೇ ಸಾಲಿನಲ್ಲಿ ಪಠ್ಯ ಹರಿಯುವ ದಿಕ್ಕು.
- ಬ್ಲಾಕ್ ಆಕ್ಸಿಸ್ (Block Axis) ಎಂದರೆ ಹೊಸ ಸಾಲುಗಳು ಜೋಡಿಸಲ್ಪಡುವ ದಿಕ್ಕು.
ಇದು ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ನೋಡೋಣ:
- ಪ್ರಮಾಣಿತ ಇಂಗ್ಲಿಷ್‌ನಲ್ಲಿ (writing-mode: horizontal-tb): ಇನ್‌ಲೈನ್ ಆಕ್ಸಿಸ್ ಅಡ್ಡಲಾಗಿ ಚಲಿಸುತ್ತದೆ, ಮತ್ತು ಬ್ಲಾಕ್ ಆಕ್ಸಿಸ್ ಲಂಬವಾಗಿ ಚಲಿಸುತ್ತದೆ.
- ಸಾಂಪ್ರದಾಯಿಕ ಜಪಾನೀಸ್‌ನಲ್ಲಿ (writing-mode: vertical-rl): ಇನ್‌ಲೈನ್ ಆಕ್ಸಿಸ್ ಲಂಬವಾಗಿ ಚಲಿಸುತ್ತದೆ, ಮತ್ತು ಬ್ಲಾಕ್ ಆಕ್ಸಿಸ್ ಅಡ್ಡಲಾಗಿ ಚಲಿಸುತ್ತದೆ.
ಈ ಆಕ್ಸಿಸ್‌ಗಳು ಬದಲಾಗುವುದರಿಂದ, width ಮತ್ತು height ನಂತಹ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು ಅಸ್ಪಷ್ಟವಾಗುತ್ತವೆ. width ಎಂದರೆ ಅಡ್ಡ ಆಕ್ಸಿಸ್‌ನ ಉದ್ದಕ್ಕೂ ಇರುವ ಗಾತ್ರವೇ ಅಥವಾ ಇನ್‌ಲೈನ್ ಆಕ್ಸಿಸ್‌ನ ಉದ್ದಕ್ಕೂ ಇರುವ ಗಾತ್ರವೇ? ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು ಈ ಅಸ್ಪಷ್ಟತೆಯನ್ನು ಪರಿಹರಿಸುತ್ತವೆ. ನಾವು ಈಗ ಪ್ರತಿ ಆಕ್ಸಿಸ್‌ಗೆ start ಮತ್ತು end ಅನ್ನು ಹೊಂದಿದ್ದೇವೆ:
- block-start: ಇಂಗ್ಲಿಷ್‌ನಲ್ಲಿ "ಟಾಪ್", ಆದರೆ ಲಂಬ ಜಪಾನೀಸ್‌ನಲ್ಲಿ "ರೈಟ್".
- block-end: ಇಂಗ್ಲಿಷ್‌ನಲ್ಲಿ "ಬಾಟಮ್", ಆದರೆ ಲಂಬ ಜಪಾನೀಸ್‌ನಲ್ಲಿ "ಲೆಫ್ಟ್".
- inline-start: ಇಂಗ್ಲಿಷ್‌ನಲ್ಲಿ "ಲೆಫ್ಟ್", ಆದರೆ ಲಂಬ ಜಪಾನೀಸ್‌ನಲ್ಲಿ "ಟಾಪ್".
- inline-end: ಇಂಗ್ಲಿಷ್‌ನಲ್ಲಿ "ರೈಟ್", ಆದರೆ ಲಂಬ ಜಪಾನೀಸ್‌ನಲ್ಲಿ "ಬಾಟಮ್".
ಭೌತಿಕದಿಂದ ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳಿಗೆ ಮ್ಯಾಪಿಂಗ್ (ಲೆವೆಲ್ 1)
ಲೆವೆಲ್ 1 ಭೌತಿಕದಿಂದ ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳಿಗೆ ಸಮಗ್ರವಾದ ಮ್ಯಾಪಿಂಗ್‌ಗಳ ಗುಂಪನ್ನು ಪರಿಚಯಿಸಿತು. ಇಲ್ಲಿ ಕೆಲವು ಪ್ರಮುಖ ಉದಾಹರಣೆಗಳು:
- width → inline-size
- height → block-size
- min-width → min-inline-size
- max-height → max-block-size
- margin-left → margin-inline-start
- margin-right → margin-inline-end
- margin-top → margin-block-start
- margin-bottom → margin-block-end
- padding-left → padding-inline-start
- padding-top → padding-block-start
- border-right → border-inline-end
- border-bottom → border-block-end
- left / right (ಪೊಸಿಷನಿಂಗ್‌ಗಾಗಿ) → inset-inline-start / inset-inline-end
- top / bottom (ಪೊಸಿಷನಿಂಗ್‌ಗಾಗಿ) → inset-block-start / inset-block-end
ಲೆವೆಲ್ 1 ನಮಗೆ margin-inline (start ಮತ್ತು end ಗಾಗಿ) ಮತ್ತು padding-block (start ಮತ್ತು end ಗಾಗಿ) ನಂತಹ ಉಪಯುಕ್ತ ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್‌ಗಳನ್ನು ಸಹ ನೀಡಿತು.
ಲೆವೆಲ್ 2 ಗೆ ಸ್ವಾಗತ: ಹೊಸತೇನಿದೆ ಮತ್ತು ಅದು ಏಕೆ ಮುಖ್ಯ
ಲೆವೆಲ್ 1 ಒಂದು ಸ್ಮಾರಕ ಹೆಜ್ಜೆಯಾಗಿದ್ದರೂ, ಅದು ಕೆಲವು ಗಮನಾರ್ಹ ಅಂತರಗಳನ್ನು ಬಿಟ್ಟಿತ್ತು. float, clear, ಮತ್ತು resize ನಂತಹ ಕೆಲವು ಮೂಲಭೂತ CSS ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳಿಗೆ ಯಾವುದೇ ಲಾಜಿಕಲ್ ಸಮಾನತೆಗಳು ಇರಲಿಲ್ಲ. ಇದಲ್ಲದೆ, border-radius ನಂತಹ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಲಾಜಿಕಲ್ ಆಗಿ ನಿಯಂತ್ರಿಸಲು ಸಾಧ್ಯವಾಗಲಿಲ್ಲ, ಇದು ಡೆವಲಪರ್‌ಗಳನ್ನು ಸೂಕ್ಷ್ಮ-ವಿನ್ಯಾಸಕ್ಕಾಗಿ ಭೌತಿಕ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳಿಗೆ ಮರಳುವಂತೆ ಒತ್ತಾಯಿಸಿತು. ಇದರರ್ಥ ನೀವು 90% ಲೇಔಟ್ ಅನ್ನು ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ನೊಂದಿಗೆ ನಿರ್ಮಿಸಬಹುದಾಗಿತ್ತು, ಆದರೆ ವಿಭಿನ್ನ ರೈಟಿಂಗ್ ಮೋಡ್‌ಗಳಿಗಾಗಿ ಇನ್ನೂ ಭೌತಿಕ ಓವರ್‌ರೈಡ್‌ಗಳು ಬೇಕಾಗುತ್ತಿದ್ದವು, ಇದು ಉದ್ದೇಶವನ್ನು ಭಾಗಶಃ ವಿಫಲಗೊಳಿಸುತ್ತಿತ್ತು.
CSS ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್ ಲೆವೆಲ್ 2 ಈ ನ್ಯೂನತೆಗಳನ್ನು ನೇರವಾಗಿ ಪರಿಹರಿಸುತ್ತದೆ. ಇದು ಒಂದು ಮೂಲಭೂತವಾಗಿ ಹೊಸ ವ್ಯವಸ್ಥೆಯನ್ನು ಪರಿಚಯಿಸುವುದರ ಬಗ್ಗೆ ಅಲ್ಲ, ಆದರೆ ಲೆವೆಲ್ 1 ರಲ್ಲಿ ಪ್ರಾರಂಭವಾದದ್ದನ್ನು ಪೂರ್ಣಗೊಳಿಸುವುದರ ಬಗ್ಗೆ. ಇದನ್ನು ಎರಡು ಪ್ರಾಥಮಿಕ ವಿಧಾನಗಳಲ್ಲಿ ಸಾಧಿಸುತ್ತದೆ:
- ಹಿಂದಿನಿಂದಲೂ ಭೌತಿಕವಾಗಿದ್ದ (float ನಂತಹ) ಹಳೆಯ CSS ವೈಶಿಷ್ಟ್ಯಗಳಿಗಾಗಿ ಹೊಸ ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್ ಮತ್ತು ವ್ಯಾಲ್ಯೂಸ್‌ಗಳನ್ನು ಪರಿಚಯಿಸುವುದು.
- ಹಿಂದೆ ನಿರ್ಲಕ್ಷಿಸಲಾಗಿದ್ದ (border-radius ನಂತಹ) ಸಂಕೀರ್ಣ ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್‌ಗಳಿಗಾಗಿ ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟಿ ಮ್ಯಾಪಿಂಗ್‌ಗಳನ್ನು ಸೇರಿಸುವುದು.
ಲೆವೆಲ್ 2 ನೊಂದಿಗೆ, ಸಂಪೂರ್ಣವಾಗಿ ಫ್ಲೋ-ರಿಲೇಟಿವ್ ಸ್ಟೈಲಿಂಗ್ ವ್ಯವಸ್ಥೆಯ ದೃಷ್ಟಿ ಬಹುತೇಕ ಪೂರ್ಣಗೊಂಡಿದೆ, ಇದು ನಮಗೆ ಹ್ಯಾಕ್‌ಗಳು ಅಥವಾ ಓವರ್‌ರೈಡ್‌ಗಳಿಲ್ಲದೆ, ಎಲ್ಲೆಡೆ, ಎಲ್ಲರಿಗೂ ಕೆಲಸ ಮಾಡುವ ಸಂಕೀರ್ಣ, ಸುಂದರ ಮತ್ತು ದೃಢವಾದ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.
ಆಳವಾದ ನೋಟ: ಲೆವೆಲ್ 2 ರಲ್ಲಿನ ಹೊಸ ಲಾಜಿಕಲ್ ವ್ಯಾಲ್ಯೂಸ್ ಮತ್ತು ಪ್ರಾಪರ್ಟೀಸ್
ಲೆವೆಲ್ 2 ನಮ್ಮ ಡೆವಲಪರ್ ಟೂಲ್‌ಕಿಟ್‌ಗೆ ತರುವ ಅತ್ಯಂತ ಪರಿಣಾಮಕಾರಿ ಸೇರ್ಪಡೆಗಳನ್ನು ಅನ್ವೇಷಿಸೋಣ. ಇವುಗಳು ಅಂತರವನ್ನು ತುಂಬುವ ಮತ್ತು ನಿಜವಾದ ಸಾರ್ವತ್ರಿಕ ಕಾಂಪೊನೆಂಟ್ ವಿನ್ಯಾಸವನ್ನು ಸಶಕ್ತಗೊಳಿಸುವ ಸಾಧನಗಳಾಗಿವೆ.
Float ಮತ್ತು Clear: ಲಾಜಿಕಲ್ ಕ್ರಾಂತಿ
float ಪ್ರಾಪರ್ಟಿಯು ವರ್ಷಗಳಿಂದ CSS ಲೇಔಟ್‌ನ ಮೂಲಾಧಾರವಾಗಿದೆ, ಆದರೆ ಅದರ ಮೌಲ್ಯಗಳಾದ left ಮತ್ತು right, ಭೌತಿಕ ದಿಕ್ಕಿನ ವ್ಯಾಖ್ಯಾನವಾಗಿದೆ. ನೀವು ಇಂಗ್ಲಿಷ್‌ನಲ್ಲಿ ಒಂದು ಪ್ಯಾರಾಗ್ರಾಫ್‌ನ left ಗೆ ಚಿತ್ರವನ್ನು ಫ್ಲೋಟ್ ಮಾಡಿದರೆ, ಅದು ಸರಿಯಾಗಿ ಕಾಣುತ್ತದೆ. ಆದರೆ ಅರೇಬಿಕ್‌ಗಾಗಿ ಡಾಕ್ಯುಮೆಂಟ್ ದಿಕ್ಕನ್ನು ಬಲದಿಂದ-ಎಡಕ್ಕೆ (RTL) ಬದಲಾಯಿಸಿದರೆ, ಚಿತ್ರವು ಈಗ ಟೆಕ್ಸ್ಟ್ ಬ್ಲಾಕ್‌ನ "ತಪ್ಪು" ಬದಿಯಲ್ಲಿದೆ. ಅದು ಸಾಲಿನ ಪ್ರಾರಂಭವಾದ ಬಲಭಾಗದಲ್ಲಿರಬೇಕು.
ಲೆವೆಲ್ 2, float ಪ್ರಾಪರ್ಟಿಗಾಗಿ ಎರಡು ಹೊಸ, ಲಾಜಿಕಲ್ ಕೀವರ್ಡ್‌ಗಳನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ:
- float: inline-start; ಇದು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಇನ್‌ಲೈನ್ ದಿಕ್ಕಿನ ಪ್ರಾರಂಭಕ್ಕೆ ಫ್ಲೋಟ್ ಮಾಡುತ್ತದೆ. LTR ಭಾಷೆಗಳಲ್ಲಿ, ಇದು ಎಡಭಾಗ. RTL ಭಾಷೆಗಳಲ್ಲಿ, ಇದು ಬಲಭಾಗ. vertical-rl ರೈಟಿಂಗ್ ಮೋಡ್‌ನಲ್ಲಿ, ಇದು ಮೇಲ್ಭಾಗ.
- float: inline-end; ಇದು ಎಲಿಮೆಂಟ್ ಅನ್ನು ಇನ್‌ಲೈನ್ ದಿಕ್ಕಿನ ಅಂತ್ಯಕ್ಕೆ ಫ್ಲೋಟ್ ಮಾಡುತ್ತದೆ. LTR ನಲ್ಲಿ, ಇದು ಬಲಭಾಗ. RTL ನಲ್ಲಿ, ಇದು ಎಡಭಾಗ. vertical-rl ನಲ್ಲಿ, ಇದು ಕೆಳಭಾಗ.
ಅಂತೆಯೇ, ಫ್ಲೋಟ್ ಮಾಡಿದ ಎಲಿಮೆಂಟ್‌ಗಳ ಸುತ್ತಲೂ ಕಂಟೆಂಟ್‌ನ ಸುತ್ತುವಿಕೆಯನ್ನು ನಿಯಂತ್ರಿಸಲು ಬಳಸುವ clear ಪ್ರಾಪರ್ಟಿಯು ತನ್ನ ಲಾಜಿಕಲ್ ಪ್ರತಿರೂಪಗಳನ್ನು ಪಡೆಯುತ್ತದೆ:
- clear: inline-start; ಇನ್‌ಲೈನ್-ಸ್ಟಾರ್ಟ್ ಬದಿಯಲ್ಲಿನ ಫ್ಲೋಟ್‌ಗಳನ್ನು ತೆರವುಗೊಳಿಸುತ್ತದೆ.
- clear: inline-end; ಇನ್‌ಲೈನ್-ಎಂಡ್ ಬದಿಯಲ್ಲಿನ ಫ್ಲೋಟ್‌ಗಳನ್ನು ತೆರವುಗೊಳಿಸುತ್ತದೆ.
ಇದು ಒಂದು ಗೇಮ್-ಚೇಂಜರ್. ನೀವು ಈಗ ಕ್ಲಾಸಿಕ್ ಇಮೇಜ್-ವಿತ್-ಟೆಕ್ಸ್ಟ್-ವ್ರ್ಯಾಪ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಬಹುದು, ಅದು ಯಾವುದೇ ಭಾಷೆಯ ದಿಕ್ಕಿಗೆ ಒಂದೇ ಒಂದು ಹೆಚ್ಚುವರಿ CSS ಸಾಲಿಲ್ಲದೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ.
ಲಾಜಿಕಲ್ Resize ನೊಂದಿಗೆ ವರ್ಧಿತ ನಿಯಂತ್ರಣ
ಸಾಮಾನ್ಯವಾಗಿ textarea ಮೇಲೆ ಬಳಸಲಾಗುವ resize ಪ್ರಾಪರ್ಟಿಯು, ಬಳಕೆದಾರರಿಗೆ ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರವನ್ನು ಬದಲಾಯಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಅದರ ಸಾಂಪ್ರದಾಯಿಕ ಮೌಲ್ಯಗಳು horizontal, vertical, ಮತ್ತು both. ಆದರೆ ಲಂಬ ರೈಟಿಂಗ್ ಮೋಡ್‌ನಲ್ಲಿ "horizontal" ಎಂದರೆ ಏನು? ಅದು ಇನ್ನೂ ಭೌತಿಕ ಸಮತಲ ಅಕ್ಷದ ಉದ್ದಕ್ಕೂ ಮರುಗಾತ್ರ ಮಾಡುವುದು ಎಂದರ್ಥ, ಇದು ಬಳಕೆದಾರ ಅಥವಾ ವಿನ್ಯಾಸಕಾರರು ಉದ್ದೇಶಿಸದಿರಬಹುದು. ಬಳಕೆದಾರರು ಬಹುಶಃ ಸಾಲುಗಳನ್ನು ಉದ್ದ ಅಥವಾ ಚಿಕ್ಕದಾಗಿಸಲು ಅದರ ಇನ್‌ಲೈನ್ ಆಕ್ಸಿಸ್‌ನ ಉದ್ದಕ್ಕೂ ಎಲಿಮೆಂಟ್‌ನ ಗಾತ್ರವನ್ನು ಬದಲಾಯಿಸಲು ಬಯಸುತ್ತಾರೆ.
ಲೆವೆಲ್ 2 resize ಗಾಗಿ ಲಾಜಿಕಲ್ ಮೌಲ್ಯಗಳನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ:
- resize: inline; ಇನ್‌ಲೈನ್ ಆಕ್ಸಿಸ್‌ನ ಉದ್ದಕ್ಕೂ ಮರುಗಾತ್ರಗೊಳಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.
- resize: block; ಬ್ಲಾಕ್ ಆಕ್ಸಿಸ್‌ನ ಉದ್ದಕ್ಕೂ ಮರುಗಾತ್ರಗೊಳಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.
ಇಂಗ್ಲಿಷ್‌ನಲ್ಲಿ textarea ಮೇಲೆ resize: block; ಬಳಸುವುದರಿಂದ ಬಳಕೆದಾರರು ಅದನ್ನು ಎತ್ತರವಾಗಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ. ಲಂಬ ರೈಟಿಂಗ್ ಮೋಡ್‌ನಲ್ಲಿ ಇದನ್ನು ಬಳಸುವುದರಿಂದ ಬಳಕೆದಾರರು ಅದನ್ನು ಅಗಲವಾಗಿಸಲು ಸಾಧ್ಯವಾಗುತ್ತದೆ (ಇದು ಬ್ಲಾಕ್ ದಿಕ್ಕು). ಇದು ಸುಮ್ಮನೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ.
`caption-side`: ಟೇಬಲ್ ಕ್ಯಾಪ್ಶನ್‌ಗಳಿಗಾಗಿ ಲಾಜಿಕಲ್ ಪೊಸಿಷನಿಂಗ್
caption-side ಪ್ರಾಪರ್ಟಿಯು ಟೇಬಲ್‌ನ caption ನ ಸ್ಥಾನವನ್ನು ನಿರ್ಧರಿಸುತ್ತದೆ. ಹಳೆಯ ಮೌಲ್ಯಗಳು top ಮತ್ತು bottom ಆಗಿದ್ದವು. ಮತ್ತೆ, ಇವು ಭೌತಿಕವಾಗಿವೆ. ವಿನ್ಯಾಸಕಾರರ ಉದ್ದೇಶವು ಟೇಬಲ್‌ನ ಕಂಟೆಂಟ್‌ಗೆ "ಮುಂಚಿತವಾಗಿ" ಕ್ಯಾಪ್ಶನ್ ಇರಿಸುವುದಾಗಿದ್ದರೆ, top ಅಡ್ಡ ರೈಟಿಂಗ್ ಮೋಡ್‌ಗಳಿಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ. ಆದರೆ vertical-rl ಮೋಡ್‌ನಲ್ಲಿ, ಬ್ಲಾಕ್ ಫ್ಲೋನ "ಪ್ರಾರಂಭ" ಬಲಭಾಗದಲ್ಲಿದೆ, ಮೇಲ್ಭಾಗದಲ್ಲಲ್ಲ.
ಲೆವೆಲ್ 2 ಲಾಜಿಕಲ್ ಪರಿಹಾರವನ್ನು ಒದಗಿಸುತ್ತದೆ:
- caption-side: block-start; ಕ್ಯಾಪ್ಶನ್ ಅನ್ನು ಬ್ಲಾಕ್ ಫ್ಲೋನ ಪ್ರಾರಂಭದಲ್ಲಿ ಇರಿಸುತ್ತದೆ.
- caption-side: block-end; ಕ್ಯಾಪ್ಶನ್ ಅನ್ನು ಬ್ಲಾಕ್ ಫ್ಲೋನ ಕೊನೆಯಲ್ಲಿ ಇರಿಸುತ್ತದೆ.
`text-align`: ಒಂದು ಮೂಲಭೂತ ಲಾಜಿಕಲ್ ಮೌಲ್ಯ
text-align ಗಾಗಿ start ಮತ್ತು end ಮೌಲ್ಯಗಳು ಸ್ವಲ್ಪ ಸಮಯದಿಂದ ಲಭ್ಯವಿದ್ದರೂ, ಅವು ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್ ತತ್ವಶಾಸ್ತ್ರದ ಪ್ರಮುಖ ಭಾಗವಾಗಿದೆ ಮತ್ತು ಬಲಪಡಿಸಲು ಯೋಗ್ಯವಾಗಿವೆ. text-align: left; ಬಳಸುವುದು RTL ಭಾಷೆಗಳಲ್ಲಿ ತಕ್ಷಣವೇ ಲೇಔಟ್ ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡುವ ಸಾಮಾನ್ಯ ತಪ್ಪಾಗಿದೆ. ಸರಿಯಾದ, ಆಧುನಿಕ ವಿಧಾನವೆಂದರೆ ಯಾವಾಗಲೂ ಬಳಸುವುದು:
- text-align: start; ಪಠ್ಯವನ್ನು ಇನ್‌ಲೈನ್ ದಿಕ್ಕಿನ ಪ್ರಾರಂಭಕ್ಕೆ ಸರಿಹೊಂದಿಸುತ್ತದೆ.
- text-align: end; ಪಠ್ಯವನ್ನು ಇನ್‌ಲೈನ್ ದಿಕ್ಕಿನ ಅಂತ್ಯಕ್ಕೆ ಸರಿಹೊಂದಿಸುತ್ತದೆ.
ಲೆವೆಲ್ 2 ರ ಕಿರೀಟಪ್ರಾಯ: ಲಾಜಿಕಲ್ `border-radius`
ಬಹುಶಃ ಲೆವೆಲ್ 2 ರಲ್ಲಿನ ಅತ್ಯಂತ ಮಹತ್ವದ ಮತ್ತು ಶಕ್ತಿಯುತ ಸೇರ್ಪಡೆಯೆಂದರೆ ಬಾರ್ಡರ್ ರೇಡಿಯಸ್‌ಗಳನ್ನು ಲಾಜಿಕಲ್ ಆಗಿ ನಿಯಂತ್ರಿಸುವ ಪ್ರಾಪರ್ಟೀಸ್‌ನ ಗುಂಪು. ಹಿಂದೆ, ನೀವು ಒಂದು ಕಾರ್ಡ್‌ನ ಮೂಲೆಗಳನ್ನು ಕೇವಲ "ಮೇಲ್ಭಾಗದಲ್ಲಿ" ದುಂಡಾಗಿಸಲು ಬಯಸಿದರೆ, ನೀವು border-top-left-radius ಮತ್ತು border-top-right-radius ಅನ್ನು ಬಳಸುತ್ತಿದ್ದಿರಿ. ಇದು ಲಂಬ ರೈಟಿಂಗ್ ಮೋಡ್‌ನಲ್ಲಿ ಸಂಪೂರ್ಣವಾಗಿ ವಿಫಲವಾಗುತ್ತದೆ, ಅಲ್ಲಿ "ಮೇಲಿನ" ಮೂಲೆಗಳು ಈಗ start-start ಮತ್ತು end-start ಮೂಲೆಗಳಾಗಿವೆ.
ಲೆವೆಲ್ 2 ಒಂದು ಎಲಿಮೆಂಟ್‌ನ ನಾಲ್ಕು ಮೂಲೆಗಳಿಗೆ ಫ್ಲೋ-ರಿಲೇಟಿವ್ ರೀತಿಯಲ್ಲಿ ಮ್ಯಾಪ್ ಆಗುವ ನಾಲ್ಕು ಹೊಸ ಲಾಂಗ್‌ಹ್ಯಾಂಡ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ. ಹೆಸರಿಸುವ ಸಂಪ್ರದಾಯವು border-[block-edge]-[inline-edge]-radius ಆಗಿದೆ.
- border-start-start-radius: ಬ್ಲಾಕ್-ಸ್ಟಾರ್ಟ್ ಮತ್ತು ಇನ್‌ಲೈನ್-ಸ್ಟಾರ್ಟ್ ಬದಿಗಳು ಸೇರುವ ಮೂಲೆ.
- border-start-end-radius: ಬ್ಲಾಕ್-ಸ್ಟಾರ್ಟ್ ಮತ್ತು ಇನ್‌ಲೈನ್-ಎಂಡ್ ಬದಿಗಳು ಸೇರುವ ಮೂಲೆ.
- border-end-start-radius: ಬ್ಲಾಕ್-ಎಂಡ್ ಮತ್ತು ಇನ್‌ಲೈನ್-ಸ್ಟಾರ್ಟ್ ಬದಿಗಳು ಸೇರುವ ಮೂಲೆ.
- border-end-end-radius: ಬ್ಲಾಕ್-ಎಂಡ್ ಮತ್ತು ಇನ್‌ಲೈನ್-ಎಂಡ್ ಬದಿಗಳು ಸೇರುವ ಮೂಲೆ.
ಇದನ್ನು ಮೊದಲು ದೃಶ್ಯೀಕರಿಸುವುದು ಕಷ್ಟವಾಗಬಹುದು, ಆದ್ದರಿಂದ ವಿಭಿನ್ನ ರೈಟಿಂಗ್ ಮೋಡ್‌ಗಳಿಗಾಗಿ ಅದನ್ನು ಮ್ಯಾಪ್ ಮಾಡೋಣ:
`writing-mode: horizontal-tb` ನಲ್ಲಿ `border-radius` ಮ್ಯಾಪಿಂಗ್ (ಉದಾ., ಇಂಗ್ಲಿಷ್)
- border-start-start-radius top-left-radius ಗೆ ಮ್ಯಾಪ್ ಆಗುತ್ತದೆ.
- border-start-end-radius top-right-radius ಗೆ ಮ್ಯಾಪ್ ಆಗುತ್ತದೆ.
- border-end-start-radius bottom-left-radius ಗೆ ಮ್ಯಾಪ್ ಆಗುತ್ತದೆ.
- border-end-end-radius bottom-right-radius ಗೆ ಮ್ಯಾಪ್ ಆಗುತ್ತದೆ.
`dir="rtl"` ನೊಂದಿಗೆ `writing-mode: horizontal-tb` ನಲ್ಲಿ `border-radius` ಮ್ಯಾಪಿಂಗ್ (ಉದಾ., ಅರೇಬಿಕ್)
ಇಲ್ಲಿ, ಇನ್‌ಲೈನ್ ದಿಕ್ಕು ತಿರುಗಿದೆ.
- border-start-start-radius top-right-radius ಗೆ ಮ್ಯಾಪ್ ಆಗುತ್ತದೆ. (ಬ್ಲಾಕ್-ಸ್ಟಾರ್ಟ್ ಮೇಲ್ಭಾಗ, ಇನ್‌ಲೈನ್-ಸ್ಟಾರ್ಟ್ ಬಲಭಾಗ).
- border-start-end-radius top-left-radius ಗೆ ಮ್ಯಾಪ್ ಆಗುತ್ತದೆ.
- border-end-start-radius bottom-right-radius ಗೆ ಮ್ಯಾಪ್ ಆಗುತ್ತದೆ.
- border-end-end-radius bottom-left-radius ಗೆ ಮ್ಯಾಪ್ ಆಗುತ್ತದೆ.
`writing-mode: vertical-rl` ನಲ್ಲಿ `border-radius` ಮ್ಯಾಪಿಂಗ್ (ಉದಾ., ಜಪಾನೀಸ್)
ಇಲ್ಲಿ, ಎರಡೂ ಆಕ್ಸಿಸ್‌ಗಳು ತಿರುಗಿವೆ.
- border-start-start-radius top-right-radius ಗೆ ಮ್ಯಾಪ್ ಆಗುತ್ತದೆ. (ಬ್ಲಾಕ್-ಸ್ಟಾರ್ಟ್ ಬಲಭಾಗ, ಇನ್‌ಲೈನ್-ಸ್ಟಾರ್ಟ್ ಮೇಲ್ಭಾಗ).
- border-start-end-radius bottom-right-radius ಗೆ ಮ್ಯಾಪ್ ಆಗುತ್ತದೆ.
- border-end-start-radius top-left-radius ಗೆ ಮ್ಯಾಪ್ ಆಗುತ್ತದೆ.
- border-end-end-radius bottom-left-radius ಗೆ ಮ್ಯಾಪ್ ಆಗುತ್ತದೆ.
ಈ ಹೊಸ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಬಳಸುವ ಮೂಲಕ, ನೀವು ಭೌತಿಕ ಪರದೆಗೆ ಬದಲಾಗಿ, ಕಂಟೆಂಟ್‌ನ ಹರಿವಿಗೆ ಶಬ್ದಾರ್ಥವಾಗಿ ಸಂಬಂಧಿಸಿದ ಮೂಲೆಯ ರೇಡಿಯಸ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು. ಒಂದು "start-start" ಮೂಲೆ ಯಾವಾಗಲೂ ಸರಿಯಾದ ಮೂಲೆಯಾಗಿರುತ್ತದೆ, ಭಾಷೆ ಅಥವಾ ಪಠ್ಯದ ದಿಕ್ಕು ಏನೇ ಇರಲಿ.
ಪ್ರಾಯೋಗಿಕ ಅನುಷ್ಠಾನ: ಜಾಗತಿಕ-ಸಿದ್ಧ ಕಾಂಪೊನೆಂಟ್ ನಿರ್ಮಾಣ
ಸಿದ್ಧಾಂತ ಅದ್ಭುತವಾಗಿದೆ, ಆದರೆ ಇದು ಆಚರಣೆಯಲ್ಲಿ ಹೇಗೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ ಎಂದು ನೋಡೋಣ. ನಾವು ಒಂದು ಸರಳ ಪ್ರೊಫೈಲ್ ಕಾರ್ಡ್ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ನಿರ್ಮಿಸುತ್ತೇವೆ, ಮೊದಲು ಹಳೆಯ ಭೌತಿಕ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಬಳಸಿ, ಮತ್ತು ನಂತರ ಅದನ್ನು ಲೆವೆಲ್ 1 ಮತ್ತು ಲೆವೆಲ್ 2 ರ ಆಧುನಿಕ ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಬಳಸಲು ರಿಫ್ಯಾಕ್ಟರ್ ಮಾಡುತ್ತೇವೆ.
ಕಾರ್ಡ್ ಒಂದು ಬದಿಗೆ ಫ್ಲೋಟ್ ಮಾಡಿದ ಚಿತ್ರ, ಒಂದು ಶೀರ್ಷಿಕೆ, ಕೆಲವು ಪಠ್ಯ, ಮತ್ತು ಅಲಂಕಾರಿಕ ಬಾರ್ಡರ್ ಹಾಗೂ ದುಂಡಾದ ಮೂಲೆಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ.
"ಹಳೆಯ" ವಿಧಾನ: ಒಂದು ದುರ್ಬಲ, ಭೌತಿಕ-ಪ್ರಾಪರ್ಟಿ ಕಾರ್ಡ್
ಕೆಲವು ವರ್ಷಗಳ ಹಿಂದೆ ನಾವು ಈ ಕಾರ್ಡ್ ಅನ್ನು ಹೇಗೆ ಸ್ಟೈಲ್ ಮಾಡಿರಬಹುದು ಎಂಬುದು ಇಲ್ಲಿದೆ:
/* --- CSS (ಭೌತಿಕ ಪ್ರಾಪರ್ಟೀಸ್) --- */
.physical-card {
width: 300px;
padding: 20px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-left: 5px solid steelblue;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.physical-card .avatar {
float: left;
width: 80px;
height: 80px;
margin-right: 15px;
}
.physical-card h3 {
margin-top: 0;
text-align: left;
}
ಪ್ರಮಾಣಿತ ಇಂಗ್ಲಿಷ್ LTR ಸಂದರ್ಭದಲ್ಲಿ, ಇದು ಚೆನ್ನಾಗಿ ಕಾಣುತ್ತದೆ. ಆದರೆ ನಾವು ಇದನ್ನು dir="rtl" ಅಥವಾ writing-mode: vertical-rl ಇರುವ ಕಂಟೇನರ್ ಒಳಗೆ ಇರಿಸಿದರೆ, ಲೇಔಟ್ ಮುರಿಯುತ್ತದೆ. ಅಲಂಕಾರಿಕ ಬಾರ್ಡರ್ ತಪ್ಪು ಬದಿಯಲ್ಲಿದೆ, ಅವತಾರ್ ತಪ್ಪು ಬದಿಯಲ್ಲಿದೆ, ಮಾರ್ಜಿನ್ ತಪ್ಪಾಗಿದೆ, ಮತ್ತು ದುಂಡಾದ ಮೂಲೆಗಳು ಸ್ಥಳಾಂತರಗೊಂಡಿವೆ.
"ಹೊಸ" ವಿಧಾನ: ಒಂದು ದೃಢವಾದ, ಲಾಜಿಕಲ್-ಪ್ರಾಪರ್ಟಿ ಕಾರ್ಡ್
ಈಗ, ಅದೇ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್ ಬಳಸಿ ರಿಫ್ಯಾಕ್ಟರ್ ಮಾಡೋಣ. ನಾವು ಲೆವೆಲ್ 1 ಮತ್ತು ಲೆವೆಲ್ 2 ರ ಹೊಸ ಸೇರ್ಪಡೆಗಳಿಂದ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳುತ್ತೇವೆ.
/* --- CSS (ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್) --- */
.logical-card {
inline-size: 300px;
padding: 20px; /* `padding` ಶಾರ್ಟ್‌ಹ್ಯಾಂಡ್ ಈಗಾಗಲೇ ಲಾಜಿಕಲ್ ಆಗಿದೆ! */
margin-block-end: 20px;
border: 1px solid #ccc;
border-inline-start: 5px solid darkcyan;
border-start-start-radius: 8px; /* ಲೆವೆಲ್ 2 ಪವರ್! */
border-end-start-radius: 8px; /* ಲೆವೆಲ್ 2 ಪವರ್! */
}
.logical-card .avatar {
float: inline-start; /* ಲೆವೆಲ್ 2 ಪವರ್! */
inline-size: 80px;
block-size: 80px;
margin-inline-end: 15px;
}
.logical-card h3 {
margin-block-start: 0;
text-align: start;
}
ಪರೀಕ್ಷೆ ಮತ್ತು ಪರಿಶೀಲನೆ
ಈ ಹೊಸ CSS ನೊಂದಿಗೆ, ನೀವು ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಯಾವುದೇ ಕಂಟೇನರ್‌ನಲ್ಲಿ ಹಾಕಬಹುದು, ಮತ್ತು ಅದು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಹೊಂದಿಕೊಳ್ಳುತ್ತದೆ.
- LTR ಸಂದರ್ಭದಲ್ಲಿ: ಇದು ಮೂಲ ಭೌತಿಕ ಆವೃತ್ತಿಯಂತೆಯೇ ಕಾಣುತ್ತದೆ.
- RTL ಸಂದರ್ಭದಲ್ಲಿ (dir="rtl"): ಅವತಾರ್ ಬಲಕ್ಕೆ ಫ್ಲೋಟ್ ಆಗುತ್ತದೆ, ಅದರ ಮಾರ್ಜಿನ್ ಎಡಭಾಗದಲ್ಲಿರುತ್ತದೆ, ಅಲಂಕಾರಿಕ ಬಾರ್ಡರ್ ಬಲಭಾಗದಲ್ಲಿರುತ್ತದೆ, ಮತ್ತು ಪಠ್ಯವು ಸ್ಟಾರ್ಟ್-ಅಲೈನ್ ಆಗಿರುತ್ತದೆ (ಬಲಕ್ಕೆ). ದುಂಡಾದ ಮೂಲೆಗಳು ಸರಿಯಾಗಿ ಮೇಲಿನ-ಬಲ ಮತ್ತು ಕೆಳಗಿನ-ಬಲದಲ್ಲಿರುತ್ತವೆ. ಇದು ಸುಮ್ಮನೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ.
- ಲಂಬ ಸಂದರ್ಭದಲ್ಲಿ (writing-mode: vertical-rl): ಕಾರ್ಡ್‌ನ "ಅಗಲ" (ಈಗ ಅದರ ಲಂಬ inline-size) 300px ಆಗಿರುತ್ತದೆ. ಅವತಾರ್ "ಮೇಲಕ್ಕೆ" (inline-start) ಫ್ಲೋಟ್ ಆಗುತ್ತದೆ, ಅದರ "ಕೆಳಗೆ" (inline-end) ಮಾರ್ಜಿನ್ ಇರುತ್ತದೆ. ಅಲಂಕಾರಿಕ ಬಾರ್ಡರ್ ಬಲಭಾಗದಲ್ಲಿ (inline-start) ಇರುತ್ತದೆ, ಮತ್ತು ದುಂಡಾದ ಮೂಲೆಗಳು ಮೇಲಿನ-ಬಲ ಮತ್ತು ಮೇಲಿನ-ಎಡದಲ್ಲಿರುತ್ತವೆ. ಕಾಂಪೊನೆಂಟ್ ಯಾವುದೇ ಮೀಡಿಯಾ ಕ್ವೆರಿಗಳು ಅಥವಾ ಓವರ್‌ರೈಡ್‌ಗಳಿಲ್ಲದೆ ತನ್ನನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಸರಿಯಾಗಿ ಮರು-ಹೊಂದಿಸಿಕೊಂಡಿದೆ.
ಬ್ರೌಸರ್ ಬೆಂಬಲ ಮತ್ತು ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳು
ಇದೆಲ್ಲವೂ ಅದ್ಭುತವಾಗಿ ಧ್ವನಿಸುತ್ತದೆ, ಆದರೆ ಬ್ರೌಸರ್ ಬೆಂಬಲದ ಬಗ್ಗೆ ಏನು? ಒಳ್ಳೆಯ ಸುದ್ದಿ ಎಂದರೆ ಲೆವೆಲ್ 1 ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳಿಗೆ ಎಲ್ಲಾ ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಅತ್ಯುತ್ತಮ ಬೆಂಬಲವಿದೆ. ನೀವು ಇಂದು margin-inline-start ಮತ್ತು padding-block ನಂತಹ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಬಳಸಬಹುದು ಮತ್ತು ಬಳಸಬೇಕು.
ಹೊಸ ಲೆವೆಲ್ 2 ವೈಶಿಷ್ಟ್ಯಗಳಿಗೆ ಬೆಂಬಲವು ವೇಗವಾಗಿ ಸುಧಾರಿಸುತ್ತಿದೆ ಆದರೆ ಇನ್ನೂ ಸಾರ್ವತ್ರಿಕವಾಗಿಲ್ಲ. float, clear, ಮತ್ತು resize ಗಾಗಿ ಲಾಜಿಕಲ್ ಮೌಲ್ಯಗಳು ಚೆನ್ನಾಗಿ ಬೆಂಬಲಿತವಾಗಿವೆ. ಲಾಜಿಕಲ್ border-radius ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳು ಹೊಸತಾಗಿವೆ ಮತ್ತು ಇನ್ನೂ ಫೀಚರ್ ಫ್ಲ್ಯಾಗ್‌ಗಳ ಹಿಂದೆ ಅಥವಾ ಇತ್ತೀಚಿನ ಬ್ರೌಸರ್ ಆವೃತ್ತಿಗಳಲ್ಲಿರಬಹುದು. ಯಾವಾಗಲೂ ಹಾಗೆ, ನೀವು ಅತ್ಯಂತ ನವೀಕೃತ ಹೊಂದಾಣಿಕೆಯ ಡೇಟಾಕ್ಕಾಗಿ MDN ವೆಬ್ ಡಾಕ್ಸ್ ಅಥವಾ CanIUse.com ನಂತಹ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಸಂಪರ್ಕಿಸಬೇಕು.
ಪ್ರಗತಿಪರ ವರ್ಧನೆಗಾಗಿ ತಂತ್ರಗಳು
CSS ಅನ್ನು ಸ್ಥಿತಿಸ್ಥಾಪಕವಾಗಿ ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿರುವುದರಿಂದ, ನಾವು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಸುಲಭವಾಗಿ ಫಾಲ್‌ಬ್ಯಾಕ್‌ಗಳನ್ನು ಒದಗಿಸಬಹುದು. ಕ್ಯಾಸ್ಕೇಡ್ ಖಚಿತಪಡಿಸುತ್ತದೆ যে ಒಂದು ಬ್ರೌಸರ್ ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳದಿದ್ದರೆ, ಅದು ಅದನ್ನು ಸರಳವಾಗಿ ನಿರ್ಲಕ್ಷಿಸುತ್ತದೆ ಮತ್ತು ಅದರ ಮೊದಲು ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಭೌತಿಕ ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸುತ್ತದೆ.
ನೀವು ಫಾಲ್‌ಬ್ಯಾಕ್-ಸಿದ್ಧ CSS ಅನ್ನು ಹೇಗೆ ಬರೆಯಬಹುದು ಎಂಬುದು ಇಲ್ಲಿದೆ:
.card {
/* ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ ಫಾಲ್‌ಬ್ಯಾಕ್ */
border-left: 5px solid darkcyan;
border-top-left-radius: 8px;
/* ಫಾಲ್‌ಬ್ಯಾಕ್ ಅನ್ನು ಓವರ್‌ರೈಡ್ ಮಾಡುವ ಆಧುನಿಕ ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟಿ */
border-inline-start: 5px solid darkcyan;
border-start-start-radius: 8px;
}
ಈ ವಿಧಾನವು ಪ್ರತಿಯೊಬ್ಬರಿಗೂ ಒಂದು ದೃಢವಾದ ಮೂಲ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಮತ್ತು ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿನ ಬಳಕೆದಾರರಿಗೆ ವರ್ಧಿತ, ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ. ಬಹು ರೈಟಿಂಗ್ ಮೋಡ್‌ಗಳನ್ನು ಬೆಂಬಲಿಸುವ ಅಗತ್ಯವಿಲ್ಲದ ಯೋಜನೆಗಳಿಗೆ, ಇದು ಅತಿಯಾಗಿರಬಹುದು. ಆದರೆ ಯಾವುದೇ ಜಾಗತಿಕ ಅಪ್ಲಿಕೇಶನ್, ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆ, ಅಥವಾ ಥೀಮ್‌ಗೆ, ಇದು ಒಂದು ದೃಢವಾದ ಮತ್ತು ಭವಿಷ್ಯ-ನಿರೋಧಕ ತಂತ್ರವಾಗಿದೆ.
ಭವಿಷ್ಯವು ಲಾಜಿಕಲ್ ಆಗಿದೆ: ಲೆವೆಲ್ 2 ರ ಆಚೆಗೆ
ಭೌತಿಕದಿಂದ ಲಾಜಿಕಲ್ ಮನಸ್ಥಿತಿಗೆ ಪರಿವರ್ತನೆಯು ಆಧುನಿಕ CSS ನಲ್ಲಿನ ಅತ್ಯಂತ ಪ್ರಮುಖ ಬದಲಾವಣೆಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ. ಇದು ನಮ್ಮ ಸ್ಟೈಲಿಂಗ್ ಭಾಷೆಯನ್ನು ವೈವಿಧ್ಯಮಯ, ಜಾಗತಿಕ ವೆಬ್‌ನ ವಾಸ್ತವತೆಗೆ ಸರಿಹೊಂದಿಸುತ್ತದೆ. ಇದು ನಮ್ಮನ್ನು ದುರ್ಬಲ, ಸ್ಕ್ರೀನ್-ಆಧಾರಿತ ಹ್ಯಾಕ್‌ಗಳಿಂದ ದೂರವಿರಿಸಿ, ಸ್ಥಿತಿಸ್ಥಾಪಕ, ಕಂಟೆಂಟ್-ಆಧಾರಿತ ವಿನ್ಯಾಸದತ್ತ ಸಾಗಿಸುತ್ತದೆ.
ಇನ್ನೂ ಅಂತರಗಳಿವೆಯೇ? ಕೆಲವು. background-position ಅಥವಾ ಗ್ರೇಡಿಯಂಟ್‌ಗಳಂತಹ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳಿಗೆ ಲಾಜಿಕಲ್ ಮೌಲ್ಯಗಳ ಬಗ್ಗೆ ಇನ್ನೂ ಚರ್ಚಿಸಲಾಗುತ್ತಿದೆ. ಆದರೆ ಲೆವೆಲ್ 2 ರ ಬಿಡುಗಡೆಯೊಂದಿಗೆ, ದಿನನಿತ್ಯದ ಲೇಔಟ್ ಮತ್ತು ಸ್ಟೈಲಿಂಗ್ ಕಾರ್ಯಗಳ ಬಹುಪಾಲು ಈಗ ಸಂಪೂರ್ಣವಾಗಿ ಲಾಜಿಕಲ್ ವಿಧಾನವನ್ನು ಬಳಸಿ ಸಾಧಿಸಬಹುದು.
ಡೆವಲಪರ್‌ಗಳಿಗೆ ಕ್ರಿಯೆಯ ಕರೆ ಸ್ಪಷ್ಟವಾಗಿದೆ: ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳಿಗೆ ಡೀಫಾಲ್ಟ್ ಮಾಡಲು ಪ್ರಾರಂಭಿಸಿ. width ಬದಲಿಗೆ inline-size ಅನ್ನು ನಿಮ್ಮ ಗೋ-ಟು ಮಾಡಿ. ಎಡ ಮತ್ತು ಬಲ ಮಾರ್ಜಿನ್‌ಗಳನ್ನು ಪ್ರತ್ಯೇಕವಾಗಿ ಸೆಟ್ ಮಾಡುವ ಬದಲು margin-inline ಬಳಸಿ. ಇದು ಕೇವಲ ವಿಭಿನ್ನ ಭಾಷೆಗಳನ್ನು ಬೆಂಬಲಿಸುವುದರ ಬಗ್ಗೆ ಅಲ್ಲ; ಇದು ಉತ್ತಮ, ಹೆಚ್ಚು ಸ್ಥಿತಿಸ್ಥಾಪಕ CSS ಬರೆಯುವುದರ ಬಗ್ಗೆ. ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್‌ನೊಂದಿಗೆ ನಿರ್ಮಿಸಲಾದ ಕಾಂಪೊನೆಂಟ್ LTR, RTL, ಅಥವಾ ಲಂಬ ಲೇಔಟ್‌ನಲ್ಲಿ ಬಳಸಿದರೂ, ಸ್ವಾಭಾವಿಕವಾಗಿ ಹೆಚ್ಚು ಮರುಬಳಕೆ ಮಾಡಬಲ್ಲ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳಬಲ್ಲದು. ಇದು ಸರಳವಾಗಿ ಉತ್ತಮ ಎಂಜಿನಿಯರಿಂಗ್ ಆಗಿದೆ.
ತೀರ್ಮಾನ: ಹರಿವನ್ನು ಅಪ್ಪಿಕೊಳ್ಳಿ
CSS ಲಾಜಿಕಲ್ ಪ್ರಾಪರ್ಟೀಸ್ ಲೆವೆಲ್ 2 ಕೇವಲ ಹೊಸ ವೈಶಿಷ್ಟ್ಯಗಳ ಸಂಗ್ರಹವಲ್ಲ; ಇದು ಒಂದು ದೃಷ್ಟಿಯ ಪೂರ್ಣಗೊಳಿಸುವಿಕೆ. ಇದು ತಮ್ಮ ಕಂಟೆಂಟ್‌ನ ನೈಸರ್ಗಿಕ ಹರಿವನ್ನು ಗೌರವಿಸುವ ಲೇಔಟ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಅಗತ್ಯವಾದ ಅಂತಿಮ, ನಿರ್ಣಾಯಕ ತುಣುಕುಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ, ಆ ಹರಿವು ಯಾವುದೇ ಇರಲಿ. float: inline-start ಮತ್ತು border-start-start-radius ನಂತಹ ಪ್ರಾಪರ್ಟೀಸ್‌ಗಳನ್ನು ಅಪ್ಪಿಕೊಳ್ಳುವ ಮೂಲಕ, ನಾವು ನಮ್ಮ ಕರಕುಶಲತೆಯನ್ನು ಕೇವಲ ಪರದೆಯ ಮೇಲೆ ಪೆಟ್ಟಿಗೆಗಳನ್ನು ಇರಿಸುವುದರಿಂದ, ನಿಜವಾದ ಜಾಗತಿಕ, ಅಂತರ್ಗತ, ಮತ್ತು ಭವಿಷ್ಯ-ನಿರೋಧಕ ವೆಬ್ ಅನುಭವಗಳನ್ನು ವಿನ್ಯಾಸಗೊಳಿಸುವ ಮಟ್ಟಕ್ಕೆ ಏರಿಸುತ್ತೇವೆ.
ಮುಂದಿನ ಬಾರಿ ನೀವು ಹೊಸ ಪ್ರಾಜೆಕ್ಟ್ ಪ್ರಾರಂಭಿಸಿದಾಗ ಅಥವಾ ಹೊಸ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ನಿರ್ಮಿಸಿದಾಗ, margin-left ಎಂದು ಟೈಪ್ ಮಾಡುವ ಮೊದಲು ವಿರಾಮಗೊಳಿಸಿ. ನಿಮ್ಮನ್ನು ಕೇಳಿಕೊಳ್ಳಿ, "ನಾನು ಎಡಭಾಗವನ್ನು ಅರ್ಥೈಸುತ್ತಿದ್ದೇನೆಯೇ, ಅಥವಾ ನಾನು ಪ್ರಾರಂಭವನ್ನು ಅರ್ಥೈಸುತ್ತಿದ್ದೇನೆಯೇ?" ಆ ಸಣ್ಣ ಮಾನಸಿಕ ಬದಲಾವಣೆಯನ್ನು ಮಾಡುವ ಮೂಲಕ, ನೀವು ಎಲ್ಲೆಡೆ, ಪ್ರತಿಯೊಬ್ಬರಿಗೂ ಹೆಚ್ಚು ಹೊಂದಿಕೊಳ್ಳುವ ಮತ್ತು ಪ್ರವೇಶಿಸಬಹುದಾದ ವೆಬ್‌ಗೆ ಕೊಡುಗೆ ನೀಡುತ್ತೀರಿ.