Sobes.tech
Middle

Ի՞նչ են օգտվողի գործակալի ոճերը և ինչպիսի՞ եղանակներ կան դրանց հետ աշխատելու համար։

sobes.tech AI

Պատասխան AI-ից

Օգտագործողի գործակալի ոճերը՝ դա նախնական CSS ոճերի հավաքածու է, որոնք բրաուզերները կիրառում են HTML տարրերին՝ նախքան որեւէ հեղինակային ոճային աղյուսակներ կամ օգտագործողի ոճային աղյուսակներ բեռնելը: Դրանք ապահովում են տարրերի հիմնական տեսքը (օրինակ՝ պարբերականների մաքսիմալ տեղաշարժերը, <strong>-ի հաստ տեքստը):

Նրանքով կարելի է աշխատել հետևյալ կերպ.

  1. Ոճերի վերագրում: Ավելի բարձր հատուկության կամ CSS կոդում հետո հեղինակային ոճերը վերագրում են օգտագործողի գործակալ ոճերին:

    p {
      margin: 0; /* Ստանդարտ մաքսիմալը վերագրում է */
    }
    
  2. CSS Reset կամ Normalize.css օգտագործում: Այս գրադարանները զրոյացնում կամ միավորում են տարրերի հիմնական ոճերը՝ neutralizeելով տարբեր բրաուզերների օգտագործողի գործակալ ոճերի տարբերությունները:

    • Reset CSS: լրիվ հեռացնում է մեծ մասը օգտագործողի գործակալ ոճերից։ Օրինակ՝
      /* Օրինակ՝ Eric Meyer-ի Reset CSS-ից */
      html, body, div, span, applet, object, iframe,
      h1, h2, h3, h4, h5, h6, p, blockquote, pre,
      a, abbr, acronym, address, big, cite, code,
      del, dfn, em, img, ins, kbd, q, s, samp,
      small, strike, strong, sub, sup, tt, var,
      b, u, i, center,
      dl, dt, dd, ol, ul, li,
      fieldset, form, label, legend,
      table, caption, tbody, tfoot, thead, tr, th, td,
      article, aside, canvas, details, embed,
      figure, figcaption, footer, header, hgroup,
      menu, nav, output, ruby, section, summary,
      time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
      }
      /* Բոլոր մնացած reset ոճերը */
      
    • Normalize.css: ուղղում է օգտագործողի գործակալ ոճերը՝ դարձնելով դրանք ավելի համահունչ տարբեր բրաուզերների միջև՝ պահպանելով օգտակար հիմնական ոճերը:
      /* Օրինակ՝ Normalize.css-ից */
      html {
        line-height: 1.15; /* 1 */
        -webkit-text-size-adjust: 100%; /* 2 */
      }
      body {
        margin: 0;
      }
      /* Բոլոր մնացած normalize ոճերը */
      
  3. Տեսնել DevTools-ում: Բրաուզերի մշակման գործիքները թույլ են տալիս տեսնել, թե ինչ օգտագործողի գործակալ ոճեր են կիրառվում կոնկրետ տարրին:

Հասկանալ օգտագործողի գործակալ ոճերը կարևոր է տարրերի կանխատեսելի ցուցադրման և բրաուզերների միջև համատեղելիության ապահովման համար: