From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/fa/html/attributes/index.html | 607 +++++++++++++++++++++ .../canvas/drawing_graphics_with_canvas/index.html | 179 ++++++ files/fa/html/html5/index.html | 155 ++++++ 3 files changed, 941 insertions(+) create mode 100644 files/fa/html/attributes/index.html create mode 100644 files/fa/html/canvas/drawing_graphics_with_canvas/index.html create mode 100644 files/fa/html/html5/index.html (limited to 'files/fa/html') diff --git a/files/fa/html/attributes/index.html b/files/fa/html/attributes/index.html new file mode 100644 index 0000000000..70c73bc06b --- /dev/null +++ b/files/fa/html/attributes/index.html @@ -0,0 +1,607 @@ +--- +title: مرجع صفت‌های HTML +slug: HTML/Attributes +translation_of: Web/HTML/Attributes +--- +

عنصرها در HTM صفت‌هایی دارند؛ این‌ها مقادیر اضافه‌ای هستند که عنصرها را پیکربندی می‌کنند یا رفتار آنها را در راه‌های گسترده‌ای به‌صورت مناسب با شرایطی که کاربران می‌خواهند تطبیق میدهند.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
نام صفتعنصرهاتوضیح
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}فهرست انواعی که سرور قبول می‌کند، معمولا از نوع فایل.
accept-charset{{ HTMLElement("form") }}فهرستی از مجموعه کاراکترهای پشتیبانی شده.
accesskeyGlobal attributeتعیین کلید میانبری از صفحه‌کلید جهت فعال‌سازی یا افزودن focus به عنصر مورد نظر.
action{{ HTMLElement("form") }}نشانی فایلی که قرار است اطلاعات ارسالی از فرم را پردازش کند.
align{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }},  {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }},  {{ HTMLElement("td") }},  {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}تنظیمات مربوط به چینش عنصر را تعیین می‌کند.
alt +

{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}

+ 		متن جایگزین تصویر، زمانی که تصویر قابل نمایش نباشد.
async{{ HTMLElement("script") }}نشان‌دهنده‌ی این است که اسکریپت باید به صورت نامتقارن اجرا شود.
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}نشان‌دهنده‌ی این است که آیا کنترل‌های موجود در این فرم قابلیت اختیار مقادیر پیش‌فرض مرورگر را دارند یا خیر.
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}بعد از بارگذاری صفحه، عنصر مورد نظر focus را به خود می‌گیرد.
autoplay{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}پخش صوت یا تصویر به محض آماده شدن.
bgcolor{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }} +

رنگ پیش‌زمینه‌ی عنصر.

+

یادداشت: این یک صفت قدیمی است که باید از ویژگی {{ Cssxref("background-color") }} در CSS به جای آن استفاده کرد.

+
border{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }} +

نشان‌دهنده‌ی حاشیه‌ی عنصر مورد نظر.

+

یادداشت: این یک صفت قدیمی است که باید از ویژگی {{ Cssxref("border") }} در CSS به جای آن استفاده کرد.

+
buffered{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}شامل بازه‌ی زمانی است که محتوای مورد نظر در آن بازه بافر شده است.
challenge{{ HTMLElement("keygen") }}رشته‌ای از حروف که به همراه کلید عمومی ارسال می‌شود.
charset{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}نوع کدگذاری کاراکترهای موجود در صفحه یا اسکریپت را تعیین می‌کند.
checked{{ HTMLElement("command") }}, {{ HTMLElement("input") }}نشان‌دهنده‌ی این است که آیا عنصر مورد نظر در زمان بارگذاری صفحه باید انتخاب شود یا خیر.
cite{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}به نشانی منبع نقل قول اشاره می‌کند.
classGlobal attributeاغلب به همراه CSS به کار می‌رود تا عنصرهایی با ویژگی‌های مشترک را سبک‌دهی کند.
code{{ HTMLElement("applet") }}نشانی فایل با پیشوند class که اپلت برای بارگذاری و اجراشدن به آن نیاز دارد را، شامل می‌شود.
codebase{{ HTMLElement("applet") }}این صفت نشانی مطلق یا نسبی دایرکتوری که فایل‌های با پیشوند class مورد نیاز اپلت هستند، را شامل می‌شود.
color{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }} +

این صفت رنگ متن را با توجه به دو الگوی "نام رنگ" یا "مقدار هگزادسیمال رنگ" مشخص می‌کند.

+

یادداشت: این یک صفت قدیمی است که باید از ویژگی {{ Cssxref("color") }} در CSS به جای آن استفاده کرد.

+
cols{{ HTMLElement("textarea") }}تعداد ستون‌های ناحیه‌ی متنی را مشخص می‌کند.
colspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}تعداد ستون‌های یک سلول (خانه) از جدول را مشخص می‌کند.
content{{ HTMLElement("meta") }}مقداری که منطبق با http-equiv یا name است.
contenteditableGlobal attributeنشان‌دهنده‌ی این است که آیا محتوای عنصر قابل ویرایش هستنند یا خیر.
contextmenuGlobal attributeID یک {{ HTMLElement("menu") }} را به عنوان منو تعیین می‌کند.
controls{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}نشان‌دهنده‌ی این است که آیا مرورگر دکمه‌های کنترل فایل صوتی یا تصویری را باید نشان بدهد یا خیر.
coords{{ HTMLElement("area") }}مجموعه‌ای از مقادیر که نشان‌دهنده‌ی مختصات ناحیه‌ی مورد نظر هستند.
data{{ HTMLElement("object") }}نشانی منبع مورد نیاز را تعیین می‌کند.
datetime{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}نشان‌دهنده‌ی تاریخ و زمان به کار رفته در عنصر مورد نظر است.
default{{ HTMLElement("track") }}نشان‌دهنده‌ی این است که track قبل از اینکه تنظیمات کاربر تغییر کند، باید فعال شود.
defer{{ HTMLElement("script") }}نشان‌دهنده‌ی این است که اسکریپت بلافاصله بعد از بارگذاری و تفسیر صفحه باید اجرا شود.
dirGlobal attributeجهت نوشته‌شدن متن را مشخص می‌کند. مقادیر قابل قبول عبارتند از ltr (چپ به راست)و rtl (راست به چپ)
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} 
disabled{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}نشان‌دهنده‌ی این است که آیا کاربر امکان تعامل با عنصر مورد نظر را دارد یا خیر.
draggableGlobal attributeقابلیت کشیده‌شدن عنصر (کلیک بر روی آن و حرکت دادنش) را تعیین می‌کند.
dropzoneGlobal attributeناحیه‌ای که عنصر کشیده‌شده را می‌توان در آن رها (drop) کرد.
enctype{{ HTMLElement("form") }}وقتی از method ای مانند POST برای ارسال مقادیر فرم استفاده می‌شود، این صفت نوع محتوای داده‌ای را در فرم تعیین می‌کند.
for{{ HTMLElement("label") }}, {{ HTMLElement("output") }}تعیین عنصرهایی که به عنصر مورد نظر تعلق دارند.
form{{ HTMLElement("button") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("label") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}نشان‌دهنده‌ی فرمی است که مالک (پدر) عنصر مورد نظر است.
headers{{ HTMLElement("td") }}, {{ HTMLElement("th") }}IDهای عنصر(های) <th> که به این عنصر مربوط می‌شوند.
height{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }} +

در برخی کاربردها مانند {{ HTMLElement("div") }}، این یک صفت قدیمی است که باید از ویژگی {{ Cssxref("height") }} در CSS به جای آن استفاده کرد. در سایر موارد مانند {{ HTMLElement("canvas") }} استفاده از این صفت ضروری است.

+
hiddenGlobal attributeارتباط یک عنصر را نشان می‌دهد.
high{{ HTMLElement("meter") }}پایین‌ترین مرز از بالاترین محدوده را نشان می‌دهد.
href{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}نشانی منبعی که پیوند (لینک) به آن اشاره دارد.
hreflang{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}زبان منبعی که پیوند (لینک) به آن اشاره دارد.
http-equiv{{ HTMLElement("meta") }} 
icon{{ HTMLElement("command") }}تصویری که نشان‌دهنده‌ی command باشد را تعیین می‌کند.
idGlobal attributeاغلب با CSS به کار می‌رود تا عنصر مورد نظر را سبک دهی کند. مقدار این صفت باید منحصر به فرد (یکتا) باشد.
ismap{{ HTMLElement("img") }}نشان‌دهنده‌ی این است که آیا تصویر بخشی از یک image map سمت سرور می‌باشد یا خیر.
itempropGlobal attribute 
keytype{{ HTMLElement("keygen") }}نوع کلید تولید شده را مشخص می‌کند.
kind{{ HTMLElement("track") }}گونه‌ی متنی track را مشخص می‌کند.
label{{ HTMLElement("track") }}متنی خوانا برای track مشخص می‌کند.
langGlobal attributeزبانی که در عنصر مورد نظر به کار رفته است را مشخص می‌کند.
language{{ HTMLElement("script") }}زبان اسکریپت را در عنصر مورد نظر تعیین می‌کند.
list{{ HTMLElement("input") }}فهرستی از گزینه‌های از پیش تعریف شده را برای کاربر مشخص می‌کند.
loop{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}نشان‌دهنده‌ی این است که آیا محتوای مورد نظر (متن، صوت یا تصویر) پس از تمام شدن، دوباره باید اجرا شود یا به نمایش دربیاید یا خیر.
low{{ HTMLElement("meter") }}بالاترین مرز از پایین‌ترین محدوده را نشان می‌دهد.
manifest{{ HTMLElement("html") }}نشانی فایل cache manifest (جهت مرور آفلاین صفحات) را در سند مشخص می‌کند.
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}نشان‌دهنده‌ی بیشترین مقدار مجاز است.
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}بیشترین تعداد کاراکترها را در عنصر مورد نظر تعیین می‌کند.
media{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}بخش کوچکی از رسانه که منبع پیوند داده شده برای آن طراحی شده است، را مشخص می‌کند.
method{{ HTMLElement("form") }}مشخص می‌کند که از کدام متد HTTP برای ارسال داده‌های فرم استفاده شود، که می‌تواند GET (پیش‌فرض) یا POST باشد.
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}نشان‌دهنده‌ی کمترین مقدار مجاز است.
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }} +

نشان‌دهنده‌ی این است که آیا مقدارهای چندتایی می‌توانند در ورودی‌های email یا file وارد شوند یا خیر.

+
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }} +

نام عنصر. برای نمونه از این صفت برای شناسایی فیلدهای مورد نظر که به سمت سرور ارسال شده‌اند استفاده می‌شود.

+
novalidate{{ HTMLElement("form") }} +

این صفت نشان‌دهنده‌ی این است که هنگام ارسال فرم، داده‌های آن نباید مورد سنجش و ارزیابی قرار بگیرند.

+
open{{ HTMLElement("details") }} +

نشان‌دهنده‌ی این است که آیا جزییات زمان بارگذاری صفحه نمایش داده می‌شوند یا خیر.

+
optimum{{ HTMLElement("meter") }} +

نشان‌دهنده‌ی مقدار عددی بهینه است.

+
pattern{{ HTMLElement("input") }} +

عبارتی منظم را تعریف می‌کند که مقدار عنصر مورد نظر برابر آن مورد سنجش و ارزیابی قرار می‌گیرد.

+
ping{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} +

با نمایش کادری کوچک به کاربر اطلاع می‌دهد که چه چیزی در فیلد قابل نوشتن است.

