Restricting the selector to only elements of type blockquote makes sure to only apply the styling in case the script has not loaded. My custom blockquote styling on the left, the Twitter widget on the rightīackground-image: url('/ionicons/logo-twitter.svg') īackground-position: top 0.5rem right 0.5rem Here's a comparison between my styling and the widget as rendered by Twitter: This is the reason I decided to add some distinct styling for Tweets when redoing the design for this site. Sure, they will probably figure it out from the use of t.co links and but I'm often a bit confused when I see a tweet presented like this, especially since you're expecting the Tweet to be displayed in the widget as created by Twitter's script. These are simply styled as every other blockquote, which is not a problem in itself, but it does not give the reader an obvious clue to the source of the content. Tweets styled like quotes with my old website theme Here's a screenshot from my website with two embedded tweets:

However, this means that Tweets will be rendered as blockquotes by default. This could happen in situations where Twitter is entirely blocked (whether by a company or a nation-state), the user has JavaScript disabled, or because the script is blocked by Content Blocking in Firefox.

That's great because if the script does not load, the content you wanted to share is still there and readable. Note how all the actual content of the Tweet is just text in a blockquote. Sidenote: please add the data-dnt='true' attribute to tell Twitter you don't want them to track your visitors.

Announcing #fsharp 4.6 - Phillip Carter 2 april 2019

Embedded twitter feed