خاصية التكبير (Zoom)
آخر تحديث: 2026-09-13
zoom خاصية التكبير (Zoom)
تطبّق خاصية zoom تحويل تكبير غير قياسي، فيكبّر أو يصغّر عنصرًا وكل عناصره الفرعية بالتناسب. على عكس transform: scale()، يؤثر zoom على مساحة تخطيط العنصر — فهو يشغل المساحة الفعلية بعد التحجيم — ويُطلق إعادة تدفق كاملة. ورغم أنها ليست CSS قياسيًا، إلا أن دعم المتصفحات لها واسع.
| الفئة | |
|---|---|
| القيمة الأولية | normal |
| موروث | لا |
| ينطبق على | |
| نوع الحركة | |
| إصدار CSS | CSS3 |
| الحالة | قياسي |
📝 التركيب
zoom: normal | reset | <number> | <percentage>;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
normal | reset | كلمة مفتاحية | القيم المُعدة مسبقًا |
<number> | <percentage> | النوع | معامل التكبير |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| zoom | ✓ v10 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تحذير： خاصية zoom غير قياسية وغير مدرجة في مواصفات CSS. لا يدعمها فايرفوكس (الإصدارات القديمة لا تدعمها إطلاقًا؛ والإصدارات الأحدث فقط عبر العلامة layout.css.zoom.enabled).
تلميح： للحصول على تأثير تكبير قياسي مدعوم جيدًا، استخدم transform: scale()؛ أما zoom فتناسب النماذج الأولية السريعة أو المشاريع الداخلية.
❓ الأسئلة الشائعة
Qما الفرق بين خاصية zoom و transform: scale()؟
Aيغير zoom المساحة الفعلية المشغولة وحجم التخطيط للعنصر في تدفق المستند، مما يؤثر على العناصر المحيطة — وهو ما يعادل إعادة التدفق. أما transform: scale() فلا تغير سوى الحجم المرئي وتحافظ على مساحة التخطيط. كما يؤثر تكبير zoom على الحجم المرسوم للعناصر الفرعية (تكبير عام للبكسلات) ويُطلق إعادة تدفق كاملة. ولتحقيق اتساق بين المتصفحات، تكون transform: scale() أكثر موثوقية.
Qماذا يعني بالضبط القيمة reset في خاصية zoom؟
Aالقيمة reset هي قيمة غير قياسية قدمتها Safari، وتعني إعادة تعيين التكبير، وتعادل zoom: 1 لكنها تمنع قيمة zoom موروثة من الاستمرار في التأثير على العنصر. أما القيمة الافتراضية normal فتعني أن التكبير يطابق تكبير الصفحة الذي يضبطه المستخدم (وتعادل 1). ولـ reset حالات استخدام محدودة ودعمها في المقام الأول بمحركات WebKit — لذا اختبرها عبر المتصفحات.
Qما مدى دعم خاصية zoom وهل يدعمها فايرفوكس؟
Aكانت zoom تاريخيًا خاصية غير قياسية لـ IE/WebKit؛ ويدعمها Chrome و Edge و Safari جيدًا. أمّا فايرفوكس فلم يفعّلها افتراضيًا إلا في الإصدار 126 (2024). ورغم أنها بدأت تدخل مواصفات CSS Viewport، لا تزال معيارًا فعليًا. وللتكبير عبر المتصفحات في بيئة الإنتاج، تفضّل transform: scale() القياسية.
Qهل تؤثر خاصية zoom في CSS على أداء العرض في الصفحة؟
Aنعم. تغير zoom أبعاد التخطيط، لذا يؤدي التحجيم إلى إعادة التدفق والرسم، ويكون أداء الحركة أسوأ بوضوح من transform: scale(). تناسب zoom التحجيم لمرة واحدة لصفحة أو مكوّن (مثل تحجيم التخطيط بأكمله ليتناسب)، لا للحركة إطارًا بإطار. وللتحجيم المتحرك، تفضّل transform: scale()؛ واستخدم zoom عندما تحتاج فعلًا إلى تغيير حقيقي في حجم التخطيط.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