+
poster{{ HTMLElement("video") }} +

نشانی که به یک فریم از فیلم اشاره دارد تا زمانی که کاربر هنوز اقدام به پخش فیلم نکرده است به وی نمایش داده شود.

+
preload{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}نشان‌دهنده‌ی این است که آیا تمام منبع، بخشی از آن یا هیچ چیز باید از قبل از اقدام کاربر برای پخش محتوا، بارگذاری شود.
pubdate{{ HTMLElement("time") }} +

نشان‌دهنده‌ی این است که آیا این تاریخ و زمان مطابق با تاریخ نزدیک‌ترین عنصر {{ HTMLElement("article") }} والد خود است یا خیر.

+
radiogroup{{ HTMLElement("command") }} 
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} +

نشان‌دهنده‌ی این است که آیا این عنصر قابل ویرایش است یا خیر.

+
rel{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}ارتباط بین شی هدف و شی پینوندی را مشخص می‌کند.
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}نشان‌دهنده‌ی این است که آیا این عنصر (از فرم) نیاز به تکمیل شدن از طرف کاربر دارد یا خیر.
reversed{{ HTMLElement("ol") }}نشان‌دهنده‌ی این است که آیا فهرست باید به ترتیب نزولی نمایش داده شود، بر خلاف ترتیب صعودی.
rows{{ HTMLElement("textarea") }}تعداد سطرهای ناحیه‌ی متنی را مشخص می‌کند.
rowspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}تعداد سطرهایی که سلول (خانه) جدول باید بر اساس آن ایجاد شود را مشخص می‌‌کند.
sandbox{{ HTMLElement("iframe") }} 
spellcheckGlobal attributeنشان‌دهنده‌ی این است که آیا عملیات بررسی واژه‌ها برای این عنصر مجاز است یا خیر.
scope{{ HTMLElement("th") }} 
scoped{{ HTMLElement("style") }} 
seamless{{ HTMLElement("iframe") }} 
selected{{ HTMLElement("option") }}مقداری را تعیین می‌کند که در زمان بارگذاری صفحه، در فهرست انتخاب شده است.
shape{{ HTMLElement("a") }}, {{ HTMLElement("area") }} 
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}عرض عنصر را (بر اساس پیکسل) تعیین می‌کند. اگر عنصر مورد نظر از نوع text یا password باشد این صفت تعداد کاراکترهای عنصر را تعیین می‌کند.
sizes{{ HTMLElement("link") }} 
span{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }} 
src{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}نشانی فایلی که عنصر مورد نظر از آن به عنوان منبع استفاده می‌کند.
srcdoc{{ HTMLElement("iframe") }} 
srclang{{ HTMLElement("track") }} 
start{{ HTMLElement("ol") }}اولین عدد در فهرست را تعیین می‌کند، اگر غیر از ۱ باشد.
step{{ HTMLElement("input") }} 
styleGlobal attributeسبک‌های CSS را تعریف می‌کند که در صورت وجود فایل‌های قدیمی بر روی آن‌ها نوشته می‌شوند.
summary{{ HTMLElement("table") }} 
tabindexGlobal attributeبا ویرایش این صفت، ترتیب انتخاب شدن عنصر‌های صفحه در مرورگر به حالتی که برایش تعیین شود تغییر می‌یابد.
target{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }} 
titleGlobal attributeمتنی که در یک کادر کوچک با قرار دادن mouse روی عنصر مورد نظر نمایش می‌یابد.
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}نوع عنصر را تعریف می‌کند.
usemap{{ HTMLElement("img") }},  {{ HTMLElement("input") }}, {{ HTMLElement("object") }} 
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}مقدار پیش‌فرضی که در زمان بارگذاری صفحه برای عنصر انتخاب می‌شود را تعیین می‌کند.
width{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }} +

در برخی موارد مانند {{ HTMLElement("div") }} این یک صفت قدیمی به حساب می‌آید که باید از ویژگی {{ Cssxref("width") }} در CSS به جای آن استفاده کرد. در سایر موارد مانند {{ HTMLElement("canvas") }} این یک صفت ضروری است که باید ذکر شود.

+
wrap{{ HTMLElement("textarea") }}نشان‌دهنده‌ی این است که آیا متن باید کوتاه شود یا خیر.
+

Content versus IDL attributes

+

In HTML, most attributes have two faces: the content attribute and the IDL attribute.

+

The content attribute is the attribute as you set it from the content (the HTML code) and you can set it or get it via {{domxref("element.setAttribute()")}} or {{domxref("element.getAttribute()")}}. The content attribute is always a string even when the expected value should be an integer. For example, to set an {{HTMLElement("input")}} element's maxlength to 42 using the content attribute, you have to callsetAttribute("maxlength", "42") on that element.

+

The IDL attribute is also known as a JavaScript property. These are the attributes you can read or set using JavaScript properties like element.foo. The IDL attribute is always going to use (but might transform) the underlying content attribute to return a value when you get it and is going to save something in the content attribute when you set it. In other words, the IDL attributes, in essence, reflect the content attributes.

+

Most of the time, IDL attributes will return their valules as they are really used. For example, the default type for {{HTMLElement("input")}} elements is "text", so if you setinput.type="foobar", the <input> element will be of type text (in the appearance and the behavior) but the "type" content attribute's value will be "foobar". However, thetype IDL attribute will return the string "text".

+

IDL attributes are not always strings; for example, input.maxlength is a number (a signed long). When using IDL attributes, you read or set values of the desired type, soinput.maxlength is always going to return a number and when you setinput.maxlength ,it wants a number. If you pass another type, it is automatically converted to a number as specified by the standard JavaScript rules for type conversion.

+

