Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including property-information with all npm packages installed. Try it out:

var propertyInformation = require("property-information")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

property-information v5.1.0

Information for HTML properties

property-information

Build Coverage Downloads Size

Information for properties and attributes on the web-platform (HTML, SVG, ARIA, XML, XMLNS, XLink).

This package follows a sensible naming scheme as defined by HAST.

Installation

npm:

npm install property-information

Table of Contents

Usage

var info = require('property-information')

console.log(info.find(info.html, 'className'))
// Or: info.find(info.html, 'class')
console.log(info.find(info.svg, 'horiz-adv-x'))
// Or: info.find(info.svg, 'horizAdvX')
console.log(info.find(info.svg, 'xlink:arcrole'))
// Or: info.find(info.svg, 'xLinkArcRole')
console.log(info.find(info.html, 'xmlLang'))
// Or: info.find(info.html, 'xml:lang')
console.log(info.find(info.html, 'ariaValueNow'))
// Or: info.find(info.html, 'aria-valuenow')

Yields:

{ space: 'html',
  attribute: 'class',
  property: 'className',
  spaceSeparated: true }
{ space: 'svg',
  attribute: 'horiz-adv-x',
  property: 'horizAdvX',
  number: true }
{ space: 'xlink', attribute: 'xlink:arcrole', property: 'xLinkArcrole' }
{ space: 'xml', attribute: 'xml:lang', property: 'xmlLang' }
{ attribute: 'aria-valuenow', property: 'ariaValueNow', number: true }

API

propertyInformation.find(schema, name)

Look up info on a property.

In most cases, the given schema contains info on the property. All standard, most legacy, and some non-standard properties are supported. For these cases, the returned Info has hints about value of the property.

name can be a valid data attribute or property, in which case an Info object with the correctly cased attribute and property is returned.

name can be an unknown attribute, in which case an Info object with attribute and property set to the given name is returned. It is not recommended to provide unsupported legacy or recently specced properties.

Parameters

  • schema (Schema) — Either propertyInformation.html or propertyInformation.svg
  • name (string) — An attribute-like or property-like name that is passed through normalize to find the correct info

Returns

Info.

Note

find can be accessed directly from require('property-information/find') as well.

Example

Aside from the aforementioned example, which shows known HTML, SVG, XML, XLink, and ARIA support, data properties and attributes are also supported:

console.log(info.find(info.html, 'data-date-of-birth'))
// Or: info.find(info.html, 'dataDateOfBirth')

Yields:

{ attribute: 'data-date-of-birth', property: 'dataDateOfBirth' }

Unknown values are passed through untouched:

console.log(info.find(info.html, 'un-Known'))

Yields:

{ attribute: 'un-Known', property: 'un-Known' }

propertyInformation.normalize(name)

Get the cleaned case-insensitive form of an attribute or a property.

This lowercases the name and return the result.

Parameters

  • name (string) — An attribute-like or property-like name

Returns

string that can be used to look up the properly cased property in a Schema.

Note

normalize can be accessed directly from require('property-information/normalize') as well.

Example

info.html.normal[info.normalize('for')] // => 'htmlFor'
info.svg.normal[info.normalize('VIEWBOX')] // => 'viewBox'
info.html.normal[info.normalize('unknown')] // => undefined
info.html.normal[info.normalize('accept-charset')] // => 'acceptCharset'

propertyInformation.html

propertyInformation.svg

Schema for either HTML or SVG, containing info on properties from the primary space (HTML or SVG) and related embedded spaces (ARIA, XML, XMLNS, XLink).

Note

html and svg can be accessed directly from require('property-information/html') and require('property-information/svg') as well.

Example

console.log(info.html.property.htmlFor)
console.log(info.svg.property.viewBox)
console.log(info.html.property.unknown)

Yields:

{ space: 'html',
  attribute: 'for',
  property: 'htmlFor',
  spaceSeparated: true }
{ space: 'svg', attribute: 'viewBox', property: 'viewBox' }
undefined

Schema

A schema for a primary space.

  • space ('html' or 'svg') — Primary space of the schema
  • normal (Object.<string>) — Object mapping normalized attributes and properties to properly cased properties
  • property (Object.<Info>) — Object mapping properties to info

Info

