From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/uk/web/css/resize/index.html | 212 +++++++++++++++++++++++++++++++++++++ 1 file changed, 212 insertions(+) create mode 100644 files/uk/web/css/resize/index.html (limited to 'files/uk/web/css/resize') diff --git a/files/uk/web/css/resize/index.html b/files/uk/web/css/resize/index.html new file mode 100644 index 0000000000..de5246e7ba --- /dev/null +++ b/files/uk/web/css/resize/index.html @@ -0,0 +1,212 @@ +--- +title: resize +slug: Web/CSS/resize +tags: + - CSS + - CSS Властивість + - Зміна розміру + - Розмір +translation_of: Web/CSS/resize +--- +
{{CSSRef}}
+ +

Зведення

+ +

The resize CSS property lets you control the resizability of an element.

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* Keyword values */
+resize: none;
+resize: both;
+resize: horizontal;
+resize: vertical;
+resize: block;
+resize: inline;
+
+/* Global values */
+resize: inherit;
+resize: initial;
+resize: unset;
+
+ +

Значення

+ +
+
none
+
The element offers no user-controllable method for resizing the element.
+
both
+
The element displays a mechanism for allowing the user to resize the element, which may be resized both horizontally and vertically.
+
horizontal
+
The element displays a mechanism for allowing the user to resize the element, which may only be resized horizontally.
+
vertical
+
The element displays a mechanism for allowing the user to resize the element, which may only be resized vertically.
+
block {{experimental_inline}}
+
Depending on the {{cssxref("writing-mode")}} and {{cssxref("direction")}} value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in block direction.
+
inline {{experimental_inline}}
+
Depending on the {{cssxref("writing-mode")}} and {{cssxref("direction")}} value, the element displays a mechanism for allowing the user to resize the element either horizontally or vertically in inline direction.
+
+ +
Note: resize does not apply to blocks for which the {{cssxref("overflow")}} property is set to visible.
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

Disabling resizability of textareas

+ +

CSS

+ +

By default, {{HTMLElement("textarea")}} elements are resizable in {{gecko("2.0")}} (Firefox 4). You may override this behavior with the CSS shown below:

+ +
textarea.example {
+  resize: none; /* disables resizability */
+}
+
+ +

HTML

+ +
<textarea class="example">Type some text here.</textarea>
+ +

Result

+ +

{{EmbedLiveSample("Disabling_resizability_of_textareas","200","100")}}

+ +

Using resize with arbitrary elements

+ +

You can use the resize property to make any element resizable. In the example below, a resizable {{HTMLElement("div")}} box contains a resizable paragraph ({{HTMLElement("p")}} element):

+ +

CSS

+ +
.resizable {
+  resize: both;
+  overflow: scroll;
+  border: 1px solid black;
+}
+
+div {
+  height: 300px;
+  width: 300px;
+}
+
+p {
+  height: 200px;
+  width: 200px;
+}
+
+ +

HTML

+ +
<div class="resizable">
+  <p class="resizable">
+    This paragraph is resizable, because the CSS resize property is set to 'both' on this
+    element.
+  </p>
+</div>
+
+ +

Result

+ +

{{EmbedLiveSample("Using_resize_with_arbitrary_elements","450","450")}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS Logical Properties', '#resize', 'resize')}}{{Spec2('CSS Logical Properties')}}Adds the values block and inline.
{{SpecName('CSS3 Basic UI', '#resize', 'resize')}}{{Spec2('CSS3 Basic UI')}}Initial definition
+ +

Browser compatibility

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
Basic support (on {{HTMLElement("textarea")}})1.0{{CompatGeckoDesktop("2.0")}}{{property_prefix("-moz")}}{{CompatNo}}12.13.0 (522)
On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is visible)4.0{{CompatGeckoDesktop("5.0")}}[1]{{CompatNo}}154.0
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support (on {{HTMLElement("textarea")}}){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
On any block-level and replaced element, table cell, and inline block element (unless {{cssxref("overflow")}} is visible){{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] resize doesn't have any effect on {{HTMLElement("iframe")}} (cf. {{bug(680823)}})

+ +

See also

+ + -- cgit v1.2.3-54-g00ecf