IDL attributes can reflect other types such as unsigned long, URLs, booleans, etc. Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. Most of the time, it will follow the rules laid out in the specification, but sometimes it doesn't. HTML specifications try to make this as developer-friendly as possible, but for various reasons (mostly historical), some attributes  behave oddly (select.size, for example) and you should read the specifications to understand how exactly they behave.

+

See also

+ diff --git a/files/fa/html/canvas/drawing_graphics_with_canvas/index.html b/files/fa/html/canvas/drawing_graphics_with_canvas/index.html new file mode 100644 index 0000000000..9cacec88bf --- /dev/null +++ b/files/fa/html/canvas/drawing_graphics_with_canvas/index.html @@ -0,0 +1,179 @@ +--- +title: رسم گرافیک با Canvas +slug: HTML/Canvas/Drawing_Graphics_with_Canvas +translation_of: Web/API/Canvas_API/Tutorial +--- +
+

بخش عمده‌ای از این مطلب (به جز مستندات drawWindow) به صفحه‌ی اصلی آموزش Canvas منتقل شده است، بنابراین این صفحه نیز به احتمال زیاد به آن قسمت منتقل می‌شود تا از ایجاد محتوای تکراری جلوگیری شود.

+
+

مقدمه

+

با انتشار فایرفاکس ۱.۵، عنصر جدیدی از HTML برای برنامه‌نویسی حالت گرافیکی در فایرفاکس به وجود آمد. <canvas> بر اساس مستندات WHATWG برای Canvas پیاده‌سازی شده است که خود این مستندات نیز بر پایه‌ی عنصر <canvas> در مرورگر سافاری از اپل ایجاد شده است. از آن می‌توان برای ترسیم نمودار، عنصرهای واسط کاربری و سایر عنصرهای گرافیکی در مرورگر استفاده کرد.

+

<canvas> با ایجاد یک سطح ترسیمی با اندازه‌ی ثابت سبب می‌شود که یک یا چند فضای گرافیکی به وجود بیایند. در این مقاله ما بر روی فضای گرافیکی ۲ بعدی تمرکز می‌کنیم. برای گرافیک ۳ بعدی، شما باید از فضای گرافیکی WebGL استفاده کنید.

+

فضای گرافیکی ۲ بعدی

+

یک نمونه‌ی ساده

+

برای شروع، با نمونه‌ای ساده که دو مستطیل با فضای مشترک شفاف مشخص شده‌اند، آغاز می‌کنیم:

+

Example 1.

+
<html>
+ <head>
+  <script type="application/javascript">
+function draw() {
+ var canvas = document.getElementById("canvas");
+ var ctx = canvas.getContext("2d");
+
+ ctx.fillStyle = "rgb(200,0,0)";
+ ctx.fillRect (10, 10, 55, 50);
+
+ ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+ ctx.fillRect (30, 30, 55, 50);
+}
+  </script>
+ </head>
+ <body onload="draw()">
+   <canvas id="canvas" width="300" height="300"></canvas>
+ </body>
+</html>
+
+

تابع draw با دریافت عنصر canvas فضای ۲ بعدی آن را مشخص می‌کند. شی ctx می‌تواند برای رسم گرافیک روی بوم استفاده شود. در این کد، دو مستطیل با تنظیمات fillStyle و fiilRect با فضای مشترک شفاف رسم می‌شوند. fillStyle دوم از rgba برای مشخص کردن شفافیت با رنگ مورد نظر، استفاده می‌کند.

+

fillRect برای رسم مستطیل، strokeRect برای رسم حاشیه‌های مستطیل و clearRect برای پاک‌کردن مستطیل استفاده می‌شوند. برای ایجاد شکل‌های پیچیده‌تر، از مسیرها استفاده می‌شود.

+

استفاده از مسیرها

+

تابع beginPath یک مسیر جدید را آغاز می‌کند و متدهای moveTo, lineTo, arcTo, arc و از این قبیل، بخش‌های مختلفی را به مسیر تعریف‌شده اضافه می‌کنند. مسیر ایجاد شده توسط تابع closePath بسته می‌شود. زمانی که یک مسیر ایجاد شود، شما می‌توانید با fill یا stroke فضای داخل یا حاشیه‌ی مسیر را روی بوم رسم کنید.

+

Example 2.

+
<html>
+ <head>
+  <script type="application/javascript">
+function draw() {
+  var canvas = document.getElementById("canvas");
+  var ctx = canvas.getContext("2d");
+
+  ctx.fillStyle = "red";
+
+  ctx.beginPath();
+  ctx.moveTo(30, 30);
+  ctx.lineTo(150, 150);
+  // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong.
+  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // <- this is right formula for the image on the right ->
+  ctx.lineTo(30, 30);
+  ctx.fill();
+}
+   </script>
+ </head>
+ <body onload="draw()">
+   <canvas id="canvas" width="300" height="300"></canvas>
+ </body>
+</html>
+
+

فراخوانی هر یک از توابع fill یا stroke، روی مسیر فعلی تاثیر می‌گذارد. اگر دوباره قصد رنگ‌آمیزی یا ایجاد حاشیه در مسیر را داشته باشیم باید مجدد آن را تعریف کنیم.

+

حالت گرافیکی

+

صفت‌های یک فضای گرافیکی مانند fillStyle, strokeStyle, lineWidth و lineJoin قسمتی از حالت گرافیکی فعلی هستند. فضای گرافیکی شامل دو متد save و restore است که می‌توانند برای انتقال حالت کنونی به مجموعه‌ی حالت‌ها یا از مجموعه‌ی حالت‌ها استفاده شوند.

+

یک نمونه‌ی پیچیده‌تر

+

در ادامه به نمونه‌ای پیچیده‌تر می‌پردازیم که شامل مسیرها، حالت، و همچنین ماتریس انتقال است. متدهای این فضا یعنی translate, scale و rotate برای انتقال ماتریس  به کار می‌روند که تمامی نقطه‌های ایجاد شده ابتدا توسط این ماتریس منتقل می‌شوند.

