ಸಿಎಸ್ಎಸ್ ಫೀಚರ್ ಕ್ವೆರೀಸ್ ಹಂತ 2: ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಗಾಗಿ ವರ್ಧಿತ ಸಾಮರ್ಥ್ಯ ಪತ್ತೆ

ವೆಬ್ ಅಭಿವೃದ್ಧಿಯು ವಿಕಸನಗೊಳ್ಳುತ್ತಲೇ ಇರುವುದರಿಂದ, ವಿವಿಧ ಶ್ರೇಣಿಯ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಸಾಧನಗಳಲ್ಲಿ ಹೊಂದಾಣಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವುದು ಹೆಚ್ಚು ನಿರ್ಣಾಯಕವಾಗುತ್ತದೆ. ಸಿಎಸ್ಎಸ್ ಫೀಚರ್ ಕ್ವೆರೀಸ್, ವಿಶೇಷವಾಗಿ ಹಂತ 2 ರಲ್ಲಿ ಪರಿಚಯಿಸಲಾದ ಸುಧಾರಣೆಗಳೊಂದಿಗೆ, ನಿರ್ದಿಷ್ಟ ಸಿಎಸ್ಎಸ್ ಫೀಚರ್‌ಗಳಿಗೆ ಬ್ರೌಸರ್ ಬೆಂಬಲವನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಮತ್ತು ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು ಪ್ರಬಲ ಯಾಂತ್ರಿಕತೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಇದು ಡೆವಲಪರ್‌ಗಳಿಗೆ ಪ್ರಗತಿಪರ ವರ್ಧನೆಯನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ, ಹೊಂದಾಣಿಕೆಯ ಬ್ರೌಸರ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗೆ ಆಧುನಿಕ ಅನುಭವವನ್ನು ನೀಡುತ್ತದೆ ಮತ್ತು ಹಳೆಯ ಅಥವಾ ಕಡಿಮೆ ಸಾಮರ್ಥ್ಯದ ಸಿಸ್ಟಮ್‌ಗಳನ್ನು ಹೊಂದಿರುವವರಿಗೆ ಉತ್ತಮ ಫಾಲ್‌ಬ್ಯಾಕ್ ಒದಗಿಸುತ್ತದೆ.

ಸಿಎಸ್ಎಸ್ ಫೀಚರ್ ಕ್ವೆರೀಸ್ ಎಂದರೇನು?

@supports ನಿಯಮವನ್ನು ಬಳಸಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾದ ಸಿಎಸ್ಎಸ್ ಫೀಚರ್ ಕ್ವೆರೀಸ್, ಬ್ರೌಸರ್ ನಿರ್ದಿಷ್ಟ ಸಿಎಸ್ಎಸ್ ಪ್ರಾಪರ್ಟಿ ಮತ್ತು ಮೌಲ್ಯವನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆಯೇ ಎಂಬುದರ ಆಧಾರದ ಮೇಲೆ ಸಿಎಸ್ಎಸ್ ಶೈಲಿಗಳನ್ನು ಷರತ್ತುಬದ್ಧವಾಗಿ ಅನ್ವಯಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಲೇಔಟ್ ಅಥವಾ ಕಾರ್ಯವನ್ನು ಮುರಿಯುವ ಭಯವಿಲ್ಲದೆ ಹೊಸ ಸಿಎಸ್ಎಸ್ ಫೀಚರ್‌ಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಬ್ರೌಸರ್ ಸ್ನಿಫಿಂಗ್ (ಸಾಮಾನ್ಯವಾಗಿ ಇದನ್ನು ವಿರೋಧಿಸಲಾಗುತ್ತದೆ) ಮೇಲೆ ಅವಲಂಬಿಸುವ ಬದಲು, ಫೀಚರ್ ಕ್ವೆರೀಸ್ ಸಾಮರ್ಥ್ಯ ಪತ್ತೆಗೆ ಹೆಚ್ಚು ವಿಶ್ವಾಸಾರ್ಹ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ವಿಧಾನವನ್ನು ನೀಡುತ್ತದೆ.

ಮೂಲಭೂತ ಸಿಂಟ್ಯಾಕ್ಸ್

ಫೀಚರ್ ಕ್ವೆರಿಯ ಮೂಲಭೂತ ಸಿಂಟ್ಯಾಕ್ಸ್ ಈ ಕೆಳಗಿನಂತಿರುತ್ತದೆ:

            @supports (property: value) {
  /* CSS rules to apply if the browser supports the property:value */
}
            

              
                Copy
              
            
          

ಉದಾಹರಣೆಗೆ, ಬ್ರೌಸರ್ display: grid ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು, ನೀವು ಇದನ್ನು ಬಳಸುತ್ತೀರಿ:

            @supports (display: grid) {
  /* CSS rules for grid layout */
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }
}
            

              
                Copy
              
            
          

