mozilla
Your Search Results

    Template:csssyntaxdef

    <% 
    // $0 is the name of the definition (property or data type), without < > or ''
    // $1 is the definition, it is raw text, no HTML (except <br/>, no link. <> already are escaped.
    // $2 is the type, by default it is 'property', but can be 'non-terminal' or 'non-terminal-cont'
    
    // Localization: all these strings should be localized!
    
    // wiki.pageIgnoreCacheControl forces a fetch from the last cached rendering 
    // of the page, regardless of shift-refresh
    var db = wiki.pageIgnoreCacheControl(mdn.localString({
        "en-US": "en-US/docs/CSS/CSS_values_syntax",
        "de"   : "de/docs/CSS/CSS_werte_syntax",
        "fr"   : "fr/docs/CSS/Syntaxe_des_valeurs_CSS",
        "ja"   : "ja/docs/Web/CSS/CSS_values_syntax"
    }));
    
    var s_where = mdn.localString({
    	"en-US": "where ",
        "de"   : "wo ",
    	"fr"   : "où "
    });
    						 
    var s_and = mdn.localString({
        "en-US": "and ",
        "de"   : "und ",
        "fr"   : "et ",
    	"ja"   : "と"
    });
    
    var s_or = mdn.localString({
        "en-US": "or",
        "de"   : "oder"
    });
    
    var s_possible_values = mdn.localString({
        "en-US": "Possible values: ",
        "de"   : "Mögliche Werte: "
    });
    
    var s_number_followed_by = mdn.localString({
        "en-US": "a number followed by",
        "de"   : "eine Nummer gefolgt von"
    });
    
    var s_like = mdn.localString({
        "en-US": "like",
        "de"   : "wie"
    });
    
    var s_hash_mark = mdn.localString({
    	"en-US": '<a title="Hash mark multiplier: The previous entity may appear 0, 1 or several times, each occurrence being separated from the previous one by a comma." href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Hash_mark_(.23)">#</a>',
        "de"   : '<a title="Rautensymbol Multiplizierer: Die vorherige Entität kann 0, 1 oder mehrmals vorkommen, wobei jedes Vorkommen durch ein Komma vom vorherigen getrennt wird." href="/' + env.locale + '/docs/CSS/Wertdefinitionssyntax#Rautensymbol_(.23)">#</a>',
        "fr"   : '<a title="Le multiplicateur dièse: L\'entité qui le précède peut apparaître 0 ou plusieurs fois, chaque occurence étant séparée de la précédente par une virgule." href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Hash_mark_(.23)">#</a>' // TBD: Once translated update the URL to the translation (different slug)
    });
    
    var s_double_bar = mdn.localString({
    	"en-US": '<a title="Double bar: The two entities are optional, and may appear in any order." href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Double_bar">||</a>',
        "de"   : '<a title="Doppelter Balken: Die beiden Entitäten sind optional und können in beliebiger Reihenfolge vorkommen." href="/' + env.locale + '/docs/CSS/Wertdefinitionssyntax#Doppelter_Balken">||</a>',
    	"fr"   : '<a title="La double barre verticale: Les deux entités sont des options et peuvent apparaître dans n\'importe quel ordre." href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Double_bar">||</a>' // TBD: Once translated update the URL to the translation (different slug)
    });
    
    var s_single_bar = mdn.localString({
    	"en-US": '<a title="Single bar: The two entities are optional, but exactly one must be present." href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Single_bar">|</a>',
        "de"   : '<a title="Einfacher Balken: Die beiden Entitäten sind optional, jedoch muss genau eine davon vorkommen." href="/' + env.locale + '/docs/CSS/Wertdefinitionssyntax#Einfacher_Balken">|</a>',
    	"fr"   : '<a title="Barre verticale simple: Exactement une des deux entités, mais pas les deux, doit être présente." href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Single_bar">|</a>' // TBD: Once translated update the URL to the translation (different slug)
    });
    
    var s_double_ampersand = mdn.localString({
        "en-US": '<a title="Double ampersand: The two entities are mandatory, but may appear in any order." href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Double_ampersand">&&</a>',
        "de"   : '<a title="Doppeltes Und-Zeichen: Die beiden Entitäten sind zwingend, können jedoch in beliebiger Reihenfolge vorkommen." href="/' + env.locale + '/docs/CSS/Wertdefinitionssyntax#Doppeltes_Und-Zeichen">&&</a>',
    	"fr"   : '<a title="La double esperluette: Les deux entités sont obligatoires, mais peuvent apparaître dans n\'importe quel ordre." href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Double_ampersand">&&</a>' // TBD: Once translated update the URL to the translation (different slug)
    });
    
    var s_question_mark = mdn.localString({
        "en-US": '<a title="Question mark multiplier: The previous entity is optional (it may be used once, or not at all)." href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Question_mark_(.3F)">?</a>',
        "de"   : '<a title="Fragezeichen Multiplikator: Die vorherige Entität ist optional (sie kann einmal oder keinmal vorkommen)." href="/' + env.locale + '/docs/CSS/Wertdefinitionssyntax#Fragezeichen_(.3F)">?</a>',
        "fr"   : '<a title="Le multiplicateur point d\'interrogation: L\'entité qui le précède est optionnelle (Zero ou one occurence)." href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Question_mark_(.3F)">?</a>' // TBD: Once translated update the URL to the translation (different slug)
    });
    
    var s_asterisk = mdn.localString({
        "en-US": '<a title="Asterisk multiplier: The previous entity may appear 0, 1 or several times." href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Asterisk_(*)">*</a>',
        "de"   : '<a title="Asterisk Multiplikator: Die vorherige Entität kann 0, 1 oder mehrmals vorkommen." href="/' + env.locale + '/docs/CSS/Wertdefinitionssyntax#Asterisk_(*)">*</a>'
    });
    
    var s_plus = mdn.localString({
        "en-US": '<a title="Plus multiplier: The previous entity may appear 1 or several times." href="/' + env.locale + '/docs/CSS/Value_definition_syntax#Plus_(.2B)">+</a>',
        "de"   : '<a title="Plus Multiplikator: Die vorherige Entität kann 1 oder mehrmals vorkommen." href="/' + env.locale + '/docs/CSS/Wertdefinitionssyntax#Plus_(.2B)">+</a>'
    });
    
    var result ="";
        
    // The header of the definition, including the id, and eventual prefixes
    switch($2) {
    	case 'non-terminal':
    		result += s_where + "<code>&lt;" + $0 + "&gt; = </code>";
    		break;
    	case 'non-terminal-cont':
    		result += s_and + "<code>&lt;" + $0 + "&gt; = </code>";
    		break;
    }
    
    result += '<span id="syntax-' + $0 + '"><code>';
    
    // Let's modify the syntax, we want to put some fancy links in it.
    // Pay attention: the order is important!
    syntax = $1; 
    // Multipliers and combinators
    re = /\#/g;             syntax = syntax.replace(re, s_hash_mark);
    re = /\|\|/g;           syntax = syntax.replace(re, s_double_bar);
    //The next regexp eat the space between and after the pipe (logical, but unfortunate), so we readd them ;-)
    re = /[^\|]\|[^\|]/g;   syntax = syntax.replace(re, ' ' + s_single_bar + ' ');
    re = /&amp;&amp;/g;     syntax = syntax.replace(re, s_double_ampersand);
    re = /\?/g;             syntax = syntax.replace(re, s_question_mark);
    re = /\*/g;             syntax = syntax.replace(re, s_asterisk);
    re = /\+/g;             syntax = syntax.replace(re, s_plus);
    
    locale = env.locale;
    
    //  Non-terminal & basic data types
    function buildLinkWithTooltipForBasicAndNonTerminal(match, p1, p2) {
    	if (p1 == "") { // Not a <'column-width'>
    	  switch(p2) {
    		case 'string':          
    			link = locale + '/docs/Web/CSS/string';
    			title = '';
    			break;
    		case 'url':             
    			link  = locale + '/docs/Web/CSS/url';
    			title = '';
    			break;
    		case 'integer':         
    			link  = locale + '/docs/Web/CSS/integer';
    			title = '';
    			break; 
    		case 'number':         
    			link  = locale + '/docs/Web/CSS/number';
    			title = '';
    			break;
    		case 'percentage':      
    			link  = locale + '/docs/Web/CSS/percentage';
    			title = '';
    			break;
    		case 'length':          
    			link  = locale + '/docs/Web/CSS/length';
    			title = s_possible_values + s_number_followed_by + "'em', 'ex', 'ch', 'rem', 'px', 'cm', 'mm', 'in', 'vh', 'vw', 'vmin', 'vmax', 'pt', 'pc' " + s_or + " 'px', " + s_like + " 3px, 1.5cm, -0.5em " + s_or + " 0";
    			break;
    		case 'angle':           
    			link  = locale + '/docs/Web/CSS/angle';
    			title = s_possible_values + s_number_followed_by + "'deg', 'grad', 'rad' " + s_or + " 'turn', " + s_like + " 2turn, 1.3rad, -60deg " + s_or + " 0grad.";
    			break;
    		case 'time':            
    			link  = locale + '/docs/Web/CSS/time';
    			title = s_possible_values + s_number_followed_by + " 's' " + s_or + " 'ms', " + s_like + " 3s, -2.5ms " + s_or + " 0s.";
    			break;
    		case 'frequency':       
    			link  = locale + '/docs/Web/CSS/frequency';
    			title = '';
    			break;
    		case 'resolution':      
    			link  = locale + '/docs/Web/CSS/resolution';
    			title = '';
    			break;
    		case 'color':           
    			link  = locale + '/docs/Web/CSS/color_value';
    			title = '';
    			break;
    		case 'image':           
    			link  = locale + '/docs/Web/CSS/image';
    			title = '';
    			break;
    		case 'position':        
    			link  = locale + '/docs/Web/CSS/position_value';
    			title = '';
    			break;
    		case 'timing-function': 
    			link  = locale + '/docs/Web/CSS/timing-function';
    			title = s_possible_values + 'cubic-bezier(), steps(), linear, ease, ease-in, ease-out, east-in-out, step-start-step-end';
    			break;
    		case 'transform-function':
    			link  = locale + '/docs/Web/CSS/transform-function';
    			title = s_possible_values + 'matrix(), matrix3d(), rotate(), rotate3d(), rotateX(), rotateY(), rotateZ(), scale(), scale3d(), scaleX(), scaleY(), scaleZ(), skewX(), skewY(), translate(), translate3d(), translateX(), translateY(), translateZ()';
    			break;
                    case 'blend-mode':
    			link  = locale + '/docs/Web/CSS/blend-mode';
    			title = s_possible_values + 'normal, multiply, screen, overlay, darken, lighten, color-dodge, color-burn, hard-light, soft-light, difference, exclusion, hue, saturation, color, luminosity';
    			break;
    		default: // It is a non-terminal data type
    			link  = 'en-US/docs/CSS/CSS_values_syntax#syntax-' + p2;
    			var rg = new RegExp("<\\s*span\\s+id\\s*=\\s*\"syntax-" + p2 +"\"[^>]*>(.*?)<\\s*/\\s*span\\s*\\>","igm");
    			title = rg.exec(db)
    			if (!title) {
    				title = "Tooltip not found in DB."
    			} else {
    				title = title[1];
    				// Cleaning the tooltip of all html tags
    				rg = /<.*?>/g;
    				title = title.replace(rg, "");
    			}
    	  }
    	} else { // <'column-width'> and such
    		var reg = new RegExp("<\\s*span\\s+id\\s*=\\s*\"syntax-" + p2 +"\"[^>]*>(.*?)<\\s*/\\s*span\\s*\\>","igm");
    		var tooltip = reg.exec(db);
    
    		if (!tooltip) {
    			tooltip = "Tooltip not found in DB."
    		} else {
    			tooltip = tooltip[1];
    		}
    
    		// Cleaning the tooltip of all html tags
    		reg = /<.*?>/g;
    		title = tooltip.replace(reg, "");
    		link  = locale + '/docs/CSS/' +p2;  
    	}
    	
    	return '<a title="' + title + '" href="/' + link + '">'+ match +'</a>';    
    
    }
    
    re = /&lt;('?)(.*?)'?&gt;/g;
    syntax = syntax.replace(re, buildLinkWithTooltipForBasicAndNonTerminal);
    
    //re = /&lt;'(.*?)'&gt;/g;
    //syntax = syntax.replace(re, buildLinkWithTooltip);
    
    // We are done mangling with the syntax, let's add it to the result
    result += syntax;
    
    // The footer of the definition, closing tags
    result += '</code></span>';
    
    
    
    %><%- result %>
    Search for pages that use Template:csssyntaxdef to see example use cases and how many pages use this macro.

    Document Tags and Contributors

    Contributors to this page: Sheppy, lorchard_mozilla, ethertank, Sebastianz, teoli, SJW
    Last updated by: Sebastianz,