+

Example 3.

+
 <html>
+  <head>
+   <script type="application/javascript">
+ function drawBowtie(ctx, fillStyle) {
+
+   ctx.fillStyle = "rgba(200,200,200,0.3)";
+   ctx.fillRect(-30, -30, 60, 60);
+
+   ctx.fillStyle = fillStyle;
+   ctx.globalAlpha = 1.0;
+   ctx.beginPath();
+   ctx.moveTo(25, 25);
+   ctx.lineTo(-25, -25);
+   ctx.lineTo(25, -25);
+   ctx.lineTo(-25, 25);
+   ctx.closePath();
+   ctx.fill();
+ }
+
+ function dot(ctx) {
+   ctx.save();
+   ctx.fillStyle = "black";
+   ctx.fillRect(-2, -2, 4, 4);
+   ctx.restore();
+ }
+
+ function draw() {
+   var canvas = document.getElementById("canvas");
+   var ctx = canvas.getContext("2d");
+
+   // note that all other translates are relative to this
+   // one
+   ctx.translate(45, 45);
+
+   ctx.save();
+   //ctx.translate(0, 0); // unnecessary
+   drawBowtie(ctx, "red");
+   dot(ctx);
+   ctx.restore();
+
+   ctx.save();
+   ctx.translate(85, 0);
+   ctx.rotate(45 * Math.PI / 180);
+   drawBowtie(ctx, "green");
+   dot(ctx);
+   ctx.restore();
+
+   ctx.save();
+   ctx.translate(0, 85);
+   ctx.rotate(135 * Math.PI / 180);
+   drawBowtie(ctx, "blue");
+   dot(ctx);
+   ctx.restore();
+
+   ctx.save();
+   ctx.translate(85, 85);
+   ctx.rotate(90 * Math.PI / 180);
+   drawBowtie(ctx, "yellow");
+   dot(ctx);
+   ctx.restore();
+ }
+    </script>
+  </head>
+  <body onload="draw()">
+    <canvas id="canvas" width="300" height="300"></canvas>
+  </body>
+ </html>
+
+

قطعه کد بالا دو متد drawBowtie و dot را که هر کدام ۴ مرتبه فراخوانی شده‌اند، دربرمی‌گیرد. قبل از هر فراخوانی، از متدهای translate و rotate برای ایجاد ماتریس انتقال استفاده می‌شود که به ترتیب نقطه و پاپیون را مکان‌دهی می‌کنند. dot یک مستطیل کوچک به مرکز (0, 0) و drawBowtie یک پاپیون کوچک را با استفاده از مسیرها و رنگ مورد نظر به وجود می‌آورد.

+

هر چه عملیات ماتریس انباشته‌تر می‌شوند، متدهای save و restore برای ذخیره‌سازی و بازگرداندن حالت گرافیکی استفاده می‌شوند. چیزی که باید به یاد داشت این است که چرخش همیشه در مسیر فعلی شکل می‌گیرد یعنی ترتیب translate() rotate() translate() به یک شکل و ترتیب translate() translate() rotate() به شکلی دیگر منجر می‌شوند.

+

سازگاری با عنصر <canvas> اپل

+

در اکثر موارد، <canvas> با نمونه‌ی پیاده‌سازی شده‌ی اپل سازگاری دارد. اگرچه چند مورد هستند که باید به آن‌ها توجه کرد.

+

برچسب پایانی مورد نیاز است

+

در پیاده‌سازی سافاری از اپل، <canvas> عنصری است که مشابه <img> پیاده‌سازی شده است، یعنی به برچسب پایانی نیازی ندارد. اگرچه، برای این‌که <canvas> به صورت گسترده در وب استفاده شود، برخی امکانات برای محتوای بازگشتی بایستی فراهم شوند. از این رو، پیاده‌سازی موزیلا از این عنصر، نیازمند استفاده از برچسب پایانی است.

+

اگر به محتوای بازگشتی نیازی نباشد، یک نمونه‌ی ساده مانند <canvas id="foo" ...></canvas> با هر دو پیاده‌سازی سافاری و موزیلا سازگاری دارد، با این تفاوت که سافاری برچسب پایانی را در نظر نمی‌گیرد.

+

اگر محتوای بازگشتی مورد استفاده قرار گیرد، بایستی از برخی تکنیک‌های CSS برای ایجاد آن در سافاری استفاده کرد و همچنین از برخی تکنیک‌ها برای فهماندن این مطلب به IE!

+

ویژگی‌های دیگر

+

فراهم‌کردن محتوای وب در داخل Canvas

+
+ این ویژگی تنها با مجوزهای مرورگر Chrome قابل اعمال است و در صفحه‌های HTML معمولی استفاده نمی‌شود. علت آن را بدانید.
+

پیاده‌سازی موزیلا از canvas با استفاده از متد drawWindow گسترش یافته است. این متد تصویری از یک صفحه‌ی DOM را در داخل canvas رسم می‌کند. برای نمونه:

+

Mozilla's canvas is extended with the drawWindow() method. This method draws a snapshot of the contents of a DOM window into the canvas. For example,

+
ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
+
+

قطعه‌کد بالا محتوای پنجره‌ی فعلی را در مستطیلی با ابعاد ذکر شده به پیکسل نسبت به گوشه‌ی بالا و چپ پنچره در یک پیش‌زمینه‌ی سفید از بوم، رسم می‌کند. با مشخص کردن "rgba(255,255,255,0)" به عنوان رنگ، محتوا با پیش‌زمینه‌ی شفاف رسم می‌شود.

+

