From ed2c9751e26d161ad81d86a8d50985cb964d30a1 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:47:01 +0100 Subject: unslug fa: move --- files/fa/web/css/attribute_selectors/index.html | 182 +++++++++++ .../media_queries/using_media_queries/index.html | 331 +++++++++++++++++++++ .../index.html" | 331 --------------------- files/fa/web/css/type_selectors/index.html | 78 +++++ files/fa/web/css/zoom/index.html | 134 +++++++++ .../index.html" | 78 ----- .../index.html" | 182 ----------- .../index.html" | 134 --------- 8 files changed, 725 insertions(+), 725 deletions(-) create mode 100644 files/fa/web/css/attribute_selectors/index.html create mode 100644 files/fa/web/css/media_queries/using_media_queries/index.html delete mode 100644 "files/fa/web/css/media_queries/\330\247\330\250\330\262\330\247\330\261-\330\252\330\263\330\252-\330\261\330\263\330\247\331\206\331\207-\331\276\330\247\330\263\330\256\332\257\331\210/index.html" create mode 100644 files/fa/web/css/type_selectors/index.html create mode 100644 files/fa/web/css/zoom/index.html delete mode 100644 "files/fa/web/css/\330\247\331\206\330\252\330\256\330\247\330\250\332\257\330\261\331\200\331\206\331\210\330\271/index.html" delete mode 100644 "files/fa/web/css/\330\247\331\206\330\252\330\256\330\247\330\250\332\257\330\261\331\200\331\210\333\214\332\230\332\257\333\214/index.html" delete mode 100644 "files/fa/web/css/\330\250\330\262\330\261\332\257\331\206\331\205\330\247\333\214\333\214/index.html" (limited to 'files/fa/web/css') diff --git a/files/fa/web/css/attribute_selectors/index.html b/files/fa/web/css/attribute_selectors/index.html new file mode 100644 index 0000000000..54cf34cd5d --- /dev/null +++ b/files/fa/web/css/attribute_selectors/index.html @@ -0,0 +1,182 @@ +--- +title: انتخابگر ویژگی +slug: Web/CSS/انتخابگرـویژگی +translation_of: Web/CSS/Attribute_selectors +--- +
{{CSSRef}}
+ +

انتخابگر ویژگی بر اساس وجود ویژگی یا مقدار ویژگی انتخاب می‌کند.

+ +
/* را داشته باشند title که ویژگی <a> عنصرهای */
+a[title] {
+  color: purple;
+}
+
+/* باشد "https://example.org" آن برابر با  href که ویژگی  <a> عنصرهای */
+a[href="https://example.org"] {
+  color: green;
+}
+
+/* باشد "example" آن در بردارنده‌ی href که ویژگی <a> عنصرهای */
+a[href*="example"] {
+  font-size: 2em;
+}
+
+/* به پایان رسیده باشد ".org" آن با href که ویژگی <a> عنصرهای */
+a[href$=".org"] {
+  font-style: italic;
+}
+ +
+
[attr]
+
Represents elements with an attribute name of attr.
+
[attr=value]
+
Represents elements with an attribute name of attr whose value is exactly value.
+
[attr~=value]
+
Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.
+
[attr|=value]
+
Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, - (U+002D). It is often used for language subcode matches.
+
[attr^=value]
+
Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.
+
[attr$=value]
+
Represents elements with an attribute name of attr whose value is suffixed (followed) by value.
+
[attr*=value]
+
Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.
+
[attr operator value i]
+
Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).
+
+ +

Examples

+ + + +

CSS

+ +
a {
+  color: blue;
+}
+
+/* Internal links, beginning with "#" */
+a[href^="#"] {
+  background-color: gold;
+}
+
+/* Links with "example" anywhere in the URL */
+a[href*="example"] {
+  background-color: silver;
+}
+
+/* Links with "insensitive" anywhere in the URL,
+   regardless of capitalization */
+a[href*="insensitive" i] {
+  color: cyan;
+}
+
+/* Links that end in ".org" */
+a[href$=".org"] {
+  color: red;
+}
+
+ +

HTML

+ +
<ul>
+  <li><a href="#internal">Internal link</a></li>
+  <li><a href="http://example.com">Example link</a></li>
+  <li><a href="#InSensitive">Insensitive internal link</a></li>
+  <li><a href="http://example.org">Example org link</a></li>
+</ul>
+ +

Result

+ +

{{EmbedLiveSample('Links')}}

+ +

Languages

+ +

CSS

+ +
/* All divs with a `lang` attribute are bold. */
+div[lang] {
+  font-weight: bold;
+}
+
+/* All divs in US English are blue. */
+div[lang~="en-us"] {
+  color: blue;
+}
+
+/* All divs in Portuguese are green. */
+div[lang="pt"] {
+  color: green;
+}
+
+/* All divs in Chinese are red, whether
+   simplified (zh-CN) or traditional (zh-TW). */
+div[lang|="zh"] {
+  color: red;
+}
+
+/* All divs with a Traditional Chinese
+   `data-lang` are purple. */
+/* Note: You could also use hyphenated attributes
+   without double quotes */
+div[data-lang="zh-TW"] {
+  color: purple;
+}
+
+ +

