data URI فى HTML و CSS


السلام عليكم و رحمه الله تعالى و بركاته

data URI هى عباره عن URI schema تهدف إلى وضع البيانات الخارجيه داخل الصفحه inline بدون الحاجه إلى الإشاره إلى مسار الملف الفعلى الذى يحتوى على هذه البيانات عن طريق src او href فى HTML او url() فى CSS ، و بذلك ستقل عدد ال HTTP request التى يصدرها المتصفح ، و يمكن أن تستخدمه محررات النصوص التى تقبل صور فى محتواها من مصدر خارجى بحيث بعد الحصول على البيانات الخارجيه تتم تحويلها إلى data URI و تلغى الإعتماد علىالمصدر الخارجى ، تؤدى أيضا إلى سرعه تحميل البيانات التى تنتقل عبر HTTPS لأنها تكون مضمنه داخل html او css  مثلا .
أما عيوبها فتتمثل فى أن البيانات التى يتم إستخدامها أكثر من مره – كالصور مثلا – لا تستفيد من الكاش و سيتم تحميلها كل مره من السيرفر ، انترنت اكسبلورر 7 لا يدعم ال data URI – لكن جميع المتصفحات الاخرى تدعمها ، عندما يتم تشفير البيانات بواسطه base64 فإن حجمها سيزيد بنسبه 30% .
و الصيغه العامه لل data URI كالتالى :

data:[<mime-type>][;charset=”<encoding>”][;base64],<data>

يبدأ بكلمه data ، ثم : ، ثم نوع البيانات فى صيغه mime-type مثل image/jpeg و هذه الخيار إختيارى ، ثم charset و هو اختيارى إيضا ، و عند ترك الخيار mime-type فإنه ستحول إلى text/plain;charset=US-ASCII ، اما كلمه base64 فى توضح ان البيانات تم تشفيرها بواسطه base64 ، و اخيرا البيانات الحقيقيه التى تمثل صوره او ملف صوتى … الخ و إليك مثال لوضع صوره – عباره عن نقطه حمراء🙂 – داخل ملف html بدون الإشاره إلى مسارها عن طريق src :

<img src=”data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP
C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA
AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J
REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq
ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0
vr4MkhoXe0rZigAAAABJRU5ErkJggg==
” alt=”Red dot” />

و هذا مثال اخر يوضح كيفيه إستخدام ال data URI فى ال CSS :

li {
margin-left: 20px;
background:url(‘data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAA
ABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/5
8ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/A
FGGFyjOXZtQAAAAAElFTkSuQmCC
‘) top left no-repeat; }

السؤال الذى يطرأ على ذهنك ، كيف احول صوره او ملف صوتى او أى ملف إلى تلك الصيغه التى فوق و أستخدمها مع data URI ؟
يمكنك إستخدام ال php فى تحويل الملفات التى على السيرفر إلى نصوص مضغوطه بصيغه base64 لكى تستخدم inline مع data URI كما يوضح المثال التالى الذى يقرأ الملف بواسطه وظيفه file_get_contents و يضعه فى متغير بإسم contents ثم يشفره بواسطه وظيفه base64_encode و يضعه فى متغير bas64 ثم يقوم بإرجاع ال data URI كناتج لإستدعاء الوظيفه data_URI التى تقبل الجمله الاولى مسار الملف و الجمله التانيه ال mime-type لنوع البيانات :

<?php
function data_URI($file, $mime)
{
$contents = file_get_contents($file);
$base64 = base64_encode($contents);
return (‘data:’ . $mime . ‘;base64,’ . $base64);
}
?>
<img src=”<?php echo data_URI(‘elephant.png’,’image/png’) ?>” alt=”An elephant” />

إستخدامات ال data URI لا تعد و لكنى أجدها منتشره جدا فى سكربتات grease monkey و أيضا ألعاب الجافاسكربت التى تكون عباره عن هذه اللعبه سوبر ماريو عباره عن ملف جافاسكربت واحد فقط بدون أى صور خارجيه او اصوات او اى شىء ، كما انها متاحه أيضا للإستخدام داخل adobe air ، كما ان steve souders المهندس المتخصص فى ال performance فى جوجل حاليا و ياهو سابقا ينصح بها لجلب الملفات الصغيره كالصور داخل الصفح التى لا تتغير إلا نادرا و يتم إدخالها فى ال cache .

الأوسمة: , , , , ,

4 تعليقات to “data URI فى HTML و CSS”

  1. osamayy Says:

    فكرة رائعة بالنسبة للصور التي تستخدم أكثر من مرة في عدد من الصفحات يمكن تضمينها في ملف السي اس اس وإضافة expire date
    للملف

    المشكلة أن انترنت اكسبلورر لا يدعمها

  2. عمر الدليمي Says:

    هذه التقنية رائعة. فكرت بها مرة قبل أن أعرفها. أعتبرها بديل رائع لCHM.
    لكن أكسبلورير حذفها (كما عرفت سابقاً من ويكيبديا) لأسباب أمنية.

  3. عمر الدليمي Says:

    للعلم هناك فكرة جميلة. في بعض اللغات المشتقة من xml لا تدعم كتابة css داخلها مباشرة (كود style). فالحل هو إستدعاء ملف css خارجي بواسطة dataURI ومن نوع text/css ونكتب بقية المحتوى بشكل طبيعي!.

  4. mostafa farghaly Says:

    شكرا لك ياعمرو على الفكره ، انت أيضا يا عمرو أوحيت لى عمل skins لبرامج adobe air عبارف عن ملف واحد فقط يحتوى على قواعد ال CSS و الصور كلها😉

أضف تعليقاً

إملأ الحقول أدناه بالمعلومات المناسبة أو إضغط على إحدى الأيقونات لتسجيل الدخول:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s


%d مدونون معجبون بهذه: