Houdini - إزالة الغموض عن CSS

Surma

هل فكرت يومًا في حجم عمل خدمة مقارنة الأسعار (CSS)؟ يمكنك تغيير عنوان URL واحد وفجأة يظهر موقعك الإلكتروني بالكامل بتخطيط مختلف. من المهم نوعًا من السحر. لقد نجحنا حتى الآن - نحن منتدى مطوري الويب - في كان بمقدورهم فقط أن يشاهدوا ويلاحظوا السحر. ماذا لو أردنا الوصول إلى سحرنا؟ ماذا لو أردنا أن نصبح ساحرًا؟

الدخول إلى "هوديني"

يتكون فريق عمل هوديني من مهندسين من Mozilla وApple وOpera تعاونت Microsoft وHP وIntel وGoogle معًا للكشف عن أجزاء معينة من CSS لمطوّري برامج الويب. يعمل فريق المهام على مجموعة من المسودّات بهدف قبولها من قِبل W3C لتتحوّل إلى محتوى فعلي على الإنترنت. المعايير. لقد وضعوا أنفسهم بعض الأهداف عالية المستوى، وحوّلوها إلى للمواصفات التي وضعتها بدورها مجموعة من الأدوات الداعمة، ومسودّات للمواصفات المنخفضة المستوى.

ويُقصد عادةً بعملية جمع هذه المسودات عندما يتحدّث مستخدم عن "هوديني". في وقت الكتابة، تتوفر قائمة المسودات غير مكتملة وبعض المسودات مجرد عناصر نائبة.

تنبيه: هذه نظرة عامة سريعة على مسرح "هوديني" (هوديني) لمعاينة نوع المشكلات التي يحاول هوديني معالجتها. كن أن ندرك أنّ هذه المواصفات هي مسودات ومتغيّرة للغاية. لا توجد أن عينات التعليمات البرمجية هذه ستكون صحيحة عن بُعد في المستقبل أو أن تصبح أيًّا من هذه المسودّات حقيقة واقعة

المواصفات

Worklets (المواصفات)

الشغلات في حد ذاتها ليست مفيدة حقًا. إنها مفهوم تم تقديمه على وإتاحة العديد من المسودات اللاحقة. إذا فكرت في "عمال الويب" عند وقراءة "مصغر"، فأنت لست مخطئًا. فهي تتضمن الكثير من التداخل في المفاهيم. فلماذا؟ عندما يكون لدينا عمال بالفعل؟

هدف هوديني هو عرض واجهات برمجة تطبيقات جديدة للسماح لمطوّري برامج الويب بربط تعليماتهم البرمجية الخاصة بمحرك صفحات الأنماط المتتالية (CSS) والأنظمة المحيطة. ليس من الواقعية على الأرجح افتراض أن بعض هذه أن يتم تشغيل أجزاء الرمز كل. أعزب. الإطار. ينبغي على البعض منهم حسب التعريف. اقتباس مواصفات Web Worker:

ملاحظة: العاملون [...] من ذوي الأوزان الثقيلة نسبيًا، وليس المقصود منهم استخدامها بأعداد كبيرة. على سبيل المثال، قد يكون إطلاق واحدة غير مناسبة لكل وحدة بكسل من صورة أربعة ميغابكسل.

وهذا يعني أنّ العاملين على الويب غير قادرين على تنفيذ الإجراءات التي يخطّط "هوديني" لتنفيذها. لذلك، تم اختراع الأعماق الصغيرة. تستفيد الأدوات الصغيرة من فئات ES2015 لتحديد مجموعة من الطرق، يتم تحديد توقيعاتها مسبقًا من خلال لنوع الوظيفة المصغّرة. وهي خفيفة الوزن وقصيرة الأجل.

CSS Paint API (المواصفات)

يتم تفعيل واجهة برمجة التطبيقات Paint API تلقائيًا في الإصدار Chrome 65. اطّلِع على مقدمة مفصّلة.

الوظيفة المصغّرة للمكوّن

واجهة برمجة التطبيقات الموضّحة هنا قديمة. تحتوي الوظيفة المصغّرة للمكوّن أُعيد تصميمها واقترح عليها الآن اسم "Animation Worklet". يمكنك قراءة المزيد على التكرار الحالي لواجهة برمجة التطبيقات.

وعلى الرغم من أنه تم نقل مواصفات أداة العمل إلى WICG وستضمن فإن ذلك هو أكثر المواصفات التي تثيرني. بعض الإشعارات يتم إسناد العمليات إلى بطاقة رسومات الكمبيوتر بواسطة خدمات مقارنة الأسعار (CSS) على الرغم من أن ذلك يعتمد على كل من بطاقة الرسومات والجهاز في عامة.