معمولا استفاده از رنگ پیش‌زمینه‌ای به جز سفید "rgb(255,255,255)" یا شفاف کار درستی نیست چرا که تمامی مرورگرها از این استاندارد برای نمایش صفحات وب استفاده می‌کنند.

+

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

+

Ted Mielczarek با افزونه‌ی tab preview خود در chrome این امکان را فراهم می‌کند تا بتوان تصویرهای کوچک از وب‌سایت‌ها را مشاهده کرد، و کد آن نیز در دسترس است.

+
+ یادداشت: استفاده از canvas.drawWindow() در داخل رخداد onload سند عمل نمی‌کند. در فایرفاکس ۳.۵ به بعد، می‌توان با استفاده از رخداد MozAfterPaint این حالت را در زمان بارگذاری صفحه پیاده‌سازی کرد.
+

See also

+ +

{{ languages( { "fr": "fr/Dessiner_avec_canvas", "ja": "ja/Drawing_Graphics_with_Canvas", "pl": "pl/Rysowanie_grafik_za_pomoc\u0105_Canvas", "ko": "ko/Drawing_Graphics_with_Canvas" } ) }}

diff --git a/files/fa/html/html5/index.html b/files/fa/html/html5/index.html new file mode 100644 index 0000000000..f2ae6b581b --- /dev/null +++ b/files/fa/html/html5/index.html @@ -0,0 +1,155 @@ +--- +title: HTML5 +slug: HTML/HTML5 +translation_of: Web/Guide/HTML/HTML5 +--- +

HTML5 آخرین نسخه از مجموعه استانداردهای HTML است، که نشان‌دهنده‌ی دو مفهوم متفاوت است:

+ + + +

این صفحه به منابع متفاوتی از فناوری‌های HTML5 پیوند خورده است، دسته‌بندی شده در گروه‌های مختلف، که هر گروه دربرگیرنده‌ی فعالیتی متفاوت است: semantics (عنصر‌های معناگرا)، که در توضیح هر چه بیشتر و دقیق‌تر محتوا نقش دارند، connectivity (اتصال)، که روش‌های جدیدی برای برقراری ارتباط با سرور معرفی می‌کند، offline & storage (ذخیره‌سازی آفلاین)، که وب‌سایت را برای ذخیره‌ی داده‌های آفلاین و عملکرد بهتر زمانی که مرورگر کاربر در حالت آفلاین قرار دارد بهینه می‌کند، multimedia (محتوای چندرسانه‌ای)، که صوت و تصویر را به عنوان شهروند درجه یک وب معرفی می‌کند، 3D، Graphics & Effects (سه‌بعدی، گرافیک و جلوه‌های تصویری)، که به ارایه‌ی جلوه‌های تصویری پیچیده‌تر منجر می‌شود، performance & integration (عملکرد و جامعیت)، که وب‌سایتی سریع‌تر و در عین حال منطبق‌تر با رایانه‌ی کاربر می‌سازد، device access (دسترسی از طریق سایر دستگاه‌ها)، که اجازه‌ی استفاده‌ی دستگاه‌های ورودی/خروجی بیشتری را می‌دهد، و styling (سبک‌دهی)، که دست توسعه‌دهندگان در ایجاد قالب‌های پیچیده‌تر را باز می‌کند.

+ +
+
+

Semantics (عنصرهای معناگرا)

+ +
+
بخش‌های مختلف صفحه در HTML5
+
نگاهی به عنصرهای بخش‌بندی صفحه در HTML5:
+
{{ HTMLElement("section") }}, {{ HTMLElement("article") }}, {{ HTMLElement("nav") }}, {{ HTMLElement("header") }}, {{ HTMLElement("footer") }}, {{ HTMLElement("aside") }} و {{ HTMLElement("hgroup") }}.
+
استفاده از audio و vedio در HTML5
+
عنصرهای {{ HTMLElement("audio") }} و {{ HTMLElement("video") }} با قرارگرفتن در صفحه، اجازه‌ی تغییراتی جدید در نحوه‌ی اجرای محتوای چندرسانه‌ای را می‌دهند.
+
فرم‌ها در HTML5
+
نگاهی به بهبودهای ایجادشده در فرم‌های وب، constraint validation API، چند صفت جدید، مقدارهای جدیدی برای {{ HTMLElement("input") }} صفت {{ htmlattrxref("type", "input") }} و عنصر جدید {{ HTMLElement("output") }}.
+
عنصرهای معناگرای جدید
+
علاوه بر عنصرهای بخش‌بندی، رسانه و فرم، عنصرهای متعددی مانند {{ HTMLElement("mark") }}، {{ HTMLElement("figure") }}، {{ HTMLElement("figcaption") }}، {{ HTMLElement("data") }}، {{ HTMLElement("time") }}، {{ HTMLElement("output") }}، {{ HTMLElement("progress") }}، یا {{ HTMLElement("meter") }} تعداد عنصرهای مجاز HTML5 را افرایش می‌دهند.
+
بهبودهای ایجادشده در {{HTMLElement("iframe")}}
+
با استفاده از صفت‌های{{htmlattrxref("sandbox", "iframe")}}، {{htmlattrxref("seamless", "iframe")}} و {{htmlattrxref("srcdoc", "iframe") }} توسعه‌دهندگان می‌توانند میزان امنیت و کارکرد یک عنصر {{HTMLElement("iframe")}} را به دقت بررسی کنند.
+
MathML
+
استفاده از فرمول‌های ریاضی را به صورت مستقیم در کد، ممکن می‌سازد.
+
مقدمه‌ای بر HTML5
+
این مقاله به معرفی مشکلات موجود HTML5 که در طراحی وب یا برنامه‌ی وب ممکن است وجود داشته باشند، می‌پردازد.
+
مفسر منطبق بر HTML5
+
مفسر، که بایت به بایت از یک سند HTML را به درخت DOM تبدیل می‌کند، گسترش یافته‌است و به دقت رفتاری که در تمامی حالت‌ها پیش می‌آید بررسی کرده، حتی کد نامعتبر HTML را، که منجر به بهینه‌تر شدن و قابل‌پیش‌بینی‌تر شدن مرورگرهای منطبق با HTML5 می‌شود.
+
+ +

Connectivity (اتصال)

+ +
+
Web Sockets
+
اجازه‌ی برقراری یک ارتباط پایدار بین صفحه و سرور را می‌دهد که از طریق آن می‌توان به مبادله‌ی داده‌هایی غیر از سند HTML پرداخت.
+
رخدادهای سمت سرور
+
سابق بر این سرور تنها با دریافت درخواست از مرورگر (کاربر) می‌توانست به آن پاسخ دهد اما الان می‌تواند این کار را بدون درخواست مرورگر نیز انجام دهد.
+
WebRTC
+
این فناوری، که مخفف Real-Time Communication یا ارتباط بلادرنگ است، اجازه‌ی برقراری ارتباط با سایر افراد و کنترل ویدیوکنفرانس به طور مستقیم از مرورگر را می‌هد بدون آن‌که به افزونه‌ای خاص یا برنامه‌ای خارجی نیاز باشد.
+
+ +

Offline & storage (ذخیره‌سازی آفلاین)

+ +
+
منابع آفلاین: حافظه‌ی نهان برنامه
+
Firefox به طور کامل منابع آفلاین در HTML5 را پشتیبانی می‌کند. سایر مرورگرها نیز این ویژگی را کمابیش پشتیبانی می‌کنند.
+
رخدادهای آنلاین و آفلاین
+
Firefox 3 مستندات WHATWG درباره‌ی رخدادهای آنلاین و آفلاین را پشتیبانی می‌کند، که به برنامه‌ها اجازه می‌دهد تشخیص بدهند آیا یک اتصال اینترنت فعال موجود است یا خیر، یا اینکه آیا یک اتصال قطع و وصل می‌شود یا خیر.
+
نشست سمت-مرورگر WHATWG و ذخیره‌سازی پایدار (در برابر ذخیره‌سازی DOM)
+
نشست سمت-مرورگر و ذخیره‌سازی پایدار به برنامه‌های وب اجازه می‌دهند که ساختارداده‌های مورد نیاز خود را در مرورگر کاربر ذخیره‌سازی کنند.
+
IndexedDB
+
یک استاندارد وب است که برای ذخیره‌سازی داده‌ها با حجم بالا در مرورگر کاربر به کار می‌رود و برای جستجوهای با سرعت بالا بر این داده‌ها با استفاده از اندیس‌ها، صورت می‌پذیرد.
+
استفاده از فایل‌ها توسط برنامه‌های وب
+
پشتیبانی از API جدید فایل در HTML5 به Gecko اضافه‌شده است تا برنامه‌های وب بتوانند به فایل‌هایی که کاربر انتخاب می‌کنند دسترسی داشته باشند، که این امر شامل پشتیبانی از فایل‌های چندگانه  با استفاده از عنصر {{ HTMLElement("input") }} که از نوع فایل می‌باشد، می‌شود یا صفت جدید multiple. همچنین FileReader نیز وجود دارد.
+
+ +

Multimedia (چندرسانه‌ای)

+ +
+
استفاده از audio و vedio در HTML5
+
عنصرهای {{ HTMLElement("audio") }} و {{ HTMLElement("video") }} با قرارگرفتن در صفحه، اجازه‌ی تغییراتی جدید در نحوه‌ی اجرای محتوای چندرسانه‌ای را می‌دهند.
+
WebRTC
+
این فناوری، که مخفف Real-Time Communication یا ارتباط بلادرنگ است، اجازه‌ی برقراری ارتباط با سایر افراد و کنترل ویدیوکنفرانس به طور مستقیم از مرورگر را می‌هد بدون آن‌که به افزونه‌ای خاص یا برنامه‌ای خارجی نیاز باشد.
+
استفاده از API دوربین
+
اجازه‌ی استفاده، تغییر و ذخیره‌سازی یک تصویر (عکس) را از دوربین رایانه‌ی کاربر می‌دهد.
+
+ +

3D, graphics & effects (سه‌بعدی، گرافیک و جلوه‌های تصویری)

+ +
+
خودآموز Canvas
+
درباره‌ی عنصر جدید {{ HTMLElement("canvas") }} و چگونگی رسم نمودارها و سایر اشیا در Firefox بیاموزید.
+
API متن HTML5 برای عنصرهای <canvas>
+
API متن در HTML5 توسط عنصرهای {{ HTMLElement("canvas") }} پشتیبانی می‌شوند.
+
WebGL
+
WebGL گرافیک سه‌بعدی را با معرفی APIای که بسیار نزدیک به OpenGL ES 2.0 عمل می‌کند، به صفحات وب می‌آورد که می‌تواند در عنصرهای {{ HTMLElement("canvas") }} در HTML5 به کار رود.
+
SVG
+
فرمتی مبتنی بر XML از تصاویر برداری که به صورت مستقیم می‌تواند در سند HTML به کار رود.
+
+ +
+
+
+ +
+

Performance & integration (عملکرد و جامعیت)