HTML

+ +
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
+<div lang="pt">Olá Mundo!</div>
+<div lang="zh-CN">世界您好！</div>
+<div lang="zh-TW">世界您好！</div>
+<div data-lang="zh-TW">?世界您好！</div>
+
+ +

Result

+ +

{{EmbedLiveSample('Languages')}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Adds modifier for ASCII case-insensitive attribute value selection
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.selectors.attribute")}}

+ +

See also

+ + diff --git a/files/fa/web/css/media_queries/using_media_queries/index.html b/files/fa/web/css/media_queries/using_media_queries/index.html new file mode 100644 index 0000000000..286a3e8ba2 --- /dev/null +++ b/files/fa/web/css/media_queries/using_media_queries/index.html @@ -0,0 +1,331 @@ +--- +title: ابزار تست رسانه پاسخگو +slug: Web/CSS/Media_Queries/ابزار-تست-رسانه-پاسخگو +translation_of: Web/CSS/Media_Queries/Using_media_queries +--- +
{{cssref}}
+ +

 ابزارهای تست پاسخگو بسیار مفید هستند، زمانی که می خواهید سبک CSS را طبق نوع کلی دستگاه (مانند اندازه چاپ در مقابل سایز صفحه نمایش)، ویژگی های خاص (مانند عرض مرورگر رسانه) یا محیط (مانند شرایط نور محیط) استفاده کنید. با انواع مختلفی از دستگاه های متصل به اینترنت که امروزه در دسترس ما هستند و با وجود ابزارهای چند رسانه ای با اندازه های بیشمار، ابزار تست پاسخگو رسانه ها یک ابزار حیاتی برای ساخت وب سایت ها و برنامه هایی با سیستم طراحی حرفه ای جهت کار بر روی هر سخت افزاری که کاربران ممکن است با آن کار کنند، بشمار میرود.

+ +

هدف قرار دادن انواع رسانه ها

+ +

انواع رسانه ها دسته کلی یک دستگاه مشخص را توصیف می کنند. اگر چه وبسایت ها معمولا با صفحه نمایش طراحی شده اند، ممکن است بخواهید سبکهایی را ایجاد کنید که دستگاه هایی خاص مانند چاپگرها  یا  صفحه نمایش مبتنی بر صدا را هدف قرار میدهند. به عنوان مثال، این کد CSS  چاپگر ها را هدف قرار میدهد :

+ +
@media print { ... }
+ +

همچنین می توانید به راحتی چندین دستگاه را هدف قرار دهید. به عنوان مثال، دستور@media با استفاده از دو ابزار رسانه پاسخگو، صفحه نمایش و همینطور چاپگر را هدف قرار میدهد:

+ +
@media screen, print { ... }
+ +

برای مشاهده لیستی از رسانه های مختلف روی انواع رسانه کلید کنید. از آنجایی که دستگاهها را فقط در شرایط بسیار وسیع توصیف می کنند، فقط تعداد کمی از آنها در دسترس هستند؛ برای اختصاص ویژگی های خاص تر، از ویژگی های رسانه استفاده کنید.

+ +

Targeting media features

+ +

Media features describe the specific characteristics of a given {{glossary("user agent")}}, output device, or environment. For instance, you can apply specific styles to widescreen monitors, computers that use mice, or to devices that are being used in low-light conditions. This example applies styles when the user's primary input mechanism (such as a mouse) can hover over elements:

+ +
@media (hover: hover) { ... }
+ +

Many media features are range features, which means they can be prefixed with "min-" or "max-" to express "minimum condition" or "maximum condition" constraints. For example, this CSS will apply styles only if your browser's {{glossary("viewport")}} is equal to or narrower than 12,450 pixels:

+ +
@media (max-width: 12450px) { ... }
+ +

If you create a media feature query without specifying a value, the nested styles will be used as long as the feature's value is non-zero. For example, this CSS will apply to any device with a color screen:

+ +
@media (color) { ... }
+ +

If a feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false. For example, the styles nested inside the following query will never be used, because no speech-only device has a screen aspect ratio:

+ +
@media speech and (aspect-ratio: 11/5) { ... }
+ +

For more media feature examples, please see the reference page for each specific feature.

+ +

Creating complex media queries

+ +

Sometimes you may want to create a media query that depends on multiple conditions. This is where the logical operators come in: not, and, and only. Furthermore, you can combine multiple media queries into a comma-separated list; this allows you to apply the same styles in different situations.

+ +

In the previous example, we've already seen the and operator used to group a media type with a media feature. The and operator can also combine multiple media features into a single media query. The not operator, meanwhile, negates a media query, basically reversing its normal meaning. The only operator prevents older browsers from applying the styles.

+ +
+

Note: In most cases, the all media type is used by default when no other type is specified. However, if you use the not or only operators, you must explicitly specify a media type.

+
+ +

and

+ +

The and keyword combines a media feature with a media type or other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:

+ +
@media (min-width: 30em) and (orientation: landscape) { ... }
+ +

To limit the styles to devices with a screen, you can chain the media features to the screen media type:

+ +
@media screen and (min-width: 30em) and (orientation: landscape) { ...  }
+ +

comma-separated lists

+ +

You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680 pixels or is a screen device in portrait mode:

+ +
@media (min-height: 680px), screen and (orientation: portrait) { ... }
+ +

Taking the above example, if the user had a printer with a page height of 800 pixels, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480 pixels, the second query would apply and the media statement would still return true.

+ +

not

+ +

The not keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The not keyword can't be used to negate an individual feature query, only an entire media query. The not is evaluated last in the following query:

+ +
@media not all and (monochrome) { ... }
+
+ +

... so that the above query is evaluated like this:

+ +
@media not (all and (monochrome)) { ... }
+
+ +

... rather than like this:

+ +
@media (not all) and (monochrome) { ... }
+ +

As another example, the following media query:

+ +
@media not screen and (color), print and (color) { ... }
+
+ +

... is evaluated like this:

+ +
@media (not (screen and (color))), print and (color) { ... }
+ +

only

+ +

The only keyword prevents older browsers that do not support media queries with media features from applying the given styles. It has no effect on modern browsers.

+ +
<link rel="stylesheet" media="only screen and (color)" href="modern-styles.css" />
+
+ +

Mozilla-specific media features

+ +

Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features in the future.

+ + + +

WebKit-specific media features

+ +

For WebKit-specific media features, please see the reference page for each specific feature.

+ +

Browser compatibility

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("21")}}{{CompatGeckoDesktop("1.9.1")}}{{CompatIE("9.0")}}{{CompatOpera("9")}}{{CompatSafari("4")}}
grid{{CompatUnknown}}{{CompatNo}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
resolution{{CompatChrome("29")}}{{CompatGeckoDesktop("1.9.1")}} [2]
+ {{CompatGeckoDesktop("8.0")}} [3]		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
scan{{CompatUnknown}}{{CompatNo}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio{{CompatVersionUnknown}}{{CompatNo}}[7]{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}
-webkit-transform-3d{{CompatVersionUnknown}}[5]{{CompatGeckoDesktop("49")}}[6]{{CompatUnknown}}{{CompatVersionUnknown}}[5]{{CompatSafari("1.0")}}[5]
-webkit-transform-2d{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}[5]{{CompatSafari("1.0")}}[5]
-webkit-transition{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}[5]{{CompatSafari("1.0")}}[5]
display-mode{{CompatUnknown}}{{CompatGeckoDesktop("47")}}[8]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
grid{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
resolution{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
scan{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-transform-3d{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-transform-2d{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-transition{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
display-mode{{CompatUnknown}}{{CompatGeckoMobile(47)}}[8]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] grid media type is not supported.

+ +

[2] Supports {{cssxref("<integer>")}} values only.

+ +

[3] Supports {{cssxref("<number>")}} values, as per the spec.

+ +

[4] tv media type is not supported.

+ +

[5] See {{WebKitBug(22494)}}.

+ +

[6] Implemented for Web compatibility reasons in Gecko 46.0 {{geckoRelease("46.0")}} behind the preference layout.css.prefixes.webkit defaulting to false. See {{bug(1239799)}}. Since Gecko 49.0 {{geckoRelease("49")}} layout.css.prefixes.webkit defaults to true.

+ +

[7] Implemented as aliases for min--moz-device-pixel-ratio and max--moz-device-pixel-ratio for Web compatibility reasons in Gecko 45.0 {{geckoRelease("45.0")}} (see {{bug(1176968)}}) behind the preferences layout.css.prefixes.webkit and layout.css.prefixes.device-pixel-ratio-webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49")}} layout.css.prefixes.webkit defaults to true.

+ +

[8] Only the fullscreen and browser values of display-mode were supported in 47. minimal-ui and standalone were added in Firefox 57.

+ +

See also

+ + diff --git "a/files/fa/web/css/media_queries/\330\247\330\250\330\262\330\247\330\261-\330\252\330\263\330\252-\330\261\330\263\330\247\331\206\331\207-\331\276\330\247\330\263\330\256\332\257\331\210/index.html" "b/files/fa/web/css/media_queries/\330\247\330\250\330\262\330\247\330\261-\330\252\330\263\330\252-\330\261\330\263\330\247\331\206\331\207-\331\276\330\247\330\263\330\256\332\257\331\210/index.html" deleted file mode 100644 index 286a3e8ba2..0000000000 --- "a/files/fa/web/css/media_queries/\330\247\330\250\330\262\330\247\330\261-\330\252\330\263\330\252-\330\261\330\263\330\247\331\206\331\207-\331\276\330\247\330\263\330\256\332\257\331\210/index.html" +++ /dev/null @@ -1,331 +0,0 @@ ---- -title: ابزار تست رسانه پاسخگو -slug: Web/CSS/Media_Queries/ابزار-تست-رسانه-پاسخگو -translation_of: Web/CSS/Media_Queries/Using_media_queries ---- -
{{cssref}}
- -

 ابزارهای تست پاسخگو بسیار مفید هستند، زمانی که می خواهید سبک CSS را طبق نوع کلی دستگاه (مانند اندازه چاپ در مقابل سایز صفحه نمایش)، ویژگی های خاص (مانند عرض مرورگر رسانه) یا محیط (مانند شرایط نور محیط) استفاده کنید. با انواع مختلفی از دستگاه های متصل به اینترنت که امروزه در دسترس ما هستند و با وجود ابزارهای چند رسانه ای با اندازه های بیشمار، ابزار تست پاسخگو رسانه ها یک ابزار حیاتی برای ساخت وب سایت ها و برنامه هایی با سیستم طراحی حرفه ای جهت کار بر روی هر سخت افزاری که کاربران ممکن است با آن کار کنند، بشمار میرود.

- -

هدف قرار دادن انواع رسانه ها

- -

انواع رسانه ها دسته کلی یک دستگاه مشخص را توصیف می کنند. اگر چه وبسایت ها معمولا با صفحه نمایش طراحی شده اند، ممکن است بخواهید سبکهایی را ایجاد کنید که دستگاه هایی خاص مانند چاپگرها  یا  صفحه نمایش مبتنی بر صدا را هدف قرار میدهند. به عنوان مثال، این کد CSS  چاپگر ها را هدف قرار میدهد :

- -
@media print { ... }
- -

همچنین می توانید به راحتی چندین دستگاه را هدف قرار دهید. به عنوان مثال، دستور@media با استفاده از دو ابزار رسانه پاسخگو، صفحه نمایش و همینطور چاپگر را هدف قرار میدهد:

- -
@media screen, print { ... }
- -

برای مشاهده لیستی از رسانه های مختلف روی انواع رسانه کلید کنید. از آنجایی که دستگاهها را فقط در شرایط بسیار وسیع توصیف می کنند، فقط تعداد کمی از آنها در دسترس هستند؛ برای اختصاص ویژگی های خاص تر، از ویژگی های رسانه استفاده کنید.

- -

Targeting media features

- -

Media features describe the specific characteristics of a given {{glossary("user agent")}}, output device, or environment. For instance, you can apply specific styles to widescreen monitors, computers that use mice, or to devices that are being used in low-light conditions. This example applies styles when the user's primary input mechanism (such as a mouse) can hover over elements:

- -
@media (hover: hover) { ... }
- -

Many media features are range features, which means they can be prefixed with "min-" or "max-" to express "minimum condition" or "maximum condition" constraints. For example, this CSS will apply styles only if your browser's {{glossary("viewport")}} is equal to or narrower than 12,450 pixels:

- -
@media (max-width: 12450px) { ... }
- -

If you create a media feature query without specifying a value, the nested styles will be used as long as the feature's value is non-zero. For example, this CSS will apply to any device with a color screen:

- -
@media (color) { ... }
- -

If a feature doesn't apply to the device on which the browser is running, expressions involving that media feature are always false. For example, the styles nested inside the following query will never be used, because no speech-only device has a screen aspect ratio:

- -
@media speech and (aspect-ratio: 11/5) { ... }
- -

For more media feature examples, please see the reference page for each specific feature.

- -

Creating complex media queries

- -

Sometimes you may want to create a media query that depends on multiple conditions. This is where the logical operators come in: not, and, and only. Furthermore, you can combine multiple media queries into a comma-separated list; this allows you to apply the same styles in different situations.

- -

In the previous example, we've already seen the and operator used to group a media type with a media feature. The and operator can also combine multiple media features into a single media query. The not operator, meanwhile, negates a media query, basically reversing its normal meaning. The only operator prevents older browsers from applying the styles.

- -
-

Note: In most cases, the all media type is used by default when no other type is specified. However, if you use the not or only operators, you must explicitly specify a media type.

-
- -

and

- -

The and keyword combines a media feature with a media type or other media features. This example combines two media features to restrict styles to landscape-oriented devices with a width of at least 30 ems:

- -
@media (min-width: 30em) and (orientation: landscape) { ... }
- -

To limit the styles to devices with a screen, you can chain the media features to the screen media type:

- -
@media screen and (min-width: 30em) and (orientation: landscape) { ...  }
- -

comma-separated lists

- -

You can use a comma-separated list to apply styles when the user's device matches any one of various media types, features, or states. For instance, the following rule will apply its styles if the user's device has either a minimum height of 680 pixels or is a screen device in portrait mode:

- -
@media (min-height: 680px), screen and (orientation: portrait) { ... }
- -

Taking the above example, if the user had a printer with a page height of 800 pixels, the media statement would return true because the first query would apply. Likewise, if the user were on a smartphone in portrait mode with a viewport height of 480 pixels, the second query would apply and the media statement would still return true.

- -

not

- -

The not keyword inverts the meaning of an entire media query. It will only negate the specific media query it is applied to. (Thus, it will not apply to every media query in a comma-separated list of media queries.) The not keyword can't be used to negate an individual feature query, only an entire media query. The not is evaluated last in the following query:

- -
@media not all and (monochrome) { ... }
-
- -

... so that the above query is evaluated like this:

- -
@media not (all and (monochrome)) { ... }
-
- -

... rather than like this:

- -
@media (not all) and (monochrome) { ... }
- -

As another example, the following media query:

- -
@media not screen and (color), print and (color) { ... }
-
- -

... is evaluated like this:

- -
@media (not (screen and (color))), print and (color) { ... }
- -

only

- -

The only keyword prevents older browsers that do not support media queries with media features from applying the given styles. It has no effect on modern browsers.

- -
<link rel="stylesheet" media="only screen and (color)" href="modern-styles.css" />
-
- -

Mozilla-specific media features

- -

Mozilla offers several Gecko-specific media features. Some of these may be proposed as official media features in the future.

- - - -

WebKit-specific media features

- -

For WebKit-specific media features, please see the reference page for each specific feature.

- -

Browser compatibility

- -

{{CompatibilityTable}}

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("21")}}{{CompatGeckoDesktop("1.9.1")}}{{CompatIE("9.0")}}{{CompatOpera("9")}}{{CompatSafari("4")}}
grid{{CompatUnknown}}{{CompatNo}} [1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
resolution{{CompatChrome("29")}}{{CompatGeckoDesktop("1.9.1")}} [2]
- {{CompatGeckoDesktop("8.0")}} [3]		{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
scan{{CompatUnknown}}{{CompatNo}}[4]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio{{CompatVersionUnknown}}{{CompatNo}}[7]{{CompatNo}}{{CompatVersionUnknown}}{{CompatUnknown}}
-webkit-transform-3d{{CompatVersionUnknown}}[5]{{CompatGeckoDesktop("49")}}[6]{{CompatUnknown}}{{CompatVersionUnknown}}[5]{{CompatSafari("1.0")}}[5]
-webkit-transform-2d{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}[5]{{CompatSafari("1.0")}}[5]
-webkit-transition{{CompatNo}}{{CompatNo}}{{CompatUnknown}}{{CompatVersionUnknown}}[5]{{CompatSafari("1.0")}}[5]
display-mode{{CompatUnknown}}{{CompatGeckoDesktop("47")}}[8]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
grid{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
resolution{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
scan{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-transform-3d{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-transform-2d{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-webkit-transition{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
display-mode{{CompatUnknown}}{{CompatGeckoMobile(47)}}[8]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
-
- -

[1] grid media type is not supported.

- -

[2] Supports {{cssxref("<integer>")}} values only.

- -

[3] Supports {{cssxref("<number>")}} values, as per the spec.

- -

[4] tv media type is not supported.

- -

[5] See {{WebKitBug(22494)}}.

- -

[6] Implemented for Web compatibility reasons in Gecko 46.0 {{geckoRelease("46.0")}} behind the preference layout.css.prefixes.webkit defaulting to false. See {{bug(1239799)}}. Since Gecko 49.0 {{geckoRelease("49")}} layout.css.prefixes.webkit defaults to true.

- -

[7] Implemented as aliases for min--moz-device-pixel-ratio and max--moz-device-pixel-ratio for Web compatibility reasons in Gecko 45.0 {{geckoRelease("45.0")}} (see {{bug(1176968)}}) behind the preferences layout.css.prefixes.webkit and layout.css.prefixes.device-pixel-ratio-webkit, defaulting to false. Since Gecko 49.0 {{geckoRelease("49")}} layout.css.prefixes.webkit defaults to true.

- -

[8] Only the fullscreen and browser values of display-mode were supported in 47. minimal-ui and standalone were added in Firefox 57.

- -

See also

- - diff --git a/files/fa/web/css/type_selectors/index.html b/files/fa/web/css/type_selectors/index.html new file mode 100644 index 0000000000..5a4b5e4c89 --- /dev/null +++ b/files/fa/web/css/type_selectors/index.html @@ -0,0 +1,78 @@ +--- +title: انتخابگر نوع +slug: Web/CSS/انتخابگرـنوع +translation_of: Web/CSS/Type_selectors +--- +
{{CSSRef}}
+ +

انتخابگر نوع با نوع عنصر انتخاب می‌کند. به عبارت دیگر این انتخابگر به وسیله نوع عنصر، تمام عنصرهای تطابق داده شده را انتخاب می‌کند.

+ +
/* را انتخاب می‌کند <a> همه عنصرهای */
+a {
+  color: red;
+}
+ +

Syntax

+ +
element { style properties }
+
+ +

Example

+ +

CSS

+ +
span {
+  background-color: skyblue;
+}
+
+ +

HTML

+ +
<span>Here's a span with some text.</span>
+<p>Here's a p with some text.</p>
+<span>Here's a span with more text.</span>
+
+ +

Result

+ +

{{EmbedLiveSample('Example', '100%', 150)}}

+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}No changes
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}No changes
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Initial definition
+ +

Browser compatibility

+ + + +

{{Compat("css.selectors.type")}}

diff --git a/files/fa/web/css/zoom/index.html b/files/fa/web/css/zoom/index.html new file mode 100644 index 0000000000..e664b6b4cc --- /dev/null +++ b/files/fa/web/css/zoom/index.html @@ -0,0 +1,134 @@ +--- +title: بزرگنمایی +slug: Web/CSS/بزرگنمایی +translation_of: Web/CSS/zoom +--- +
{{CSSRef}}{{Non-standard_header}}
+ +

The non-standard zoom CSS property can be used to control the magnification level of an element. {{cssxref("transform-function/scale", "transform: scale()")}} should be used instead of this property, if possible. However, unlike CSS Transforms, zoom affects the layout size of the element.

+ +
/* Keyword values */
+zoom: normal;
+zoom: reset;
+
+/* <percentage> values */
+zoom: 50%;
+zoom: 200%;
+
+/* <number> values */
+zoom: 1.1;
+zoom: 0.7;
+
+/* Global values */
+zoom: inherit;
+zoom: initial;
+zoom: unset;
+ +

{{cssinfo}}

+ +

Syntax

+ +

Values

+ +
+
normal
+
Render this element at its normal size.
+
reset {{non-standard_inline}}
+
Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing Ctrl-- or Ctrl++ keyboard shortcuts) to the document. Only supported by WebKit (and possibly Blink).
+
{{cssxref("<percentage>")}}
+
Zoom factor. 100% is equivalent to normal. Values larger than 100% zoom in. Values smaller than 100% zoom out.
+
{{cssxref("<number>")}}
+
Zoom factor. Equivalent to the corresponding percentage (1.0 = 100% = normal). Values larger than 1.0 zoom in. Values smaller than 1.0 zoom out.
+
+ +

Formal syntax

+ +
{{csssyntax}}
+ +

Examples

+ +

First example

+ +

HTML

+ +
<p class="small">Small</p>
+<p class="normal">Normal</p>
+<p class="big">Big</p>
+ +

CSS

+ +
p.small {
+  zoom: 75%;
+}
+p.normal {
+  zoom: normal;
+}
+p.big {
+  zoom: 2.5;
+}
+p {
+  display: inline-block;
+}
+p:hover {
+  zoom: reset;
+}
+
+ +

Result

+ +

{{EmbedLiveSample('First_example')}}

+ +

Second example

+ +

HTML

+ +
<div id="a" class="circle"></div>
+<div id="b" class="circle"></div>
+<div id="c" class="circle"></div>
+ +

CSS

+ +
div.circle {
+  width: 25px;
+  height: 25px;
+  border-radius: 100%;
+  text-align: center;
+  vertical-align: middle;
+  display: inline-block;
+  zoom: 1.5;
+}
+div#a {
+  background-color: gold;
+  zoom: normal;
+}
+div#b {
+  background-color: green;
+  zoom: 200%;
+}
+div#c {
+  background-color: blue;
+  zoom: 2.9;
+}
+
+ +

Result

+ +

{{EmbedLiveSample('Second_example')}}

+ +

Specifications

+ +

This property is nonstandard and originated in Internet Explorer. Apple has a description in the Safari CSS Reference. Rossen Atanassov of Microsoft has an unofficial draft specification proposal on GitHub.

+ +

Browser compatibility

+ + + +

{{Compat("css.properties.zoom")}}

+ +

See also

+ + diff --git "a/files/fa/web/css/\330\247\331\206\330\252\330\256\330\247\330\250\332\257\330\261\331\200\331\206\331\210\330\271/index.html" "b/files/fa/web/css/\330\247\331\206\330\252\330\256\330\247\330\250\332\257\330\261\331\200\331\206\331\210\330\271/index.html" deleted file mode 100644 index 5a4b5e4c89..0000000000 --- "a/files/fa/web/css/\330\247\331\206\330\252\330\256\330\247\330\250\332\257\330\261\331\200\331\206\331\210\330\271/index.html" +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: انتخابگر نوع -slug: Web/CSS/انتخابگرـنوع -translation_of: Web/CSS/Type_selectors ---- -
{{CSSRef}}
- -

انتخابگر نوع با نوع عنصر انتخاب می‌کند. به عبارت دیگر این انتخابگر به وسیله نوع عنصر، تمام عنصرهای تطابق داده شده را انتخاب می‌کند.

- -
/* را انتخاب می‌کند <a> همه عنصرهای */
-a {
-  color: red;
-}
- -

Syntax

- -
element { style properties }
-
- -

Example

- -

CSS

- -
span {
-  background-color: skyblue;
-}
-
- -

HTML

- -
<span>Here's a span with some text.</span>
-<p>Here's a p with some text.</p>
-<span>Here's a span with more text.</span>
-
- -

Result

- -

{{EmbedLiveSample('Example', '100%', 150)}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#type-selectors', 'Type (tag name) selector')}}{{Spec2('CSS4 Selectors')}}No changes
{{SpecName('CSS3 Selectors', '#type-selectors', 'type selectors')}}{{Spec2('CSS3 Selectors')}}No changes
{{SpecName('CSS2.1', 'selector.html#type-selectors', 'type selectors')}}{{Spec2('CSS2.1')}} 
{{SpecName('CSS1', '#basic-concepts', 'type selectors')}}{{Spec2('CSS1')}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("css.selectors.type")}}

diff --git "a/files/fa/web/css/\330\247\331\206\330\252\330\256\330\247\330\250\332\257\330\261\331\200\331\210\333\214\332\230\332\257\333\214/index.html" "b/files/fa/web/css/\330\247\331\206\330\252\330\256\330\247\330\250\332\257\330\261\331\200\331\210\333\214\332\230\332\257\333\214/index.html" deleted file mode 100644 index 54cf34cd5d..0000000000 --- "a/files/fa/web/css/\330\247\331\206\330\252\330\256\330\247\330\250\332\257\330\261\331\200\331\210\333\214\332\230\332\257\333\214/index.html" +++ /dev/null @@ -1,182 +0,0 @@ ---- -title: انتخابگر ویژگی -slug: Web/CSS/انتخابگرـویژگی -translation_of: Web/CSS/Attribute_selectors ---- -
{{CSSRef}}
- -

انتخابگر ویژگی بر اساس وجود ویژگی یا مقدار ویژگی انتخاب می‌کند.

- -
/* را داشته باشند title که ویژگی <a> عنصرهای */
-a[title] {
-  color: purple;
-}
-
-/* باشد "https://example.org" آن برابر با  href که ویژگی  <a> عنصرهای */
-a[href="https://example.org"] {
-  color: green;
-}
-
-/* باشد "example" آن در بردارنده‌ی href که ویژگی <a> عنصرهای */
-a[href*="example"] {
-  font-size: 2em;
-}
-
-/* به پایان رسیده باشد ".org" آن با href که ویژگی <a> عنصرهای */
-a[href$=".org"] {
-  font-style: italic;
-}
- -
-
[attr]
-
Represents elements with an attribute name of attr.
-
[attr=value]
-
Represents elements with an attribute name of attr whose value is exactly value.
-
[attr~=value]
-
Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.
-
[attr|=value]
-
Represents elements with an attribute name of attr whose value can be exactly value or can begin with value immediately followed by a hyphen, - (U+002D). It is often used for language subcode matches.
-
[attr^=value]
-
Represents elements with an attribute name of attr whose value is prefixed (preceded) by value.
-
[attr$=value]
-
Represents elements with an attribute name of attr whose value is suffixed (followed) by value.
-
[attr*=value]
-
Represents elements with an attribute name of attr whose value contains at least one occurrence of value within the string.
-
[attr operator value i]
-
Adding an i (or I) before the closing bracket causes the value to be compared case-insensitively (for characters within the ASCII range).
-
- -

Examples

- - - -

CSS

- -
a {
-  color: blue;
-}
-
-/* Internal links, beginning with "#" */
-a[href^="#"] {
-  background-color: gold;
-}
-
-/* Links with "example" anywhere in the URL */
-a[href*="example"] {
-  background-color: silver;
-}
-
-/* Links with "insensitive" anywhere in the URL,
-   regardless of capitalization */
-a[href*="insensitive" i] {
-  color: cyan;
-}
-
-/* Links that end in ".org" */
-a[href$=".org"] {
-  color: red;
-}
-
- -

HTML

- -
<ul>
-  <li><a href="#internal">Internal link</a></li>
-  <li><a href="http://example.com">Example link</a></li>
-  <li><a href="#InSensitive">Insensitive internal link</a></li>
-  <li><a href="http://example.org">Example org link</a></li>
-</ul>
- -

Result

- -

{{EmbedLiveSample('Links')}}

- -

Languages

- -

CSS

- -
/* All divs with a `lang` attribute are bold. */
-div[lang] {
-  font-weight: bold;
-}
-
-/* All divs in US English are blue. */
-div[lang~="en-us"] {
-  color: blue;
-}
-
-/* All divs in Portuguese are green. */
-div[lang="pt"] {
-  color: green;
-}
-
-/* All divs in Chinese are red, whether
-   simplified (zh-CN) or traditional (zh-TW). */
-div[lang|="zh"] {
-  color: red;
-}
-
-/* All divs with a Traditional Chinese
-   `data-lang` are purple. */
-/* Note: You could also use hyphenated attributes
-   without double quotes */
-div[data-lang="zh-TW"] {
-  color: purple;
-}
-
- -

HTML

- -
<div lang="en-us en-gb en-au en-nz">Hello World!</div>
-<div lang="pt">Olá Mundo!</div>
-<div lang="zh-CN">世界您好！</div>
-<div lang="zh-TW">世界您好！</div>
-<div data-lang="zh-TW">?世界您好！</div>
-
- -

Result

- -

{{EmbedLiveSample('Languages')}}

- -

Specifications

- - - - - - - - - - - - - - - - - - - - - - - - - - -
SpecificationStatusComment
{{SpecName('CSS4 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS4 Selectors')}}Adds modifier for ASCII case-insensitive attribute value selection
{{SpecName('CSS3 Selectors', '#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS3 Selectors')}} 
{{SpecName('CSS2.1', 'selector.html#attribute-selectors', 'attribute selectors')}}{{Spec2('CSS2.1')}}Initial definition
- -

Browser compatibility

- - - -

{{Compat("css.selectors.attribute")}}

- -

See also

- - diff --git "a/files/fa/web/css/\330\250\330\262\330\261\332\257\331\206\331\205\330\247\333\214\333\214/index.html" "b/files/fa/web/css/\330\250\330\262\330\261\332\257\331\206\331\205\330\247\333\214\333\214/index.html" deleted file mode 100644 index e664b6b4cc..0000000000 --- "a/files/fa/web/css/\330\250\330\262\330\261\332\257\331\206\331\205\330\247\333\214\333\214/index.html" +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: بزرگنمایی -slug: Web/CSS/بزرگنمایی -translation_of: Web/CSS/zoom ---- -
{{CSSRef}}{{Non-standard_header}}
- -

The non-standard zoom CSS property can be used to control the magnification level of an element. {{cssxref("transform-function/scale", "transform: scale()")}} should be used instead of this property, if possible. However, unlike CSS Transforms, zoom affects the layout size of the element.

- -
/* Keyword values */
-zoom: normal;
-zoom: reset;
-
-/* <percentage> values */
-zoom: 50%;
-zoom: 200%;
-
-/* <number> values */
-zoom: 1.1;
-zoom: 0.7;
-
-/* Global values */
-zoom: inherit;
-zoom: initial;
-zoom: unset;
- -

{{cssinfo}}

- -

Syntax

- -

Values

- -
-
normal
-
Render this element at its normal size.
-
reset {{non-standard_inline}}
-
Do not (de)magnify this element if the user applies non-pinch-based zooming (e.g. by pressing Ctrl-- or Ctrl++ keyboard shortcuts) to the document. Only supported by WebKit (and possibly Blink).
-
{{cssxref("<percentage>")}}
-
Zoom factor. 100% is equivalent to normal. Values larger than 100% zoom in. Values smaller than 100% zoom out.
-
{{cssxref("<number>")}}
-
Zoom factor. Equivalent to the corresponding percentage (1.0 = 100% = normal). Values larger than 1.0 zoom in. Values smaller than 1.0 zoom out.
-
- -

Formal syntax

- -
{{csssyntax}}
- -

Examples

- -

First example

- -

HTML

- -
<p class="small">Small</p>
-<p class="normal">Normal</p>
-<p class="big">Big</p>
- -

CSS

- -
p.small {
-  zoom: 75%;
-}
-p.normal {
-  zoom: normal;
-}
-p.big {
-  zoom: 2.5;
-}
-p {
-  display: inline-block;
-}
-p:hover {
-  zoom: reset;
-}
-
- -

Result

- -

{{EmbedLiveSample('First_example')}}

- -

Second example

- -

HTML

- -
<div id="a" class="circle"></div>
-<div id="b" class="circle"></div>
-<div id="c" class="circle"></div>
- -

CSS

- -
div.circle {
-  width: 25px;
-  height: 25px;
-  border-radius: 100%;
-  text-align: center;
-  vertical-align: middle;
-  display: inline-block;
-  zoom: 1.5;
-}
-div#a {
-  background-color: gold;
-  zoom: normal;
-}
-div#b {
-  background-color: green;
-  zoom: 200%;
-}
-div#c {
-  background-color: blue;
-  zoom: 2.9;
-}
-
- -

Result

- -

{{EmbedLiveSample('Second_example')}}

- -

Specifications

- -

This property is nonstandard and originated in Internet Explorer. Apple has a description in the Safari CSS Reference. Rossen Atanassov of Microsoft has an unofficial draft specification proposal on GitHub.

- -

Browser compatibility

- - - -

{{Compat("css.properties.zoom")}}

- -

See also

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