Info on a property.

  • space ('html', 'svg', 'xml', 'xlink', 'xmlns', optional) — Space of the property
  • attribute (string) — Attribute name for the property that could be used in markup (for example: 'aria-describedby', 'allowfullscreen', 'xml:lang', 'for', or 'charoff')
  • property (string) — JavaScript-style camel-cased name, based on the DOM, but sometimes different (for example: 'ariaDescribedBy', 'allowFullScreen', 'xmlLang', 'htmlFor', 'chOff')
  • boolean (boolean) — The property is boolean. The default value of this property is false, so it can be omitted
  • booleanish (boolean) — The property is a boolean. The default value of this property is something other than false, so false must persist. The value can hold a string (as is the case with ariaChecked and its 'mixed' value)
  • overloadedBoolean (boolean) — The property is boolean. The default value of this property is false, so it can be omitted. The value can hold a string (as is the case with download as its value reflects the name to use for the downloaded file)
  • number (boolean) — The property is number. These values can sometimes hold a string
  • spaceSeparated (boolean) — The property is a list separated by spaces (for example, className)
  • commaSeparated (boolean) — The property is a list separated by commas (for example, srcSet)
  • commaOrSpaceSeparated (boolean) — The property is a list separated by commas or spaces (for example, strokeDashArray)
  • mustUseProperty (boolean) — If a DOM is used, setting the property should be used for the change to take effect (this is true only for 'checked', 'multiple', 'muted', and 'selected')
  • defined (boolean) — The property is defined by a space. This is true for values in HTML (including data and ARIA), SVG, XML, XMLNS, and XLink. These values can only be accessed through find.

Support

