CSS/@import

القاعدة ‎@import في CSS تسمح للمطورين باستيراد قواعد التنسيق من صفحات الأنماط الأخرى، وهذا النوع من القواعد يجب أن يسبق جميع قواعد CSS الأخرى، ما عدا قواعد ‎@charset.

@import url("fineprint.css") print;
@import url("bluish.css") projection, tv;
@import 'custom.css';
@import url("chrome://communicator/skin/");
@import "common.css" screen, projection;
@import url('landscape.css') screen and (orientation:landscape);

لكي تتمكن المتصفحات من تفادي تنزيل موارد لأنواع الوسائط غير المدعومة، فيمكن أن يوفِّر المطورون قواعد ‎@import مع تحديد الوسائط (media) المتربطة بها، وقواعد الاستيراد الشرطية تسمح بتحديد استعلامات عن الوسائط (media queries) يُفصَل بينها بفاصلة بعد رابط URL، وإذا لم تُحدَّد أية استعلامات فستُطبَّق القاعدة على جميع الوسائط، ولها نفس تأثير استخدام all معها.

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	مدعومة	مدعومة	5.5	مدعومة	مدعومة

البنية العامة

@import url;
@import url list-of-media-queries;

حيث:

• url: هو سلسلة نصية <string> أو رابط <url> يُمثِّل مكان المورد الذي سيستورد، ويمكن أن تكون روابط URL مطلقةً أو نسبيةً.
• list-of-media-queries: قائمة من استعلامات الوسائط يُفصَل بينها بفواصل وتُحدِّد وظيفة قواعد CSS المُعرَّفة في الرابط، وإذا لم يدعم المتصفح نوع الوسائط المُحدَّد فلن يُحمِّل المورد المُشار إليه.

البنية الرسمية

@import [ <string> | <url> ] [ <media-query-list> ]?;

حيث:

<media-query-list> = <media-query>#
<media-query> = <media-condition> | [ not | only ]? <media-type> [ and <media-condition-without-or> ]?
<media-condition> = <media-not> | <media-and> | <media-or> | <media-in-parens>
<media-type> = <ident>
<media-condition-without-or> = <media-not> | <media-and> | <media-in-parens>

حيث:

<media-not> = not <media-in-parens>
<media-and> = <media-in-parens> [ and <media-in-parens> ]+
<media-or> = <media-in-parens> [ or <media-in-parens> ]+
<media-in-parens> = ( <media-condition> ) | <media-feature> | <general-enclosed>

حيث:

<media-feature> = ( [ <mf-plain> | <mf-boolean> | <mf-range> ] )
<general-enclosed> = [ <function-token> <any-value> ) ] | ( <ident> <any-value> )

حيث:

<mf-plain> = <mf-name> : <mf-value>
<mf-boolean> = <mf-name>
<mf-range> = <mf-name> [ '<' | '>' ]? '='? <mf-value> | <mf-value> [ '<' | '>' ]? '='? <mf-name> | <mf-value> '<' '='? <mf-name> '<' '='? <mf-value> | <mf-value> '>' '='? <mf-name> '>' '='? <mf-value>

حيث:

<mf-name> = <ident>
<mf-value> = <number> | <dimension> | <ident> | <ratio>

مصادر ومواصفات

• مواصفة CSS Cascading and Inheritance Level 3.
• مواصفة Media Queries.
• مواصفة ‎CSS Level 2 (Revision 1)‎.
• مواصفة CSS Level 1.