ಬ್ರೌಸರ್ display: grid ಅನ್ನು ಬೆಂಬಲಿಸಿದರೆ, @supports ಬ್ಲಾಕ್‌ನೊಳಗಿನ ಸಿಎಸ್ಎಸ್ ನಿಯಮಗಳು ಅನ್ವಯವಾಗುತ್ತವೆ; ಇಲ್ಲದಿದ್ದರೆ, ಅವುಗಳನ್ನು ನಿರ್ಲಕ್ಷಿಸಲಾಗುತ್ತದೆ.

ಸಿಎಸ್ಎಸ್ ಫೀಚರ್ ಕ್ವೆರೀಸ್ ಹಂತ 2 ರಲ್ಲಿನ ಪ್ರಮುಖ ಸುಧಾರಣೆಗಳು

ಸಿಎಸ್ಎಸ್ ಫೀಚರ್ ಕ್ವೆರೀಸ್ ಹಂತ 2 ಆರಂಭಿಕ ನಿರ್ದಿಷ್ಟತೆಗಿಂತ ಹಲವಾರು ಗಮನಾರ್ಹ ಸುಧಾರಣೆಗಳನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ, ಸಾಮರ್ಥ್ಯ ಪತ್ತೆಹಚ್ಚುವಿಕೆಯಲ್ಲಿ ಹೆಚ್ಚಿನ ನಮ್ಯತೆ ಮತ್ತು ನಿಯಂತ್ರಣವನ್ನು ನೀಡುತ್ತದೆ. ಅತ್ಯಂತ ಗಮನಾರ್ಹ ವರ್ಧನೆಗಳು ಇವುಗಳನ್ನು ಒಳಗೊಂಡಿವೆ:

• ಸಂಕೀರ್ಣ ಕ್ವೆರಿಗಳು: ಹಂತ 2 ನಿಮಗೆ and, or, ಮತ್ತು not ನಂತಹ ತಾರ್ಕಿಕ ಆಪರೇಟರ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಬಹು ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು ಸಂಯೋಜಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.
• ಸಿಎಸ್ಎಸ್ ಮೌಲ್ಯಗಳಲ್ಲಿ supports() ಫಂಕ್ಷನ್: ನೀವು ಈಗ ಸಿಎಸ್ಎಸ್ ಪ್ರಾಪರ್ಟಿ ಮೌಲ್ಯಗಳಲ್ಲಿ ನೇರವಾಗಿ supports() ಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸಬಹುದು.

ತಾರ್ಕಿಕ ಆಪರೇಟರ್‌ಗಳೊಂದಿಗೆ ಸಂಕೀರ್ಣ ಕ್ವೆರಿಗಳು

ತಾರ್ಕಿಕ ಆಪರೇಟರ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಬಹು ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು ಸಂಯೋಜಿಸುವ ಸಾಮರ್ಥ್ಯವು ಷರತ್ತುಬದ್ಧ ಸ್ಟೈಲಿಂಗ್‌ಗಾಗಿ ಸಾಧ್ಯತೆಗಳನ್ನು ಗಮನಾರ್ಹವಾಗಿ ವಿಸ್ತರಿಸುತ್ತದೆ. ಇದು ನಿರ್ದಿಷ್ಟ ಫೀಚರ್‌ಗಳ ಸಂಯೋಜನೆಯನ್ನು ಬೆಂಬಲಿಸುವ ಬ್ರೌಸರ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

and ಆಪರೇಟರ್ ಬಳಸುವುದು

and ಆಪರೇಟರ್ ಸಿಎಸ್ಎಸ್ ನಿಯಮಗಳನ್ನು ಅನ್ವಯಿಸಲು ಎಲ್ಲಾ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಷರತ್ತುಗಳನ್ನು ಪೂರೈಸಬೇಕಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಬ್ರೌಸರ್ display: flex ಮತ್ತು position: sticky ಎರಡನ್ನೂ ಬೆಂಬಲಿಸುತ್ತದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು, ನೀವು ಹೀಗೆ ಬಳಸುತ್ತೀರಿ:

            @supports (display: flex) and (position: sticky) {
  /* CSS rules to apply if both flexbox and sticky positioning are supported */
  .element {
    display: flex;
    position: sticky;
    top: 0;
  }
}
            

              
                Copy
              
            
          

ಇದು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಲೇಔಟ್ ಮತ್ತು ಸ್ಟಿಕ್ಕಿ ಪೊಸಿಶನಿಂಗ್ ಎರಡನ್ನೂ ನಿರ್ವಹಿಸಬಲ್ಲ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಮಾತ್ರ ಶೈಲಿಗಳು ಅನ್ವಯವಾಗುವುದನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ, ಸ್ಥಿರ ಮತ್ತು ನಿರೀಕ್ಷಿತ ಅನುಭವವನ್ನು ಒದಗಿಸುತ್ತದೆ.

or ಆಪರೇಟರ್ ಬಳಸುವುದು

