﻿<?xml version="1.0" encoding="utf-8"?>

<CssModule name="KHTML" standard-reference="http://example.com/myspecification" status="WD" pub-date="2012-06-16">

  <!-- PROPERTIES
       There are 2 ways of creating new CSS properties:
         1. Based it on an existing property (inherit). Used for vendor specific properties.
         2. Create one from scratch. Do this only when there are no other properties to inherit from
       
       To inherit from an existing property, use the 'ref' attribute to point to the existing property. You can override
       any property even when you inherit.
       
       Available property attributes:
         'name'           The name of the property as it appears in the CSS document. Required
         'ref'            Inherit from any CSS property by using 'ref'. Optional
         'restriction'    When set, it controls the validation of the property value. Optional
                          Possible values are: enum, percentage, integer, number, length, url, string, identifier, semitones, volume, frequency, color
         
         'type'           This controls Intellisense. Except if the property contains <entry> elements (enum) or the restriction contains 'color'. Optional
                          A type can also be a <CssPropertyValue> defined in any schema file.
                          
         'syntax'         Used for the tooltip only. Use $(name) instead of writing the property name. Optional
         'version'        The CSS version. This is used by the CSS version selector in Visual Studio. Optional
         'browsers'       Used to specify which browsers support the property. 
                          Example: browsers="C,FF4-12,IE8,O11,S4.1". This means Chrome: all versions, Firefox 4-12, IE8+, Opera 11+, Safari 4.1+
                          Remember to always keep the browsers in alphabetical order for caching purposes!
                       
         'standard-reference' The URL pointing to the specification of the property. Optional
         '_locID'         An alias for 'name' used for localization purposes by Visual Studio only. Don't use
         '_locAttrData'   Used for localization purposes by Visual Studio only. Don't use
  -->

  <!-- Creates a brand new property that doesn't inherit from any existing property-->
  <CssProperty name="-khtml-border-radius-bottomright"
               version="3.0"
               restriction="length, percentage"
               desription="Describe the property. It shows up in a tooltip in Visual Studio"
               syntax="img { $(name): 5px; }"
               browsers="S1"
               standard-reference="http://adaptivethemes.com/border-radius-reference" />

  <CssProperty name="-khtml-border-radius-bottomleft" ref="-khtml-border-radius-bottomright" />
  <CssProperty name="-khtml-border-radius-topright" ref="-khtml-border-radius-bottomright" />
  <CssProperty name="-khtml-border-radius-topleft" ref="-khtml-border-radius-bottomright" />

  <!-- Creates a new property with the same properties as 'border-radius' which is defined in the schema files included in VS.
       It overrides the 'browsers' attribute to specify which browsers support this new property. Multiple browsers are separated by comma -->
  <CssProperty name="-khtml-border-radius"
               ref="border-radius"
               browsers="S1" />

  <!-- Create a propety with custom entries for Intellisense and restrict the validation to using those entries (enum) -->
  <CssProperty name="-khtml-marquee"
               version="2.0"
               restriction="enum"
               desription="Defines properties for showing content as though displayed on an electronic marquee sign."
               syntax="img { $(name): increment; }"
               browsers="S2-2.1">

    <entry value="direction" description="The direction" version="3.0" browsers="S2.1" />
    <!-- Only set 'browsers' and 'version' on entry elements if they are different from the parent property -->
    <entry value="increment" />
    <entry value="repetition" />
    <entry value="style" />
    <entry value="speed" />
  </CssProperty>

  <!-- Uses a custom type for providing Intellisense. Custom types are used when more than 1 property needs the same values for Intellisense and valdation-->
  <CssProperty name="-khtml-custom"
               restriction="length, percentage, url, color"
               type="customtype"
               browsers="S1.1" />

  <CssPropertyValue type="customtype">
    <entry value="example" />
    <entry value="test" />
  </CssPropertyValue>

  <!-- Adds the -khtml-activelink to the list of valid colors. Will show in both Intellisense and validation. -->
  <CssPropertyValue type="color">
    <entry value="-khtml-activelink" />
  </CssPropertyValue>

  <!-- Augment the list of valid values for the display property with this new entry. Will show in both Intellisense and validation. -->
  <CssProperty name="display">
    <entry value="-khtml-whatever" />
  </CssProperty>
  

  <!-- PSEUDO CLASSES AND ELEMENTS -->
  <CssPseudo name="::-khtml-example"
             version="3.0"
             browsers="S1"
             description="Something..."
             syntax="input$(name) { color: red; }"
             standard-reference="http://example.com" />

  <CssPseudo name=":-khtml-function(2n+1)"
             version="3.0"
             browsers="S1"
             description="Something..."
             syntax="input$(name) { color: red; }"
             standard-reference="http://example.com" />
  

  <!-- @-DIRECTIVES -->

  <!-- Creates a directive that only allows two font properties and excludes all other properties and directives-->
  <CssAtDirective name="-khtml-example"
                  version="3.0"
                  browsers="S1"
                  include-root-properties="false"
                  include-root-directives="false"
                  syntax="@$(name) { }"
                  description="Something..."
                  standard-reference="http://example.com">

    <CssProperty ref="font" />
    <CssProperty ref="font-family" />
  </CssAtDirective>


  <!-- Creates a directive not supported by any browser. It allows any property and directive inside it. -->
  <CssAtDirective name="-khtml-example2"
                  version="3.0"
                  browsers="none"
                  syntax="@$(name) { }"
                  description="Something..."
                  standard-reference="http://example.com" />

</CssModule>