CSS User Interface

CSS User Interface

Sa kabanatang ito, malalaman mo ang sumusunod na CSS user interface properties:

  • resize
  • outline-offset

Suporta ng Browser

Ang mga numero sa talahanayan ay naglalarawan ng unang bersyon ng browser na ganap na sumusuporta sa attribute na ito.

Attribute Chrome IE Firefox Safari Opera
resize 4.0 Hindi sumusuporta 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS Pag-aayos ng Laki

resize Ang attribute ay nagtutukoy kung sakaling ayusin ng gumagamit ang elemento (at kung paano) na ito.

Ang elemento div na ito ay puwedeng ayusin ng gumagamit!

Pag-aayos ng laki: I-click at i-drag ang kanang ilalim ng elemento div na ito.

Babala:Ang Internet Explorer ay hindi sumusuporta sa resize attribute.

Ang sumusunod na halimbawa ay nagbibigay ng kapangyarihan sa gumagamit na ayusin lamang ang lapad ng elemento <div>:

Sample

div {
  resize: horizontal;
  overflow: auto;
}

Try It Yourself

Ang sumusunod na halimbawa ay nagbibigay ng kapangyarihan sa gumagamit na ayusin lamang ang taas ng elemento <div>:

Sample

div {
  resize: vertical;
  overflow: auto;
}

Try It Yourself

Ang sumusunod na halimbawa ay nagbibigay ng kapangyarihan sa gumagamit na ayusin ang taas at lapad ng elemento <div>:

Sample

div {
  resize: both;
  overflow: auto;
}

Try It Yourself

Sa maraming browser, ang <textarea> ay magkakaroon ng default na pag-aayos ng laki. Dito, gumagamit kami ng resize attribute upang iwanan ang ganitong pag-aayos ng laki:

Sample

textarea {
  resize: none;
}

Try It Yourself

Offset ng Outline ng CSS

outline-offset Ang attribute ay magdagdag ng espasyo sa pagitan ng outline at ang gilid ng elemento.

Ang div na ito ay may 15px na outline sa labas ng gilid ng border.

Babala:Ang outline ay magkaiba sa border! Sa halip na magpakita sa labas ng border ng elemento, ang linya ng outline ay ginawa sa labas at maaring maipapalapit sa ibang nilalaman. Sa karagdagan, ang outline ay hindi bahagi ng laki ng elemento: ang kabuuan ng lapad at taas ng elemento ay hindi naapektuhan ng laki ng linya ng outline.

Ang mga sumusunod na halimbawa ay gumagamit ng outline-offset na attribute upang magdagdag ng espasyo sa pagitan ng border at outline:

Sample

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
} 
div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

Try It Yourself

CSS User Interface Attributes

The following table lists all user interface attributes:

Attribute Description
outline-offset Add space between the outline and the edge of the element's border.
resize Specify whether the element can be resized by the user.