or ಆಪರೇಟರ್ ಸಿಎಸ್ಎಸ್ ನಿಯಮಗಳನ್ನು ಅನ್ವಯಿಸಲು ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಷರತ್ತುಗಳಲ್ಲಿ ಕನಿಷ್ಠ ಒಂದನ್ನಾದರೂ ಪೂರೈಸಬೇಕಾಗುತ್ತದೆ. ಇದೇ ರೀತಿಯ ಪರಿಣಾಮವನ್ನು ಸಾಧಿಸುವ ವಿಭಿನ್ನ ಫೀಚರ್‌ಗಳ ಬೆಂಬಲದ ಆಧಾರದ ಮೇಲೆ ಪರ್ಯಾಯ ಶೈಲಿಗಳನ್ನು ಒದಗಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ. ಉದಾಹರಣೆಗೆ, ಯಾವುದು ಬೆಂಬಲಿತವಾಗಿದೆ ಎಂಬುದನ್ನು ಅವಲಂಬಿಸಿ ನೀವು display: grid ಅಥವಾ display: flex ಅನ್ನು ಬಳಸಲು ಬಯಸಬಹುದು:

            @supports (display: grid) or (display: flex) {
  /* CSS rules to apply if either grid or flexbox is supported */
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }

  @supports not (display: grid) {
    .container {
      display: flex;
      flex-wrap: wrap;
    }
    .container > * {
        width: calc(33.333% - 10px);
        margin-bottom: 10px;
    }
  }
}
            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಬ್ರೌಸರ್ display: grid ಅನ್ನು ಬೆಂಬಲಿಸಿದರೆ, ಗ್ರಿಡ್ ಲೇಔಟ್ ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಅದು ಗ್ರಿಡ್ ಅನ್ನು ಬೆಂಬಲಿಸದಿದ್ದರೆ ಆದರೆ ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಅನ್ನು ಬೆಂಬಲಿಸಿದರೆ, ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್ ಲೇಔಟ್ ಅನ್ನು ಬಳಸಲಾಗುತ್ತದೆ. ಇದು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿಯೂ ಸಹ ಸೂಕ್ತವಾದ ಲೇಔಟ್ ಅನ್ನು ಖಚಿತಪಡಿಸುವ ಫಾಲ್‌ಬ್ಯಾಕ್ ಯಾಂತ್ರಿಕತೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ.

not ಆಪರೇಟರ್ ಬಳಸುವುದು

not ಆಪರೇಟರ್ ನಿರ್ದಿಷ್ಟಪಡಿಸಿದ ಷರತ್ತನ್ನು ನಿರಾಕರಿಸುತ್ತದೆ. ನಿರ್ದಿಷ್ಟ ಫೀಚರ್ ಅನ್ನು ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳನ್ನು ಗುರಿಯಾಗಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ. ಉದಾಹರಣೆಗೆ, backdrop-filter ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಮಾತ್ರ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು, ನೀವು ಹೀಗೆ ಬಳಸುತ್ತೀರಿ:

            @supports not (backdrop-filter: blur(10px)) {
  /* CSS rules to apply if backdrop-filter is not supported */
  .modal {
    background-color: rgba(0, 0, 0, 0.5);
  }
}
            

              
                Copy
              
            
          

ಇದು ಬ್ಯಾಕ್‌ಡ್ರಾಪ್ ಫಿಲ್ಟರ್ ಪರಿಣಾಮವನ್ನು ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಮಾಡಲ್ ವಿಂಡೋಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್ ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ಒದಗಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಓದುವಿಕೆ ಮತ್ತು ದೃಶ್ಯ ಸ್ಪಷ್ಟತೆಯನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.

ಸಿಎಸ್ಎಸ್ ಮೌಲ್ಯಗಳಲ್ಲಿ supports() ಫಂಕ್ಷನ್

ಹಂತ 2 ರಲ್ಲಿ ಒಂದು ಮಹತ್ವದ ಸೇರ್ಪಡೆಯೆಂದರೆ ಸಿಎಸ್ಎಸ್ ಪ್ರಾಪರ್ಟಿ ಮೌಲ್ಯಗಳಲ್ಲಿ ನೇರವಾಗಿ supports() ಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸುವ ಸಾಮರ್ಥ್ಯ. ಇದು ಷರತ್ತುಬದ್ಧ ಸ್ಟೈಲಿಂಗ್ ಮೇಲೆ ಇನ್ನಷ್ಟು ಸೂಕ್ಷ್ಮ-ಧಾನ್ಯ ನಿಯಂತ್ರಣವನ್ನು ಅನುಮತಿಸುತ್ತದೆ, ಫೀಚರ್ ಬೆಂಬಲದ ಆಧಾರದ ಮೇಲೆ ಪ್ರಾಪರ್ಟಿ ಮೌಲ್ಯಗಳನ್ನು ಸರಿಹೊಂದಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಸಿಎಸ್ಎಸ್ ಮೌಲ್ಯಗಳಲ್ಲಿ supports() ಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸುವ ಸಿಂಟ್ಯಾಕ್ಸ್ ಈ ಕೆಳಗಿನಂತಿರುತ್ತದೆ:

            property: supports(condition, value1, value2);
            

              
                Copy
              
            
          