يستخدم المتصفح شجرة نموذج العناصر في المستند (DOM) عادةً، وبناءً على معايير محددة، إعطاء بعض الفروع والأشجار الفرعية طبقتها الخاصة. ترسم هذه الأشجار الفرعية نفسها عليها (ربما باستخدام مساعد الطلاء في المستقبلية). كخطوة أخيرة، يتم تكديس كل هذه الطبقات الفردية وأن يتم وضعها فوق بعضها بعضًا، مع احترام مؤشرات z والتحولات ثلاثية الأبعاد لعرض الصورة النهائية التي تظهر على شاشتك. هذه العملية compositing ويتم تنفيذه بواسطة أداة التركيب.

تكمن ميزة عملية التركيب في أنك لست مضطرًا إلى عمل جميع تعيد العناصر رسم نفسها عندما يتم تمرير الصفحة قليلاً. بدلاً من ذلك، إعادة استخدام الطبقات من الإطار السابق وإعادة تشغيل أداة التركيب فقط موضع التمرير المحدّث. هذا يجعل الأمور سريعة. يساعدنا ذلك في الوصول إلى 60 لقطة في الثانية.

وكما يظهر من اسمها، تتيح لك الوظيفة المصغّرة للمكوّن الإضافي الوصول إلى أداة التركيب والتأثير على الطريقة التي يتم بها رسم طبقة العنصر في موضعها وطبقتها فوق الطبقات الأخرى.

للحصول على المزيد بشكل خاص، يمكنك إخبار المتصفح أنك تريد الانغماس في عملية الإنشاء لعقدة DOM معينة ويمكن أن تطلب الوصول إلى سمات معينة مثل موضع الانتقال للأعلى أو للأسفل، transform أو opacity. ويؤدي هذا إلى فرض تشغيل هذا العنصر على الطبقة الخاصة وفي كل إطار يتم استدعاء الرمز الخاص بك. يمكنك نقل الطبقة من خلال معالجة الطبقات لتحويل سماتها وتغييرها (مثل opacity) وهو ما يتيح لك تنفيذ إجراءات متنوعة بمعدل 60 لقطة في الثانية.

في ما يلي تنفيذ كامل للتمرير المتباين باستخدام أداة التركيب الوظيفة.

// main.js
window.compositorWorklet.import('worklet.js')
    .then(function() {
    var animator = new CompositorAnimator('parallax');
    animator.postMessage([
        new CompositorProxy($('.scroller'), ['scrollTop']),
        new CompositorProxy($('.parallax'), ['transform']),
    ]);
    });

// worklet.js
registerCompositorAnimator('parallax', class {
    tick(timestamp) {
    var t = self.parallax.transform;
    t.m42 = -0.1 * self.scroller.scrollTop;
    self.parallax.transform = t;
    }

    onmessage(e) {
    self.scroller = e.data[0];
    self.parallax = e.data[1];
    };
});

كتب "روبرت فلاك" نموذج polyfill حتى تتمكن من تجربتها - ومن الواضح أنه مع تأثير أعلى في الأداء.

وظيفة صغيرة للتنسيق (المواصفات)

تم اقتراح أول مسودة للمواصفات الحقيقية. التنفيذ هو أمر جيد لفترة من الوقت.

مرة أخرى، مواصفات هذا فارغة من الناحية العملية، لكن المفهوم مثير للاهتمام: اكتب التخطيط الخاص بك! من المفترض أن تمكّنك الوظيفة المصغّرة للتخطيط لتنفيذ display: layout('myLayout') وتشغيل JavaScript لترتيب أي عقدة العناصر الثانوية في مربع العقدة.

بالطبع، تشغيل تنفيذ JavaScript كامل لتنسيق flex-box في CSS أبطأ من تشغيل تطبيق مكافئ مدمج مع المحتوى، ولكن من السهل تخيل سيناريو يمكن أن تؤدي فيه الزوايا البعيدة إلى تحقيق مكاسب في الأداء. تخيل أن موقع ويب يتألف من لا شيء سوى البلاط، مثل Windows 10 أو نمط البناء التصميم. لا يتم استخدام تحديد الموضع المطلق وثابتًا، كما لا يُستخدم للإشارة إلى z-index أو كذلك. لا تتداخل على الإطلاق أو يكون لها أي نوع من الحدود أو الفائض. القدرة على التخطي كل هذه الفحوصات عند إعادة التخطيط يمكن أن تؤدي إلى تحقيق مكاسب في الأداء.

registerLayout('random-layout', class {
    static get inputProperties() {
        return [];
    }
    static get childrenInputProperties() {
        return [];
    }
    layout(children, constraintSpace, styleMap) {
        const width = constraintSpace.width;
        const height = constraintSpace.height;
        for (let child of children) {
            const x = Math.random()*width;
            const y = Math.random()*height;
            const constraintSubSpace = new ConstraintSpace();
            constraintSubSpace.width = width-x;
            constraintSubSpace.height = height-y;
            const childFragment = child.doLayout(constraintSubSpace);
            childFragment.x = x;
            childFragment.y = y;
        }

        return {
            minContent: 0,
            maxContent: 0,
            width: width,
            height: height,
            fragments: [],
            unPositionedChildren: [],
            breakToken: null
        };
    }
});