+ +
+
Web Workers
+
به فایل‌های JavaScript اجازه می‌دهد که در پس‌زمینه و بدون این‌که رخدادهای فعال را درگیر خود سازند، اجرا شوند.
+
XMLHttpRequest سطح ۲
+
اجازه‌ی برقراری ارتباط بخشی از صفحه با سرور را می‌دهد، تا محتوای پویا را بر اساس فعالیت کاربران یا زمان تغییر دهد. این فناوری پایه و اساس Ajax است.
+
JIT - کامپایل‌کردن موتورهای JavaScript
+
نسل‌ جدید موتورهای JavaScript بسیار قدرتمندتر از نسل قبلی هستند که در اجرا و عملکرد برنامه‌های JavaScript بسیار تاثیرگذار هستند.
+
History API
+
اجازه‌ی دستکاری تاریخچه (history) مرورگر را می‌دهد که این کار برای صفحاتی که شامل اطلاعات جدید هستند، مفید می‌باشد.
+
صفت contentEditable: وب‌سایت خود را به یک wiki تبدیل کنید!
+
HTML5 صفت contentEditable را استاندارد کرده است. درباره‌ی این ویژگی بیشتر بدانید.
+
کشیدن و رهاکردن
+
API کشیدن و رهاکردن در HTML5 پشتیبانی از این عملیات را در وب‌سایت‌ها و بین‌ وبسایت‌ها میسر می‌کند. همچنین یک API ساده‌تر را جهت استفاده در extensionها و برنامه‌های مبتنی بر Mozilla شامل می‌شود.
+
مدیریت Focus در HTML
+
صفت‌های جدید activeElement و hasFocus  در HTML5 پشتیبانی می‌شوند.
+
protocol handlerهای مبتنی بر وب
+
شما اکنون می‌توانید برنامه‌های وب را با استفاده از متد navigator.registerProtocolHandler() به عنوان protocol handler ثبت کنید.
+
requestAnimationFrame
+
اجازه‌ی کنترل رندرشدن انیمیشن‌ها را برای دستیابی به عملکردی بهینه، می‌دهد.
+
Fullscreen API
+
چگونگی استفاده از حالت تمام‌صفحه را کنترل می‌کند، بدون این‌که واسط کاربری (پیش‌فرض) مرورگر نمایش داده شود.
+
Pointer Lock API
+
اجازه‌ی قفل شدن اشاره‌گر (ماوس) روی محتوا را می‌دهد، تا بازی‌ها و برنامه‌های مشابه دیگر مشکل از دست‌رفتن focus را نداشته باشند.
+
رخدادهای آنلاین و آفلاین
+
برای ایجاد یک برنامه‌ی وب با قابلیت اجرای آفلاین، شما باید بدانید چه زمانی برنامه‌ی شما واقعا در حالت آفلاین قرار می‌گیرد. همین‌طور باید بدانید چه زمانی برنامه‌ی شما در حالت آفلاین باز می‌گردد.
+
+ +

Device access (دسترسی از طریق سایر دستگاه‌ها)

+ +
+
استفاده از API دوربین
+
اجازه‌ی استفاده، تغییر و ذخیره‌سازی یک تصویر (عکس) را از دوربین رایانه‌ی کاربر می‌دهد.
+
رخدادهای Touch
+
handlerهایی که به رخدادهای ایجادشده توسط کاربری که با صفحه‌ی لمسی کار می‌کند، پاسخ می‌دهد.
+
استفاده از geolocation
+
این اجاره را به مرورگر می‌دهد تا موقعیت جغرافیایی کاربر را شناسایی کند.
+
شناسایی جهت دستگاه
+
این اجازه را به مرورگر می‌دهد تا هرگاه جهت دستگاهی که مرورگر روی آن کار می‌کند تغییر یافت، اطلاعات آن را دریافت کند. از این ویژگی می‌توان به عنوان یک دستگاه ورودی استفاده کرد برای نمونه (ساخت بازی‌هایی که به تغییر جهت دستگاه واکنش نشان می‌دهند یا منطبق ساختن ظاهر یک صفحه با جهت نمایش دستگاه - افقی یا عمودی).
+
Pointer Lock API
+
اجازه‌ی قفل شدن اشاره‌گر (ماوس) روی محتوا را می‌دهد، تا بازی‌ها و برنامه‌های مشابه دیگر مشکل از دست‌رفتن focus را نداشته باشند.
+
+ +

Styling (سبک‌دهی)

+ +

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

+ +
+
ویژگی‌های جدید در سبک‌دهی تصویر پس‌زمینه
+
اکنون ایجاد سایه در یک عنصر (جعبه) با استفاده از {{ cssxref("box-shadow") }} میسر است و تصویرهای پس‌زمینه‌ی چندگانه قابل استفاده هستند.
+
حاشیه‌هایی جذاب‌تر
+
اکنون نه تنها می‌توان با استفاده از تصویر‌ها و به کارگیری {{ cssxref("border-image") }} ،‌حاشیه‌ی عنصرها را ایجاد کرد بلکه کناره‌های گرد (rounded-borders) نیز با استفاده از ویژگی {{ cssxref("border-radius") }} قابل پیاده‌سازی هستند.
+
پویانمایی
+
با استفاده از تبدیلات در CSS برای پویانمایی بین حالت‌های مختلف یا از پویانمایی در CSS جهت پویانمایی بخشی از صفحه بدون نیاز به رخدادهای جاوااسکریپت، شما می‌توانید عنصرهای متحرک در صفحه‌ی خود را کنترل کنید.
+
بهبودهای ایجاد شده در Typography
+
توسعه‌دهندگان برای دسترسی به Typography بهتر اکنون کنترل بیشتری دارند. آن‌ها می‌توانند {{ cssxref("text-overflow") }} و فاصله‌گذاری را کنترل کنند، همچنین سایه‌ای که به متن اعمال می‌شود یا جزییات‌متن را به دقت کنترل کنند. به لطف ویژگی {{ cssxref("@font-face") }} فونت‌های مختلفی را می‌توان به صفحه‌ی خود پیوست کرد.
+
لایه‌های نمایشی جدید
+
در راستای ارتقای انعطاف‌پذیری در طراحی، دو لایه‌ی جدید افزوده شده‌اند: CSS multi-column layout و CSS flexible box layout.
+
+
+
-- cgit v1.2.3-54-g00ecf