condition ಪೂರೈಸಿದರೆ, value1 ಅನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ; ಇಲ್ಲದಿದ್ದರೆ, value2 ಅನ್ನು ಅನ್ವಯಿಸಲಾಗುತ್ತದೆ.

ಉದಾಹರಣೆಗೆ, ಬ್ರೌಸರ್ ಅದನ್ನು ಬೆಂಬಲಿಸಿದರೆ ಮಾತ್ರ blur ಪರಿಣಾಮದೊಂದಿಗೆ filter ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬಳಸಲು, ನೀವು ಹೀಗೆ ಬಳಸಬಹುದು:

            .element {
  filter: supports(blur(5px), blur(5px), none);
}
            

              
                Copy
              
            
          

ಬ್ರೌಸರ್ blur() ಫಿಲ್ಟರ್ ಫಂಕ್ಷನ್ ಅನ್ನು ಬೆಂಬಲಿಸಿದರೆ, filter ಪ್ರಾಪರ್ಟಿಯನ್ನು blur(5px) ಗೆ ಹೊಂದಿಸಲಾಗುತ್ತದೆ; ಇಲ್ಲದಿದ್ದರೆ, ಅದನ್ನು none ಗೆ ಹೊಂದಿಸಲಾಗುತ್ತದೆ.

ಉದಾಹರಣೆ: ಬಣ್ಣದ ಫಂಕ್ಷನ್‌ಗಳಿಗಾಗಿ supports() ಬಳಸುವುದು

ಬಣ್ಣಗಳನ್ನು ಮಿಶ್ರಣ ಮಾಡಲು ತುಲನಾತ್ಮಕವಾಗಿ ಹೊಸ ಸಿಎಸ್ಎಸ್ ಫೀಚರ್ ಆಗಿರುವ color-mix() ಫಂಕ್ಷನ್ ಅನ್ನು ನೀವು ಬಳಸಲು ಬಯಸುವ ಸನ್ನಿವೇಶವನ್ನು ಪರಿಗಣಿಸಿ. ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳೊಂದಿಗೆ ಹೊಂದಾಣಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು, ಫಾಲ್‌ಬ್ಯಾಕ್ ಬಣ್ಣವನ್ನು ಒದಗಿಸಲು ನೀವು supports() ಫಂಕ್ಷನ್ ಅನ್ನು ಬಳಸಬಹುದು:

            .button {
  background-color: supports(color-mix(in srgb, blue 40%, red), color-mix(in srgb, blue 40%, red), purple);
}
            

              
                Copy
              
            
          

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಬ್ರೌಸರ್ color-mix() ಅನ್ನು ಬೆಂಬಲಿಸಿದರೆ, ಹಿನ್ನೆಲೆ ಬಣ್ಣವು ನೀಲಿ ಮತ್ತು ಕೆಂಪು ಬಣ್ಣಗಳ ಮಿಶ್ರಣವಾಗಿರುತ್ತದೆ. ಇಲ್ಲದಿದ್ದರೆ, ಹಿನ್ನೆಲೆ ಬಣ್ಣವನ್ನು ನೇರಳೆ ಬಣ್ಣಕ್ಕೆ ಹೊಂದಿಸಲಾಗುತ್ತದೆ, ದೃಷ್ಟಿಗೆ ಸ್ವೀಕಾರಾರ್ಹ ಪರ್ಯಾಯವನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಪ್ರಾಯೋಗಿಕ ಉದಾಹರಣೆಗಳು ಮತ್ತು ಬಳಕೆಯ ಸಂದರ್ಭಗಳು

ಸಿಎಸ್ಎಸ್ ಫೀಚರ್ ಕ್ವೆರೀಸ್ ಹಂತ 2 ಆಧುನಿಕ ವೆಬ್ ಅಭಿವೃದ್ಧಿಯಲ್ಲಿ ವ್ಯಾಪಕ ಶ್ರೇಣಿಯ ಪ್ರಾಯೋಗಿಕ ಅನ್ವಯಿಕೆಗಳನ್ನು ನೀಡುತ್ತದೆ. ಅದರ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ನೀವು ಹೇಗೆ ಬಳಸಿಕೊಳ್ಳಬಹುದು ಎಂಬುದನ್ನು ಪ್ರದರ್ಶಿಸುವ ಕೆಲವು ಉದಾಹರಣೆಗಳು ಇಲ್ಲಿವೆ:

ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳಿಗಾಗಿ (ಸಿಎಸ್ಎಸ್ ವೇರಿಯಬಲ್ಸ್) ಪ್ರಗತಿಪರ ವರ್ಧನೆ

ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳು (ಸಿಎಸ್ಎಸ್ ವೇರಿಯಬಲ್ಸ್) ಶೈಲಿಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಮತ್ತು ಡೈನಾಮಿಕ್ ಥೀಮ್‌ಗಳನ್ನು ರಚಿಸಲು ಪ್ರಬಲ ಸಾಧನವಾಗಿದೆ. ಆದಾಗ್ಯೂ, ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳು ಅವುಗಳನ್ನು ಬೆಂಬಲಿಸದಿರಬಹುದು. ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳಿಗಾಗಿ ಫಾಲ್‌ಬ್ಯಾಕ್ ಮೌಲ್ಯಗಳನ್ನು ಒದಗಿಸಲು ನೀವು ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಬಹುದು:

            :root {
  --primary-color: #007bff;
}