PropertyAttributeSpace
aLinkalinkhtml
abbrabbrhtml
aboutaboutsvg
accentHeightaccent-heightsvg
acceptaccepthtml
acceptCharsetaccept-charsethtml
accessKeyaccesskeyhtml
accumulateaccumulatesvg
actionactionhtml
additiveadditivesvg
alignalignhtml
alignmentBaselinealignment-baselinesvg
allowallowhtml
allowFullScreenallowfullscreenhtml
allowPaymentRequestallowpaymentrequesthtml
allowTransparencyallowtransparencyhtml
allowUserMediaallowusermediahtml
alphabeticalphabeticsvg
altalthtml
amplitudeamplitudesvg
arabicFormarabic-formsvg
archivearchivehtml
ariaActiveDescendantaria-activedescendant
ariaAtomicaria-atomic
ariaAutoCompletearia-autocomplete
ariaBusyaria-busy
ariaCheckedaria-checked
ariaColCountaria-colcount
ariaColIndexaria-colindex
ariaColSpanaria-colspan
ariaControlsaria-controls
ariaCurrentaria-current
ariaDescribedByaria-describedby
ariaDetailsaria-details
ariaDisabledaria-disabled
ariaDropEffectaria-dropeffect
ariaErrorMessagearia-errormessage
ariaExpandedaria-expanded
ariaFlowToaria-flowto
ariaGrabbedaria-grabbed
ariaHasPopuparia-haspopup
ariaHiddenaria-hidden
ariaInvalidaria-invalid
ariaKeyShortcutsaria-keyshortcuts
ariaLabelaria-label
ariaLabelledByaria-labelledby
ariaLevelaria-level
ariaLivearia-live
ariaModalaria-modal
ariaMultiLinearia-multiline
ariaMultiSelectablearia-multiselectable
ariaOrientationaria-orientation
ariaOwnsaria-owns
ariaPlaceholderaria-placeholder
ariaPosInSetaria-posinset
ariaPressedaria-pressed
ariaReadOnlyaria-readonly
ariaRelevantaria-relevant
ariaRequiredaria-required
ariaRoleDescriptionaria-roledescription
ariaRowCountaria-rowcount
ariaRowIndexaria-rowindex
ariaRowSpanaria-rowspan
ariaSelectedaria-selected
ariaSetSizearia-setsize
ariaSortaria-sort
ariaValueMaxaria-valuemax
ariaValueMinaria-valuemin
ariaValueNowaria-valuenow
ariaValueTextaria-valuetext
asashtml
ascentascentsvg
asyncasynchtml
attributeNameattributeNamesvg
attributeTypeattributeTypesvg
autoCapitalizeautocapitalizehtml
autoCompleteautocompletehtml
autoCorrectautocorrecthtml
autoFocusautofocushtml
autoPlayautoplayhtml
autoSaveautosavehtml
axisaxishtml
azimuthazimuthsvg
backgroundbackgroundhtml
bandwidthbandwidthsvg
baseFrequencybaseFrequencysvg
baseProfilebaseProfilesvg
baselineShiftbaseline-shiftsvg
bboxbboxsvg
beginbeginsvg
bgColorbgcolorhtml
biasbiassvg
borderborderhtml
borderColorbordercolorhtml
bottomMarginbottommarginhtml
bybysvg
calcModecalcModesvg
capHeightcap-heightsvg
capturecapturehtml
cellPaddingcellpaddinghtml
cellSpacingcellspacinghtml
charcharhtml
charOffcharoffhtml
charSetcharsethtml
checkedcheckedhtml
citecitehtml
classIdclassidhtml
classNameclasssvg, html
clearclearhtml
clipclipsvg
clipPathclip-pathsvg
clipPathUnitsclipPathUnitssvg
clipRuleclip-rulesvg
codecodehtml
codeBasecodebasehtml
codeTypecodetypehtml
colSpancolspanhtml
colorcolorsvg, html
colorInterpolationcolor-interpolationsvg
colorInterpolationFilterscolor-interpolation-filterssvg
colorProfilecolor-profilesvg
colorRenderingcolor-renderingsvg
colscolshtml
compactcompacthtml
contentcontentsvg, html
contentEditablecontenteditablehtml
contentScriptTypecontentScriptTypesvg
contentStyleTypecontentStyleTypesvg
controlscontrolshtml
controlsListcontrolslisthtml
coordscoordshtml
crossOrigincrossoriginsvg, html
cursorcursorsvg
cxcxsvg
cycysvg
ddsvg
datadatahtml
dataTypedatatypesvg
dateTimedatetimehtml
declaredeclarehtml
decodingdecodinghtml
defaultdefaulthtml
defaultActiondefaultActionsvg
deferdeferhtml
descentdescentsvg
diffuseConstantdiffuseConstantsvg
dirdirhtml
dirNamedirnamehtml
directiondirectionsvg
disableddisabledhtml
displaydisplaysvg
divisordivisorsvg
dominantBaselinedominant-baselinesvg
downloaddownloadsvg, html
draggabledraggablehtml
durdursvg
dxdxsvg
dydysvg
edgeModeedgeModesvg
editableeditablesvg
elevationelevationsvg
enableBackgroundenable-backgroundsvg
encTypeenctypehtml
endendsvg
enterKeyHintenterkeyhinthtml
eventeventsvg, html
exponentexponentsvg
externalResourcesRequiredexternalResourcesRequiredsvg
facefacehtml
fillfillsvg
fillOpacityfill-opacitysvg
fillRulefill-rulesvg
filterfiltersvg
filterResfilterRessvg
filterUnitsfilterUnitssvg
floodColorflood-colorsvg
floodOpacityflood-opacitysvg
focusHighlightfocusHighlightsvg
focusablefocusablesvg
fontFamilyfont-familysvg
fontSizefont-sizesvg
fontSizeAdjustfont-size-adjustsvg
fontStretchfont-stretchsvg
fontStylefont-stylesvg
fontVariantfont-variantsvg
fontWeightfont-weightsvg
formformhtml
formActionformactionhtml
formEncTypeformenctypehtml
formMethodformmethodhtml
formNoValidateformnovalidatehtml
formTargetformtargethtml
formatformatsvg
frfrsvg
frameframehtml
frameBorderframeborderhtml
fromfromsvg
fxfxsvg
fyfysvg
g1g1svg
g2g2svg
glyphNameglyph-namesvg
glyphOrientationHorizontalglyph-orientation-horizontalsvg
glyphOrientationVerticalglyph-orientation-verticalsvg
glyphRefglyphRefsvg
gradientTransformgradientTransformsvg
gradientUnitsgradientUnitssvg
hSpacehspacehtml
handlerhandlersvg
hanginghangingsvg
hatchContentUnitshatchContentUnitssvg
hatchUnitshatchUnitssvg
headersheadershtml
heightheightsvg, html
hiddenhiddenhtml
highhighhtml
horizAdvXhoriz-adv-xsvg
horizOriginXhoriz-origin-xsvg
horizOriginYhoriz-origin-ysvg
hrefhrefsvg, html
hrefLanghreflangsvg, html
htmlForforhtml
httpEquivhttp-equivhtml
ididsvg, html
ideographicideographicsvg
imageRenderingimage-renderingsvg
imageSizesimagesizeshtml
imageSrcSetimagesrcsethtml
ininsvg
in2in2svg
initialVisibilityinitialVisibilitysvg
inputModeinputmodehtml
integrityintegrityhtml
interceptinterceptsvg
isishtml
isMapismaphtml
itemIditemidhtml
itemPropitemprophtml
itemRefitemrefhtml
itemScopeitemscopehtml
itemTypeitemtypehtml
kksvg
k1k1svg
k2k2svg
k3k3svg
k4k4svg
kernelMatrixkernelMatrixsvg
kernelUnitLengthkernelUnitLengthsvg
kerningkerningsvg
keyPointskeyPointssvg
keySplineskeySplinessvg
keyTimeskeyTimessvg
kindkindhtml
labellabelhtml
langlangsvg, html
languagelanguagehtml
leftMarginleftmarginhtml
lengthAdjustlengthAdjustsvg
letterSpacingletter-spacingsvg
lightingColorlighting-colorsvg
limitingConeAnglelimitingConeAnglesvg
linklinkhtml
listlisthtml
locallocalsvg
longDesclongdeschtml
looploophtml
lowlowhtml
lowSrclowsrchtml
manifestmanifesthtml
marginHeightmarginheighthtml
marginWidthmarginwidthhtml
markerEndmarker-endsvg
markerHeightmarkerHeightsvg
markerMidmarker-midsvg
markerStartmarker-startsvg
markerUnitsmarkerUnitssvg
markerWidthmarkerWidthsvg
maskmasksvg
maskContentUnitsmaskContentUnitssvg
maskUnitsmaskUnitssvg
mathematicalmathematicalsvg
maxmaxsvg, html
maxLengthmaxlengthhtml
mediamediasvg, html
mediaCharacterEncodingmediaCharacterEncodingsvg
mediaContentEncodingsmediaContentEncodingssvg
mediaSizemediaSizesvg
mediaTimemediaTimesvg
methodmethodsvg, html
minminsvg, html
minLengthminlengthhtml
modemodesvg
multiplemultiplehtml
mutedmutedhtml
namenamesvg, html
navDownnav-downsvg
navDownLeftnav-down-leftsvg
navDownRightnav-down-rightsvg
navLeftnav-leftsvg
navNextnav-nextsvg
navPrevnav-prevsvg
navRightnav-rightsvg
navUpnav-upsvg
navUpLeftnav-up-leftsvg
navUpRightnav-up-rightsvg
noHrefnohrefhtml
noModulenomodulehtml
noResizenoresizehtml
noShadenoshadehtml
noValidatenovalidatehtml
noWrapnowraphtml
noncenoncehtml
numOctavesnumOctavessvg
objectobjecthtml
observerobserversvg
offsetoffsetsvg
opacityopacitysvg
openopenhtml
operatoroperatorsvg
optimumoptimumhtml
orderordersvg
orientorientsvg
orientationorientationsvg
originoriginsvg
overflowoverflowsvg
overlayoverlaysvg
overlinePositionoverline-positionsvg
overlineThicknessoverline-thicknesssvg
paintOrderpaint-ordersvg
panose1panose-1svg
pathpathsvg
pathLengthpathLengthsvg
patternpatternhtml
patternContentUnitspatternContentUnitssvg
patternTransformpatternTransformsvg
patternUnitspatternUnitssvg
phasephasesvg
pingpingsvg, html
pitchpitchsvg
placeholderplaceholderhtml
playbackOrderplaybackordersvg
playsInlineplaysinlinehtml
pointerEventspointer-eventssvg
pointspointssvg
pointsAtXpointsAtXsvg
pointsAtYpointsAtYsvg
pointsAtZpointsAtZsvg
posterposterhtml
prefixprefixhtml
preloadpreloadhtml
preserveAlphapreserveAlphasvg
preserveAspectRatiopreserveAspectRatiosvg
primitiveUnitsprimitiveUnitssvg
profileprofilehtml
promptprompthtml
propagatepropagatesvg
propertypropertysvg, html
rrsvg
radiusradiussvg
readOnlyreadonlyhtml
refXrefXsvg
refYrefYsvg
referrerPolicyreferrerpolicysvg, html
relrelsvg, html
renderingIntentrendering-intentsvg
repeatCountrepeatCountsvg
repeatDurrepeatDursvg
requiredrequiredhtml
requiredExtensionsrequiredExtensionssvg
requiredFeaturesrequiredFeaturessvg
requiredFontsrequiredFontssvg
requiredFormatsrequiredFormatssvg
resourceresourcesvg
restartrestartsvg
resultresultsvg
resultsresultshtml
revrevsvg, html
reversedreversedhtml
rightMarginrightmarginhtml
rolerole
rotaterotatesvg
rowSpanrowspanhtml
rowsrowshtml
rulesruleshtml
rxrxsvg
ryrysvg
sandboxsandboxhtml
scalescalesvg
schemeschemehtml
scopescopehtml
scopedscopedhtml
scrollingscrollinghtml
seamlessseamlesshtml
securitysecurityhtml
seedseedsvg
selectedselectedhtml
shapeshapehtml
shapeRenderingshape-renderingsvg
sidesidesvg
sizesizehtml
sizessizeshtml
slopeslopesvg
slotslothtml
snapshotTimesnapshotTimesvg
spacingspacingsvg
spanspanhtml
specularConstantspecularConstantsvg
specularExponentspecularExponentsvg
spellCheckspellcheckhtml
spreadMethodspreadMethodsvg
srcsrchtml
srcDocsrcdochtml
srcLangsrclanghtml
srcSetsrcsethtml
standbystandbyhtml
startstarthtml
startOffsetstartOffsetsvg
stdDeviationstdDeviationsvg
stemhstemhsvg
stemvstemvsvg
stepstephtml
stitchTilesstitchTilessvg
stopColorstop-colorsvg
stopOpacitystop-opacitysvg
strikethroughPositionstrikethrough-positionsvg
strikethroughThicknessstrikethrough-thicknesssvg
stringstringsvg
strokestrokesvg
strokeDashArraystroke-dasharraysvg
strokeDashOffsetstroke-dashoffsetsvg
strokeLineCapstroke-linecapsvg
strokeLineJoinstroke-linejoinsvg
strokeMiterLimitstroke-miterlimitsvg
strokeOpacitystroke-opacitysvg
strokeWidthstroke-widthsvg
stylestylesvg, html
summarysummaryhtml
surfaceScalesurfaceScalesvg
syncBehaviorsyncBehaviorsvg
syncBehaviorDefaultsyncBehaviorDefaultsvg
syncMastersyncMastersvg
syncTolerancesyncTolerancesvg
syncToleranceDefaultsyncToleranceDefaultsvg
systemLanguagesystemLanguagesvg
tabIndextabindexsvg, html
tableValuestableValuessvg
targettargetsvg, html
targetXtargetXsvg
targetYtargetYsvg
texttexthtml
textAnchortext-anchorsvg
textDecorationtext-decorationsvg
textLengthtextLengthsvg
textRenderingtext-renderingsvg
timelineBegintimelinebeginsvg
titletitlesvg, html
totosvg
topMargintopmarginhtml
transformtransformsvg
transformBehaviortransformBehaviorsvg
translatetranslatehtml
typetypesvg, html
typeMustMatchtypemustmatchhtml
typeOftypeofsvg
u1u1svg
u2u2svg
underlinePositionunderline-positionsvg
underlineThicknessunderline-thicknesssvg
unicodeunicodesvg
unicodeBidiunicode-bidisvg
unicodeRangeunicode-rangesvg
unitsPerEmunits-per-emsvg
unselectableunselectablehtml
useMapusemaphtml
vAlignvalignhtml
vAlphabeticv-alphabeticsvg
vHangingv-hangingsvg
vIdeographicv-ideographicsvg
vLinkvlinkhtml
vMathematicalv-mathematicalsvg
vSpacevspacehtml
valuevaluehtml
valueTypevaluetypehtml
valuesvaluessvg
vectorEffectvector-effectsvg
versionversionsvg, html
vertAdvYvert-adv-ysvg
vertOriginXvert-origin-xsvg
vertOriginYvert-origin-ysvg
viewBoxviewBoxsvg
viewTargetviewTargetsvg
visibilityvisibilitysvg
widthwidthsvg, html
widthswidthssvg
wordSpacingword-spacingsvg
wrapwraphtml
writingModewriting-modesvg
xxsvg
x1x1svg
x2x2svg
xChannelSelectorxChannelSelectorsvg
xHeightx-heightsvg
xLinkActuatexlink:actuatexlink
xLinkArcRolexlink:arcrolexlink
xLinkHrefxlink:hrefxlink
xLinkRolexlink:rolexlink
xLinkShowxlink:showxlink
xLinkTitlexlink:titlexlink
xLinkTypexlink:typexlink
xmlBasexml:basexml
xmlLangxml:langxml
xmlSpacexml:spacexml
xmlnsxmlnsxmlns
xmlnsXLinkxmlns:xlinkxmlns
yysvg
y1y1svg
y2y2svg
yChannelSelectoryChannelSelectorsvg
zzsvg
zoomAndPanzoomAndPansvg

Related

License

MIT © Titus Wormer

Derivative work based on React licensed under BSD-3-Clause-Clear, © 2013-2015, Facebook, Inc.

Metadata

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free