Detecting :first-letter by javascript

Question

I need to know if an element is styled with a :first-letter style, and it should be a general solution so I won't depend on class names or special style attributes. Is there any 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 to determine if :first-letter is applied to current paragraph?

});

Answer 1

If your CSS is self-hosted, you can:

1. Get a list of all CSS blocks
2. Filter out CSS blocks which do not contain :first-letter in the block's selector
3. Iterate over the list of remaining CSS blocks, and run matchesSelector() with the target element as a receiver and the current CSS block's selector as the argument.
   1. If matchesSelector() returns true, then the current CSS block's rules affect the target element's first letter.
   2. Otherwise move on to the next CSS block in the list

If the CSS isn't self-hosted and the CDN doesn't send CORS headers, then you cannot read the CSS file source due to privacy issues and this cannot be done.

I have also left out figuring out rule-cascading from the algorithm. Another bump in the road is to figure out what pseudo-selectors affect matchesSelector in a false way.

Like consider:

p.webkitMatchesSelector("p:first-letter") //false

So one would have to remove pseudos like :first-letter from the string before attempting to match as these are irrelevant (but pseudos like :nth-child are not because they truly affect matching).

Demo http://jsfiddle.net/PBuzb/5/ (keep in mind the problems I mentioned are not handled really well here) (The base of code originally by Crush)

---

Why is it not allowed to read CSS source in cross-origin situation?

The reason you can only show images, run css/js etc.. from other domains BUT absolutely not access their data in any way is privacy.

The case is easiest to make for images. Let's say I am logged in to facebook, and facebook uses url for private photo like http://facebook.com/myprofile.png. Now I go to evil.com, and evil.com can load the image because I am logged in to facebook, the facebook will give them that image. Normally they cannot access the image or steal it in anyway, but if we enabled cross-origin data access, they could now access my private photo and spread it out.

The same can happen in CSS, there could be user-specific CSS generated by the facebook server that contains user ids of my private friends. They are not so private anymore if any website I can go to can just link to that css and start reading it.

And yes, the main issue is how browsers send cookies with cross-origin request, if the browser didn't send cookies when requesting facebook images/css from evil.com, then facebook could not respond with user-specific css or my private photos because the cookies were necessary to recognize me.

Now imagine if browsers didn't send cookies. Evil.com could still access any intranet data this way because my browser has access to the intranet. Being able to show http://intranet/Myboss.jpg as an image on evil.com website is not a problem, but Evil.com being able to read the image data and thus be able to copy and spread it is a problem.