@supports (var(--primary-color)) {
  /* Use custom property if supported */
  .button {
    background-color: var(--primary-color);
    color: white;
  }
} @supports not (var(--primary-color)) {
  /* Provide a fallback color if custom properties are not supported */
  .button {
    background-color: #007bff; /* Fallback color */
    color: white;
  }
}
            

              
                Copy
              
            
          

ಬ್ರೌಸರ್ ಕಸ್ಟಮ್ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬೆಂಬಲಿಸದಿದ್ದರೂ ಸಹ, ಬಟನ್ ಯಾವಾಗಲೂ ಪ್ರಾಥಮಿಕ ಬಣ್ಣವನ್ನು ಹೊಂದಿರುತ್ತದೆ ಎಂಬುದನ್ನು ಇದು ಖಚಿತಪಡಿಸುತ್ತದೆ.

font-variant ನೊಂದಿಗೆ ಮುದ್ರಣಕಲೆಯನ್ನು ಹೆಚ್ಚಿಸುವುದು

font-variant ಪ್ರಾಪರ್ಟಿಯು ಸಣ್ಣ ಕ್ಯಾಪ್ಸ್, ಲಿಗೇಚರ್‌ಗಳು ಮತ್ತು ಐತಿಹಾಸಿಕ ರೂಪಗಳಂತಹ ಸುಧಾರಿತ ಮುದ್ರಣಕಲೆಯ ಫೀಚರ್‌ಗಳನ್ನು ನೀಡುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಈ ಫೀಚರ್‌ಗಳ ಬೆಂಬಲವು ಬ್ರೌಸರ್‌ಗಳಾದ್ಯಂತ ಬದಲಾಗಬಹುದು. ಬ್ರೌಸರ್ ಬೆಂಬಲದ ಆಧಾರದ ಮೇಲೆ ಈ ಫೀಚರ್‌ಗಳನ್ನು ಆಯ್ದುಕೊಂಡು ಸಕ್ರಿಯಗೊಳಿಸಲು ನೀವು ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಬಹುದು:

            .text {
  font-family: 'YourCustomFont', sans-serif;
}

@supports (font-variant-caps: small-caps) {
  .text {
    font-variant-caps: small-caps;
  }
}

            

              
                Copy
              
            
          

ಇದು font-variant-caps ಪ್ರಾಪರ್ಟಿಯನ್ನು ಬೆಂಬಲಿಸುವ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಮಾತ್ರ ಸಣ್ಣ ಕ್ಯಾಪ್ಸ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುತ್ತದೆ, ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಲೇಔಟ್ ಅನ್ನು ಮುರಿಯದೆ ಮುದ್ರಣಕಲೆಯನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.

ಸುಧಾರಿತ ಲೇಔಟ್ ತಂತ್ರಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು

ಗ್ರಿಡ್ ಮತ್ತು ಫ್ಲೆಕ್ಸ್‌ಬಾಕ್ಸ್‌ನಂತಹ ಆಧುನಿಕ ಸಿಎಸ್ಎಸ್ ಲೇಔಟ್ ತಂತ್ರಗಳು ಸಂಕೀರ್ಣ ಮತ್ತು ರೆಸ್ಪಾನ್ಸಿವ್ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಪ್ರಬಲ ಸಾಧನಗಳನ್ನು ನೀಡುತ್ತವೆ. ಆದಾಗ್ಯೂ, ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳು ಈ ಫೀಚರ್‌ಗಳನ್ನು ಸಂಪೂರ್ಣವಾಗಿ ಬೆಂಬಲಿಸದಿರಬಹುದು. ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಪರ್ಯಾಯ ಲೇಔಟ್‌ಗಳನ್ನು ಒದಗಿಸಲು ನೀವು ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಬಹುದು:

            .container {
  /* Basic layout for older browsers */
  float: left;
  width: 33.333%;
}

@supports (display: grid) {
  /* Use Grid layout for modern browsers */
  .container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
  }
  .container > * {
      float: none;
      width: auto;
  }
}

            

              
                Copy
              
            
          

