css - Detecting :first-letter by javascript -
i need know if element styled :first-letter style, , should general solution won't depend on class names or special style attributes. there way? example:
<p class="initial">first</p> <p>second</p> .initial:first-letter { float: left; font-size: 1.5em; font-weight: bold; } $('p').click(function(){ // how determine if :first-letter applied current paragraph? });
if css self-hosted, can:
- get list of css blocks
- filter out css blocks not contain
:first-letter
in block's selector - iterate on list of remaining css blocks, , run
matchesselector()
target element receiver , current css block's selector argument.- if
matchesselector()
returnstrue
, current css block's rules affect target element's first letter. - otherwise move on next css block in list
- if
if css isn't self-hosted , cdn doesn't send cors headers, cannot read css file source due privacy issues , cannot done.
i have left out figuring out rule-cascading algorithm. bump in road figure out pseudo-selectors affect matchesselector
in false way.
like consider:
p.webkitmatchesselector("p:first-letter") //false
so 1 have remove pseudos :first-letter
string before attempting match these irrelevant (but pseudos :nth-child
not because affect matching).
demo http://jsfiddle.net/pbuzb/5/ (keep in mind problems mentioned not handled here) (the base of code crush)
why not allowed read css source in cross-origin situation?
the reason can show images, run css/js etc.. other domains absolutely not access data in way privacy.
the case easiest make images. let's logged in facebook, , facebook uses url private photo http://facebook.com/myprofile.png. go evil.com, , evil.com can load image because logged in facebook, facebook give them image. cannot access image or steal in anyway, if enabled cross-origin data access, access private photo , spread out.
the same can happen in css, there user-specific css generated facebook server contains user ids of private friends. not private anymore if website can go can link css , start reading it.
and yes, main issue how browsers send cookies cross-origin request, if browser didn't send cookies when requesting facebook images/css evil.com, facebook not respond user-specific css or private photos because cookies necessary recognize me.
now imagine if browsers didn't send cookies. evil.com still access intranet data way because browser has access intranet. being able show http://intranet/myboss.jpg
image on evil.com website not problem, evil.com being able read image data , able copy , spread problem.
Comments
Post a Comment