تمت كتابة CSSOM (المواصفات)

ملاحظة: لقطة "مكتملة تقريبًا" عملية التنفيذ في Chrome Canary ما وراء "ميزات النظام الأساسي التجريبي على الويب" .

يتناول CSSOM المكتوب (نموذج كائن CSS أو نموذج كائن أوراق الأنماط المتتالية) مشكلة ربما واجهناها جميعًا وتعلمنا للتو مواجهتها. لأوضح لك الأمر باستخدام سطر من JavaScript:

    $('#someDiv').style.height = getRandomInt() + 'px';

فإننا نجري العمليات الحسابية، ونحول رقمًا إلى سلسلة لإلحاق وحدة لمجرد أن سيقوم المتصفح بتحليل تلك السلسلة وتحويلها مرة أخرى إلى رقم لمحرك CSS. ويزداد هذا الأمر صعوبات عند معالجة عمليات التحويل باستخدام JavaScript. ليس هناك المزيد خدمة CSS على وشك البدء في الكتابة.

هذه المسودة هي واحدة من أكثر المشاريع تقدّمًا، ويمكن استخدام polyfill قيد العمل عليها بالفعل. (إخلاء مسؤولية: من الواضح أن استخدام الرمز polyfill إضافة المزيد من النفقات الحاسوبية المهم هو توضيح مدى ملاءمة واجهة برمجة التطبيقات (API)

فبدلاً من السلاسل، ستعمل على StylePropertyMap للعنصر، حيث لكل سمة CSS مفتاحها الخاص ونوع القيمة المناسب لها. السمات مثل width لديها نوع القيمة LengthValue. LengthValue هو قاموسًا لجميع وحدات CSS مثل em وrem وpx وpercent وما إلى ذلك. الإعداد height: calc(5px + 5%) سوف ينتج عنه LengthValue{px: 5, percent: 5}. بعض الإشعارات فمواقع مثل box-sizing تقبل فقط كلمات رئيسية معينة، وبالتالي لديها نوع القيمة KeywordValue. ويمكن بعد ذلك التحقق من صحة هذه السمات في وقت التشغيل

<div style="width: 200px;" id="div1"></div>
<div style="width: 300px;" id="div2"></div>
<div id="div3"></div>
<div style="margin-left: calc(5em + 50%);" id="div4"></div>

var w1 = $('#div1').styleMap.get('width');
var w2 = $('#div2').styleMap.get('width');
$('#div3').styleMap.set('background-size',
    [new SimpleLength(200, 'px'), w1.add(w2)])
$('#div4')).styleMap.get('margin-left')
    // => {em: 5, percent: 50}

الخصائص والقيم

(المواصفات)

ملاحظة: المواصفات مستقرة جدًّا. لا يمكن تنفيذ هذا الإجراء حتى الآن.

هل تعرف خصائص CSS المخصَّصة (أو الاسم المستعار غير الرسمي "متغيّرات CSS"؟) هذا هو ولكن مع أنواع! حتى الآن، لا يمكن أن تحتوي المتغيرات إلا على قيم سلسلة طريقة بسيطة للبحث والاستبدال. تتيح لك هذه المسودة فقط تحديد نوع للمتغيرات الخاصة بك، وأيضًا تحديد قيمة افتراضية للتأثير في سلوك الاكتساب باستخدام واجهة برمجة تطبيقات JavaScript. من الناحية الفنية، هذا ستتيح أيضًا إضافة تأثيرات حركية إلى الخصائص المخصصة باستخدام عمليات نقل CSS العادية. والرسوم المتحركة، والتي يتم أخذها في الاعتبار أيضًا.

["--scale-x", "--scale-y"].forEach(function(name) {
document.registerProperty({
    name: name,
    syntax: "<number>",
    inherits: false,
    initialValue: "1"
    });
});

مقاييس الخطوط

مقاييس الخط هي بالضبط ما تبدو عليه. ما مربع الإحاطة (أو المربع المحيط) عند عرض السلسلة X بالخط Y بالحجم Z؟ ماذا إذا استخدمت تعليقات Ruby التوضيحية؟ وقد تم طلب ذلك كثيرًا، ويجب على هوديني أخيرًا في تحقيق هذه الأحلام.

انتظر، فهناك المزيد.

هناك المزيد من المواصفات في قائمة مسودات هوديني، لكن مستقبلها هو غير مؤكدة إلى حد ما وليست أكثر من مجرّد عناصر نائبة للأفكار. تشمل الأمثلة سلوكيات المساحة الإضافية المخصّصة وواجهة برمجة التطبيقات لإضافة بنية CSS والإضافة من سلوك التمرير الأساسي والأشياء الطموحة المشابهة، فكلها تتيح أشياء لم تكن متوفرة من قبل على منصة الويب.

إصدارات تجريبية

أنشأتُ رمزًا للعرض التوضيحي مفتوح المصدر. (عرض توضيحي مباشر باستخدام polyfill).