ಇದು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಲೇಔಟ್ ಕಾರ್ಯಸಾಧ್ಯ ಮತ್ತು ದೃಷ್ಟಿಗೆ ಸ್ವೀಕಾರಾರ್ಹವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸುತ್ತದೆ ಮತ್ತು ಆಧುನಿಕ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಹೆಚ್ಚು ಸುಧಾರಿತ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಲೇಔಟ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಬಾಹ್ಯ ಸಂಪನ್ಮೂಲಗಳ ಷರತ್ತುಬದ್ಧ ಲೋಡಿಂಗ್

ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು ಪ್ರಾಥಮಿಕವಾಗಿ ಷರತ್ತುಬದ್ಧ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು ಬಳಸಲಾಗುತ್ತದೆಯಾದರೂ, ಸ್ಟೈಲ್‌ಶೀಟ್‌ಗಳು ಅಥವಾ ಸ್ಕ್ರಿಪ್ಟ್‌ಗಳಂತಹ ಬಾಹ್ಯ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಷರತ್ತುಬದ್ಧವಾಗಿ ಲೋಡ್ ಮಾಡಲು ನೀವು ಅವುಗಳನ್ನು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನೊಂದಿಗೆ ಸಹ ಬಳಸಬಹುದು. ನಿರ್ದಿಷ್ಟ ಬ್ರೌಸರ್‌ಗಳಿಗಾಗಿ ಪಾಲಿಫಿಲ್‌ಗಳು ಅಥವಾ ವಿಶೇಷ ಸಿಎಸ್ಎಸ್ ಫೈಲ್‌ಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ಇದು ಉಪಯುಕ್ತವಾಗಬಹುದು.

            if (CSS.supports('display', 'grid')) {
  // Load the Grid layout stylesheet
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'grid-layout.css';
  document.head.appendChild(link);
} else {
  // Load the fallback stylesheet
  var link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'fallback-layout.css';
  document.head.appendChild(link);
}
            

              
                Copy
              
            
          

ಈ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಕೋಡ್ ಬ್ರೌಸರ್ display: grid ಅನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ. ಹಾಗಿದ್ದಲ್ಲಿ, ಅದು grid-layout.css ಸ್ಟೈಲ್‌ಶೀಟ್ ಅನ್ನು ಲೋಡ್ ಮಾಡುತ್ತದೆ; ಇಲ್ಲದಿದ್ದರೆ, ಅದು fallback-layout.css ಸ್ಟೈಲ್‌ಶೀಟ್ ಅನ್ನು ಲೋಡ್ ಮಾಡುತ್ತದೆ.

ಸಿಎಸ್ಎಸ್ ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಸಿಎಸ್ಎಸ್ ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸಿಕೊಳ್ಳಲು, ಈ ಕೆಳಗಿನ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಪರಿಗಣಿಸಿ:

• ದೃಢವಾದ ಮೂಲಾಧಾರದೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸಿ: ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ಮೂಲಭೂತ ಲೇಔಟ್ ಮತ್ತು ಸ್ಟೈಲಿಂಗ್ ಅನ್ನು ರಚಿಸುವ ಮೂಲಕ ಪ್ರಾರಂಭಿಸಿ. ಇದು ಬ್ರೌಸರ್ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಲೆಕ್ಕಿಸದೆ, ಎಲ್ಲಾ ಬಳಕೆದಾರರಿಗೆ ಕ್ರಿಯಾತ್ಮಕ ಅನುಭವವನ್ನು ಖಚಿತಪಡಿಸುತ್ತದೆ.
• ಪ್ರಗತಿಪರ ವರ್ಧನೆಗಾಗಿ ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಿ: ಅವುಗಳನ್ನು ಬೆಂಬಲಿಸುವ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಸುಧಾರಿತ ಶೈಲಿಗಳು ಮತ್ತು ಫೀಚರ್‌ಗಳನ್ನು ಆಯ್ದುಕೊಂಡು ಅನ್ವಯಿಸಲು ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಿ. ಇದು ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಲೇಔಟ್ ಅನ್ನು ಮುರಿಯದೆ ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
• ಸಂಪೂರ್ಣವಾಗಿ ಪರೀಕ್ಷಿಸಿ: ಫೀಚರ್ ಕ್ವೆರಿಗಳು ನಿರೀಕ್ಷೆಯಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತಿವೆಯೇ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅಥವಾ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ವಿವಿಧ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಸಾಧನಗಳಲ್ಲಿ ಪರೀಕ್ಷಿಸಿ. ಅನ್ವಯಿಕ ಶೈಲಿಗಳನ್ನು ಪರೀಕ್ಷಿಸಲು ಮತ್ತು ಬ್ರೌಸರ್ ಬೆಂಬಲದ ಆಧಾರದ ಮೇಲೆ ಸರಿಯಾದ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಲು ಬ್ರೌಸರ್ ಡೆವಲಪರ್ ಪರಿಕರಗಳನ್ನು ಬಳಸಿ.
• ಕ್ವೆರಿಗಳನ್ನು ಸರಳ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲಂತೆ ಇರಿಸಿ: ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ನಿರ್ವಹಿಸಲು ಕಷ್ಟಕರವಾದ ಅತಿಯಾದ ಸಂಕೀರ್ಣ ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು ರಚಿಸುವುದನ್ನು ತಪ್ಪಿಸಿ. ಸ್ಪಷ್ಟ ಮತ್ತು ಸಂಕ್ಷಿಪ್ತ ಸಿಂಟ್ಯಾಕ್ಸ್ ಬಳಸಿ, ಮತ್ತು ಅವುಗಳ ಉದ್ದೇಶವನ್ನು ವಿವರಿಸಲು ನಿಮ್ಮ ಕ್ವೆರಿಗಳನ್ನು ದಾಖಲಿಸಿ.
• ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಪರಿಗಣಿಸಿ: ಫೀಚರ್ ಕ್ವೆರಿಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಸಮರ್ಥವಾಗಿದ್ದರೂ, ನೀವು ಬಳಸುವ ಕ್ವೆರಿಗಳ ಸಂಖ್ಯೆ ಮತ್ತು ಪ್ರತಿ ಕ್ವೆರಿಯೊಳಗಿನ ಶೈಲಿಗಳ ಸಂಕೀರ್ಣತೆಯ ಬಗ್ಗೆ ಗಮನವಿರಲಿ. ಫೀಚರ್ ಕ್ವೆರಿಗಳ ಅತಿಯಾದ ಬಳಕೆಯು ವಿಶೇಷವಾಗಿ ಹಳೆಯ ಸಾಧನಗಳಲ್ಲಿ ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರಬಹುದು.
• ಅಗತ್ಯವಿದ್ದಾಗ ಪಾಲಿಫಿಲ್‌ಗಳನ್ನು ಬಳಸಿ: ವ್ಯಾಪಕವಾಗಿ ಬೆಂಬಲಿಸದ ಕೆಲವು ಫೀಚರ್‌ಗಳಿಗಾಗಿ, ಹಳೆಯ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿ ಹೊಂದಾಣಿಕೆಯನ್ನು ಒದಗಿಸಲು ಪಾಲಿಫಿಲ್‌ಗಳನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ. ಪಾಲಿಫಿಲ್‌ಗಳು ಕಾಣೆಯಾದ ಕಾರ್ಯವನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಗಳಾಗಿವೆ, ಸ್ಥಳೀಯವಾಗಿ ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳಲ್ಲಿಯೂ ಸಹ ಆಧುನಿಕ ಫೀಚರ್‌ಗಳನ್ನು ಬಳಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಜಾಗತಿಕ ಪರಿಗಣನೆಗಳು ಮತ್ತು ಪ್ರವೇಶಿಸುವಿಕೆ

ಜಾಗತಿಕ ಸಂದರ್ಭದಲ್ಲಿ ಸಿಎಸ್ಎಸ್ ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸುವಾಗ, ಪ್ರವೇಶಿಸುವಿಕೆ ಮತ್ತು ಸಾಂಸ್ಕೃತಿಕ ವ್ಯತ್ಯಾಸಗಳನ್ನು ಪರಿಗಣಿಸುವುದು ಮುಖ್ಯ. ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್ ಅಥವಾ ಅಪ್ಲಿಕೇಶನ್ ಅವರು ಬಳಸುತ್ತಿರುವ ಬ್ರೌಸರ್ ಅನ್ನು ಲೆಕ್ಕಿಸದೆ, ವಿಕಲಾಂಗ ಬಳಕೆದಾರರಿಗೆ ಪ್ರವೇಶಿಸಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಸೆಮ್ಯಾಂಟಿಕ್ HTML ಬಳಸಿ ಮತ್ತು ಚಿತ್ರಗಳು ಮತ್ತು ಇತರ ಪಠ್ಯೇತರ ವಿಷಯಗಳಿಗೆ ಪರ್ಯಾಯ ಪಠ್ಯವನ್ನು ಒದಗಿಸಿ. ವಿಭಿನ್ನ ಭಾಷೆಗಳು ಮತ್ತು ಬರವಣಿಗೆ ವ್ಯವಸ್ಥೆಗಳು ನಿಮ್ಮ ವೆಬ್‌ಸೈಟ್‌ನ ಲೇಔಟ್ ಮತ್ತು ಸ್ಟೈಲಿಂಗ್ ಮೇಲೆ ಹೇಗೆ ಪರಿಣಾಮ ಬೀರಬಹುದು ಎಂಬುದನ್ನು ಪರಿಗಣಿಸಿ. ಉದಾಹರಣೆಗೆ, ಬಲದಿಂದ ಎಡಕ್ಕೆ ಓದುವ ಭಾಷೆಗಳಿಗೆ ಎಡದಿಂದ ಬಲಕ್ಕೆ ಓದುವ ಭಾಷೆಗಳಿಗಿಂತ ವಿಭಿನ್ನ ಸ್ಟೈಲಿಂಗ್ ಬೇಕಾಗಬಹುದು.

ಉದಾಹರಣೆಗೆ, ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳಂತಹ (ಉದಾ., margin-inline-start) ಹೊಸ ಸಿಎಸ್ಎಸ್ ಫೀಚರ್‌ಗಳನ್ನು ಬಳಸುವಾಗ, ಈ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬರವಣಿಗೆಯ ದಿಕ್ಕಿಗೆ ಹೊಂದಿಕೊಳ್ಳಲು ವಿನ್ಯಾಸಗೊಳಿಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ನೆನಪಿಡಿ. ಎಡದಿಂದ ಬಲಕ್ಕೆ ಭಾಷೆಗಳಲ್ಲಿ, margin-inline-start ಎಡ ಅಂಚಿಗೆ ಅನ್ವಯಿಸುತ್ತದೆ, ಆದರೆ ಬಲದಿಂದ ಎಡಕ್ಕೆ ಭಾಷೆಗಳಲ್ಲಿ, ಅದು ಬಲ ಅಂಚಿಗೆ ಅನ್ವಯಿಸುತ್ತದೆ. ತಾರ್ಕಿಕ ಪ್ರಾಪರ್ಟಿಗಳನ್ನು ಬೆಂಬಲಿಸದ ಬ್ರೌಸರ್‌ಗಳಿಗೆ ಫಾಲ್‌ಬ್ಯಾಕ್ ಶೈಲಿಗಳನ್ನು ಒದಗಿಸಲು ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು ಬಳಸಿ, ಎಲ್ಲಾ ಭಾಷೆಗಳಲ್ಲಿ ಲೇಔಟ್ ಸ್ಥಿರವಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ತೀರ್ಮಾನ

ಸಿಎಸ್ಎಸ್ ಫೀಚರ್ ಕ್ವೆರೀಸ್ ಹಂತ 2 ಸಿಎಸ್ಎಸ್ ಫೀಚರ್‌ಗಳಿಗೆ ಬ್ರೌಸರ್ ಬೆಂಬಲವನ್ನು ಪತ್ತೆಹಚ್ಚಲು ಮತ್ತು ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಶೈಲಿಗಳನ್ನು ಅನ್ವಯಿಸಲು ಪ್ರಬಲ ಮತ್ತು ಹೊಂದಿಕೊಳ್ಳುವ ಯಾಂತ್ರಿಕತೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ. ಹಂತ 2 ರ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳುವ ಮೂಲಕ, ಡೆವಲಪರ್‌ಗಳು ಪ್ರಗತಿಪರ ವರ್ಧನೆಯನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದು, ಹೊಂದಾಣಿಕೆಯ ಬ್ರೌಸರ್‌ಗಳನ್ನು ಹೊಂದಿರುವ ಬಳಕೆದಾರರಿಗೆ ಆಧುನಿಕ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ನೀಡುತ್ತದೆ ಮತ್ತು ಹಳೆಯ ಅಥವಾ ಕಡಿಮೆ ಸಾಮರ್ಥ್ಯದ ಸಿಸ್ಟಮ್‌ಗಳನ್ನು ಹೊಂದಿರುವವರಿಗೆ ಉತ್ತಮ ಫಾಲ್‌ಬ್ಯಾಕ್ ಒದಗಿಸುತ್ತದೆ. ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ ಮತ್ತು ಜಾಗತಿಕ ಮತ್ತು ಪ್ರವೇಶಿಸುವಿಕೆ ಪರಿಗಣನೆಗಳನ್ನು ಪರಿಗಣಿಸುವ ಮೂಲಕ, ನೀವು ವಿವಿಧ ಶ್ರೇಣಿಯ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು ಸಾಧನಗಳಲ್ಲಿ ಉತ್ತಮವಾಗಿ ಕಾರ್ಯನಿರ್ವಹಿಸುವ ದೃಢವಾದ, ನಿರ್ವಹಿಸಬಲ್ಲ ಮತ್ತು ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ವೆಬ್‌ಸೈಟ್‌ಗಳು ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಲು ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಬಳಸಿಕೊಳ್ಳಬಹುದು.

ನಿಮ್ಮ ವೆಬ್ ಅಭಿವೃದ್ಧಿ ಟೂಲ್‌ಕಿಟ್‌ನಲ್ಲಿ ಸಿಎಸ್ಎಸ್ ಫೀಚರ್ ಕ್ವೆರಿಗಳನ್ನು ಅತ್ಯಗತ್ಯ ಸಾಧನವಾಗಿ ಸ್ವೀಕರಿಸಿ ಮತ್ತು ನಿಜವಾದ ಹೊಂದಾಣಿಕೆಯ ಮತ್ತು ಮುಂದಕ್ಕೆ-ಹೊಂದಾಣಿಕೆಯ ವೆಬ್ ಅನುಭವಗಳನ್ನು ರಚಿಸುವ ಸಾಮರ್ಥ್ಯವನ್ನು ಅನ್ಲಾಕ್ ಮಾಡಿ.